前端進行圖片壓縮
阿新 • • 發佈：2017-05-14
inpu das call read 簡單 scrip reat dataurl -c
無意中看到html5的FileRader這個對象，之前沒見過，查閱了下資料發現是個讀取文件的東西。於是簡單實現了下將圖片轉換成編碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input id="file" type="file"></input> <div id="result"></div> <script> var file = document.getElementById(‘file‘), result = document.getElementById(‘result‘); file.onchange = function(){ if(!this.files.length) return; var files = Array.prototype.slice.call(this.files);if(files.length >= 9){ alert(‘最多只能上傳9張圖片‘); return; } files.forEach(function(file,i){ if(!/(jpeg|png|gif|icon)$/i.test(file.type)) return; var reader = new FileReader(); reader.readAsDataURL(file);//將文件讀取為DataURL reader.onload = function(){ var r = this.result; result.innerHTML = r; var img = document.createElement(‘img‘); img.src = r; img.width = 200; img.height = 120; document.body.appendChild(img); } }); } </script> </body> </html>
前端進行圖片壓縮