本文实例为大家分享了javascript canvas实现加载图片的具体代码，供大家参考，具体内容如下 代码： <!DOCTYPE html> <html&g
本文实例为大家分享了javascript canvas实现加载图片的具体代码，供大家参考，具体内容如下
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Using image</title>
<style type="text/CSS">
* {
box-sizing: border-box;
}
canvas {
border-width: 1px;
border-color: #000000;
border-style: solid;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div>
<input type="file" accept="image/*" />
</div>
<script type="text/javascript">
window.onload = (event) => {
main()
}
function main() {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const inputFile = document.querySelector("input[type=file]");
inputFile.onchange = (event) => {
const files = event.target.files;
if (files.length > 0) {
const file = files[0]; // First file
console.log(file);
const image = new Image();
image.src = URL.createObjectURL(file);
image.onload = function(event) {
// console.log(event, this);
URL.revokeObjectURL(this.src);
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0);
}
}
}
}
</script>
</body>
</html>参考：链接
--结束END--
本文标题: JavaScript canvas实现加载图片
本文链接: https://lsjlt.com/news/132849.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0