前言:由於有裁剪圖像的需求,所以就應用了Cropper.js插件,但是在IE瀏覽器就爆出了兼容blob問題。
解決方案:其實在https://www.canvasapi.cn/HTMLCanvasElement/toBlob#&othersCanvas中文官網官方網站有給出IE瀏覽器的兼容解決方案。
兼容:
首先,toBlob()方法IE9瀏覽器不支持,因爲Blob數據格式IE10+才支持。
然後,對於IE瀏覽器,toBlob()的兼容性有些奇怪,IE10瀏覽器支持ms私有前綴的toBlob()方法,完整方法名稱是msToBlob()。而IE11+,toBlob()方法卻不支持。
但是,我們可以基於toDataURL()方法進行polyfill,性能相對會差一些,JavaScript代碼如下,參考自MDN:
// 登錄狀態下不會出現這行文字,點擊頁面右上角一鍵登錄
if (!HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
value: function (callback, type, quality) {
var canvas = this;
setTimeout(function() {
var binStr = atob( canvas.toDataURL(type, quality).split(',')[1] );
var len = binStr.length;
var arr = new Uint8Array(len);
for (var i = 0; i < len; i++) {
arr[i] = binStr.charCodeAt(i);
}
callback(new Blob([arr], { type: type || 'image/png' }));
});
}
});
}
// 登錄狀態下不會出現這行文字,點擊頁面右上角一鍵登錄
具體操作方案就是在自己的代碼前面把上面的代碼複製進自己的js文件調用.toBlob之前即可,什麼都不需要修改,下面是實例:
if (!HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
value: function (callback, type, quality) {
var canvas = this;
setTimeout(function () {
var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]);
var len = binStr.length;
var arr = new Uint8Array(len);
for (var i = 0; i < len; i++) {
arr[i] = binStr.charCodeAt(i);
}
callback(new Blob([arr], { type: type || 'image/png' }));
});
}
});
}
$('#img').cropper("getCroppedCanvas").toBlob(function (blob) {
var filesize = blob["size"];
var fileType = blob["type"];
if (filesize && fileType) {
var fileName = "myImage." + fileType.substring(6, fileType.length);
var objecturl = window.URL.createObjectURL(blob);
$("#tempImg").attr("src", objecturl);
var formData = new FormData();
formData.append('fileName', fileName);
formData.append('image', blob);
formData.append('type', 'service');
$.ajax({
type: 'POST',
url: '/uploadpic',
dataType: 'json',
processData: false,
contentType: false,
data: formData,
success: function (res) {},