本文实例为大家分享了JavaScript canvas实现加载图片的具体代码，供大家参考，具体内容如下
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Using image</title>
<style type="text/css">
* {
/* margin: 0;
padding: 0; */
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>
参考：链接
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持华域联盟。
您可能感兴趣的文章:
- JS实现图片预加载无需等待
- Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件
- JS判断图片是否加载完成方法汇总(最新版)
- javascript实现图片延迟加载方法汇总(三种方法)
- jquery插件lazyload.js延迟加载图片的使用方法
- js实现图片在未加载完成前显示加载中字样
- 解决js图片加载时出现404的问题
- 关于JS判断图片是否加载完成且获取图片宽度的方法
- JavaScript判断图片是否已经加载完毕的方法汇总
- js或者jquery判断图片是否加载完成实现代码
本文由 华域联盟 原创撰写：华域联盟 » JavaScript canvas实现加载图片
转载请保留出处和原文链接：https://www.cnhackhy.com/79289.htm
