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. ThinkPHP5 通過ajax插入圖片并實時顯示(完整代碼)2. javascript設計模式 ? 建造者模式原理與應用實例分析3. Python使用oslo.vmware管理ESXI虛擬機的示例參考4. IDEA EasyCode 一鍵幫你生成所需代碼5. Java構建JDBC應用程序的實例操作6. 一篇文章帶你了解JavaScript-對象7. IntelliJ IDEA設置條件斷點的方法步驟8. Express 框架中使用 EJS 模板引擎并結合 silly-datetime 庫進行日期格式化的實現方法9. python flask框架快速入門10. 解決Python paramiko 模塊遠程執行ssh 命令 nohup 不生效的問題
網公網安備