身思乐,人事爱,稳恒不言败!

搜狗浏览器不支持Blob的解决方案

当前时间是2017年12月27日

搜狗浏览器最新版本

搜狗

使用场景:

* Cropper v3.1.3
* https://github.com/fengyuanchen/cropper

cropper v3.1.3裁切图片

$image.cropper('getCroppedCanvas', {
// maxWidth: 900,
// maxHeight: 900,
fillColor: '#fff',
checkCrossOrigin: false,
}).toBlob(function (blob) {
var formData = new FormData();
formData.append('ArticleCover[file]', blob);
formData.append('articleId', upParams.article_id);
formData.append('template', upParams.template);
$.ajax({
    method: 'post',
    url: 'index.php?r=article%2Fupload-cover',
    data: formData,
    processData: false,
    contentType: false,
    success: function (data) {
        data = JSON.parse(data);
        if (data.errno == '0') {
            if(typeof(cb)=='function'){
                cb(data.url, $('#list_dialog'), _this);
            }
        } else {
            parent.layer.msg(data.msg);
        }
    },
    error: function (xmlHttpRequest, textStatus, errorThrown) {
        parent.layer.msg("出错了," + textStatus);
    }
});

toBlob将cropper裁切获取到canvas:
在前端裁剪,通过html5的HTMLCanvasElement.toBlob方法,把裁剪后的图片通过表单方式用ajax提交给后台,或者使用HTMLCanvasElement.toDataURL 把图片转换为base64提交到后台。

cropperbug

搜狗浏览器报错误找不到toBlob

解决方案:

polyfill JavaScript-Canvas-to-Blob 解决了 HTMLCanvasElement.toBlob 的兼容性

github地址:https://github.com/blueimp/JavaScript-Canvas-to-Blob

 

form:

http://blog.csdn.net/u012552049/article/details/72829473

https://segmentfault.com/q/1010000008711634

https://github.com/blueimp/JavaScript-Canvas-to-Blob