Jquery 關於圖片的壓縮
var OneImgUpLoad = {
OneImageType: 0,
OneImageData: null,
AddImg: function (id) {
var MyFiles = $("#" + id).prop('files');
var MyFile = MyFiles[0];
//檢驗是否爲圖像文件
if (!(MyFile.type == 'image\/jpeg' || MyFile.type == 'image\/png')) {
AlphaMS.JSToolkit.Dialog.MessageBox("請上傳jpeg或png格式的圖片文件！");
return;
}
var imageUrl = OneImgUpLoad.getObjectURL(MyFile);
OneImgUpLoad.convertImgToBase64(imageUrl, function (base64Img) {
//圖片數據
var image_base64 = base64Img.split(",")[1];
//圖片數據
OneImgUpLoad.OneImageType = MyFile.type == 'image\/jpeg' ? 1 : 2;
OneImgUpLoad.OneImageData = image_base64;
if (OneImgUpLoad.OneImageData != "") {
$("#PhotoResultDiv").css("display", "block");
$("#PhotoResult").attr("src", base64Img);
}
$("#" + id).html("");
});
event.preventDefault();
},
convertImgToBase64(url, callback, outputFormat) {
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function () {
var width = img.width;
var height = img.height;
// 按比例壓縮4倍
var rate = (width < height ? width / height : height / width) / 4;
canvas.width = width * rate;
canvas.height = height * rate;
ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);
var dataURL = canvas.toDataURL(outputFormat || 'image/png');
callback.call(this, dataURL);
canvas = null;
};
img.src = url;
},
getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // web_kit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
}
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章