当前时间是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提交到后台。
搜狗浏览器报错误找不到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