單張圖片在線預覽+圖片壓縮
阿新 • • 發佈：2018-10-24
alert target java reat code 兼容性 scrip 在線預覽 ural
該方法未測試瀏覽器兼容性，僅在谷歌上進行過測試。
圖片在線預覽:一般思路是通過獲取file上的絕對路徑並將路徑賦值給src實現在線預覽功能，但現實中的瀏覽器，尤其是高版本瀏覽器由於用戶安全性考慮，不會讓開發者通過file獲取到絕對路徑，因此使用H5中的畫板功能，將圖片進行重繪後，得到base64編碼的dataURL，再將這個地址賦值給src實現在線預覽功能。
圖片壓縮原理:將大圖根據預定尺寸進行尺寸修改。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p> <img src="images/186.jpg" alt="" id="imgInp"> </p> <p> <input type="file" id="fileInp"> </p> </body> <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script> <script type="text/javascript"> $(‘#fileInp‘).on(‘change‘,function(){ imgPreView(); }) function imgPreView(){ var f = $(‘#fileInp‘)[0].files[0]; if(window.FileReader){ var reader = new FileReader(); }else { alert("您的設備不支持圖片預覽功能，如需該功能請升級您的設備！"); } //對圖片類型進行正則判斷，imageType打印出來的信息是 image/jpeg var imageType = /^image\//; if(!imageType.test(f.type)){ alert("請選擇圖片！"); return; } var image = new Image();
//根據寬高對圖片進行處理，很有意思的邏輯，大家可以思考思考。 image.onload = function(){ var w = 1000; var h = 1000; var nw = this.naturalWidth; var nh = this.naturalHeight; var targetw = 0; var targeth = 0; if (nw > nh) { if (nw > w) { targetw = w; } else { targetw = nw; } targeth = nh / nw * targetw ; } else { if (nh > h) { targeth = h; } else { targeth = nh; } targetw = targeth / nh * nw; } var cvs = document.createElement(‘canvas‘); var ctx = cvs.getContext("2d"); cvs.width = targetw; cvs.height = targeth; ctx.drawImage(image,0,0,nw,nh,0,0,cvs.width,cvs.height); var newImageData = cvs.toDataURL("image/jpeg"); //$(".userHead").val(newImageData.split("base64,")[1]); } reader.onload = function(e){ $("#imgInp").attr("src",e.target.result); image.src = e.target.result; }; reader.readAsDataURL(f); } </script> </html>
單張圖片在線預覽+圖片壓縮