js圖片轉base64編碼壓縮上傳
阿新 • • 發佈:2018-12-30
/** * 回撥函式 * @param image_base64 */ var callback = function(image_base64) { ajaxPost('請求上傳路徑', { headImg: image_base64 }, function (err, data) { if (err) { cb(err, null); } else { // 変更圖片src $("#ImgId").attr("src", data.imgUrl); } }); } /** * 頭像選擇觸發事件 */ $(page).on('change', '#imgFileId', function () { fileUpload(this.files[0], callback); }); /** * 將檔案轉成base64 * @param obj * @param callback * @returns {boolean} */ var fileUpload = function(obj, callback){ var file = obj; //判斷型別是不是圖片 if(!/image\/\w+/.test(file.type)){ alert("請確保檔案為影象型別"); return false; } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { var img = new Image, width = 95, //圖片resize寬度 quality = 1.0, //影象質量 canvas = document.createElement("canvas"), drawer = canvas.getContext("2d"); img.src = this.result; canvas.width = width; canvas.height = width * (img.height / img.width); drawer.drawImage(img, 0, 0, canvas.width, canvas.height); img.src = canvas.toDataURL(); var image_base64 = img.src.replace("data:image/png;base64,",""); // 呼叫回撥 callback&&callback(image_base64); } }