JavaScript canvas实现加载图片
本文实例为大家分享了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 fileconsole.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>
参考：链接
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
1. docker /var/lib/docker/aufs/mnt 目录清理方法2. Vuex localStorage的具体使用3. python+excel接口自动化获取token并作为请求参数进行传参操作4. 纯js+css实现在线时钟5. Web应用开发中的几个问题——使用javascript开发需知6. IntelliJ IDEA恢复删除文件的方法7. vue - props 声明数组和对象操作8. Python matplotlib画图时图例说明(legend)放到图像外侧详解9. python tkinter实现下载进度条及抖音视频去水印原理10. 使用Java Swing 创建一个XML编辑器
网公网安备