js h5 上傳圖片 轉成base64 進行圖片壓縮 不失真
阿新 • • 發佈：2019-01-10
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>測試</title> <link rel="stylesheet" href="./css/index.css" /> <link rel="stylesheet" href="./css/index_1.css" /> <script type="text/javascript" src="script/jquery.min.js"></script> <script type="text/javascript" src="script/ys.js"></script> </head> <body> <div class="free-upload"> H5頁面 <p> 上傳您的約會照片，上傳圖片 </p> <div class="free-upload-photo"> <span id="photo_img"></span> <input type="file" id="photo" onchange="start_upload(this)"/> </div> </div> <img src="" id="csimg" width="200" height="200"/> </body> <script> function start_upload(obj){ if(!isCanvasSupported){ console.log("2222"); }else{ compress(event, function(base64Img){ $("#csimg").attr("src",base64Img); console.log(base64Img); // 如需儲存 或 把base64轉成圖片 ajax提交後臺處理 // 我這裡採用ajax方式 自己封裝的 ajax('qnl_app/tes_ac_img',{'base64Img':base64Img},function(date){ console.log(JSON.stringify(date)); }); }); } } </script> </html>
以上是H5頁面
下面是 壓縮js
//判斷是否存在畫布 function isCanvasSupported() { var elem = document.createElement('canvas'); return !!(elem.getContext && elem.getContext('2d')); } //壓縮方法 function compress(event, callback) { if ( typeof (FileReader) === 'undefined') { console.log("當前瀏覽器核心不支援base64圖示壓縮"); //呼叫上傳方式 不壓縮 } else { try { var file = event.currentTarget.files[0]; if(!/image\/\w+/.test(file.type)){ alert("請確保檔案為影象型別"); return false; } var reader = new FileReader(); reader.onload = function (e) { var image = $('<img/>'); image.load(function () { console.log("開始壓縮"); var square = 700; var canvas = document.createElement('canvas'); canvas.width = square; canvas.height = square; var context = canvas.getContext('2d'); context.clearRect(0, 0, square, square); var imageWidth; var imageHeight; var offsetX = 0; var offsetY = 0; if (this.width > this.height) { imageWidth = Math.round(square * this.width / this.height); imageHeight = square; offsetX = - Math.round((imageWidth - square) / 2); } else { imageHeight = Math.round(square * this.height / this.width); imageWidth = square; offsetY = - Math.round((imageHeight - square) / 2); } context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight); var data = canvas.toDataURL('image/jpeg'); //壓縮完成執行回撥 callback(data); }); image.attr('src', e.target.result); }; reader.readAsDataURL(file); } catch(e) { console.log("壓縮失敗!"); //呼叫上傳方式 不壓縮 } } }
新手 大神勿噴