脚本宝典收集整理的这篇文章主要介绍了file+canvas实现图片展示和下载,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" /> <div id="c"></div> <script> var div = document.getElementById('c') var fileselect = document.getElementById('fileselect') function downloadHandler(e) { var url = e.target.toDataURL(); var a = document.createElement('a'); a.href = url a.download = e.target.getAttribute('file-name').replace('.svg', '.png'); a.click() } function handleFile(f) { //图片展示 和点击下载 var reader = new FileReader(); var canvas = document.createElement('canvas'); div.appendChild(canvas) reader.onload = function(e) { var image = new Image() image.onload = function() { canvas.setAttribute('file-name', f.name) canvas.addEventListener('click', downloadHandler); canvas.width = image.width canvas.height = image.height canvas.getContext('2d').drawImage(image, 0, 0) } image.src = e.target.result } reader.readAsDataURL(f) } function FileSelectHandler(e) { var files = e.target.files || e.dataTransfer.files //dataTransfer主要用于在源对象和目标对象之间传递数据 for (var i = 0, f; f = files[i]; i++) { handleFile(f) } } //input添加监听事件 fileselect.addEventListener('change', FileSelectHandler, false) //true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行 </script> </body> </html>
以上是脚本宝典为你收集整理的file+canvas实现图片展示和下载全部内容,希望文章能够帮你解决file+canvas实现图片展示和下载所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。