JavaScript canvas實(shí)現(xiàn)加載圖片
本文實(shí)例為大家分享了JavaScript canvas實(shí)現(xiàn)加載圖片的具體代碼，供大家參考，具體內(nèi)容如下
代碼：
<!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>
參考：鏈接
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. PHP使用Swagger生成好看的API文檔2. ASP.NET MVC使用jQuery ui的progressbar實(shí)現(xiàn)進(jìn)度條3. ASP基礎(chǔ)知識(shí)VBScript基本元素講解4. Python3 json模塊之編碼解碼方法講解5. Python 利用Entrez庫(kù)篩選下載PubMed文獻(xiàn)摘要的示例6. Python 制作查詢(xún)商品歷史價(jià)格的小工具7. 通過(guò)實(shí)例解析Python文件操作實(shí)現(xiàn)步驟8. python使用jenkins發(fā)送企業(yè)微信通知的實(shí)現(xiàn)9. Python 如何調(diào)試程序崩潰錯(cuò)誤10. Python 合并拼接字符串的方法
網(wǎng)公網(wǎng)安備