问题描述:

  使用 cropper.js 剪裁图片时, 调用 toBlob() 方法报错

$("#image").cropper('getCroppedCanvas').toBlob(function (blob){})

  报错信息:

  Uncaught TypeError: $(...).cropper(...).toBlob is not a function

解决方法:

    /* 使用二进制方式处理dataUrl */
function processData(dataUrl) {
var binaryString = window.atob(dataUrl.split(',')[1]);
var arrayBuffer = new ArrayBuffer(binaryString.length);
var intArray = new Uint8Array(arrayBuffer);
for (var i = 0, j = binaryString.length; i < j; i++) {
intArray[i] = binaryString.charCodeAt(i);
} var data = [intArray],
blob; try {
blob = new Blob(data);
} catch (e) {
window.BlobBuilder = window.BlobBuilder ||
window.WebKitBlobBuilder ||
window.MozBlobBuilder ||
window.MSBlobBuilder;
if (e.name === 'TypeError' && window.BlobBuilder) {
var builder = new BlobBuilder();
builder.append(arrayBuffer);
blob = builder.getBlob(imgType); // imgType为上传文件类型,即 file.type
} else {
console.log('版本过低,不支持上传图片');
}
}
return blob;
}

  最后调用代码:

    $('#cutBtn').click(function() {
var data = $('#image').cropper('getCroppedCanvas', {
width: 300, // 裁剪后的长宽
height: 300
}),
blob = processData(data.toDataURL()); var formData = new FormData();
formData.append('uploadImg', blob);
$.ajax({
url: '/path/to/upload',
method: "POST",
data: formData,
processData: false,
contentType: false,
success: function() {
console.log('Upload success');
},
error: function() {
console.log('Upload error');
}
});
});

cropper.js 用法说明文档

https://github.com/fengyuanchen/cropperjs/blob/master/README.md

cropper图片剪裁 , .toBlob()报错的更多相关文章

  1. 两个由于php.ini配置错误导致的报错:ajax图片上传报错和exec报错

    遇到了两个由于php.ini配置错误导致的报错:ajax图片上传报错和exec报错 首先第一个: 在做一个用ajax图片上传的功能中,php报了这样一个错误:File upload error - u ...

  2. Canvas引入跨域的图片导致toDataURL()报错的问题的解决

    本文介绍了Canvas引入跨域的图片导致toDataURL()报错的问题的解决,分享给大家,具体如下: [场景] 用户打开网页,则请求腾讯COS(图片服务器)上的图片js代码.使用canvas绘图. ...

  3. vs中正常IIS发布网站后css样式、图片丢失jQuery报错 $ is not defined

    问题描述: VS运行能够正常看到样式和图片 ,IIS发布后样式丢失.图片不显示.并且jQuery报错“$ is not defined”. 问题分析: 1.首先怀疑是样式文件.图片等发布的时候没有发布 ...

  4. blurImage做图片模糊处理报错free(): invalid next size

    $image = new Imagick($url); $image->blurImage($x, $y); 调用blurImage($x, $y)函数报错: 原因是:原来的图片是CMYK的是印 ...

  5. Access to Image at 'file:///Users canvas本地图片跨域报错解决方案

    1.设置跨域 添加跨域条件   crossorigin="anonymous" 前提是后端支持这个图片跨域 2.上面加了之后还是报错 如标题所示 你需要把你的项目放到服务器上面跑 ...

  6. flutter 图片为空报错

    imgpath != null ? Image.network(imgpath) : Container() 如果不判断imgpath 为空 network 内的url 为空就会报错

  7. 解决 canvas 将图片转为base64报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasEleme...

    问题描述 当用户点击分享按钮时,生成一张海报,可以保存图片分享到朋友圈,用户的图片是存储在阿里云的OSS,当海报完成后,执行.canvas.toDataURL("image/png" ...

  8. 解决 canvas 将图片转为base64报错

    var canvas=document.getElementById("canvas"),//获取canvas ctx = canvas.getContext("2d&q ...

  9. 添加图片后xcode报错:resource fork, Finder information, or similar detritus not allowed

    /Users/songximing/Library/Developer/Xcode/DerivedData/Children-cvqgzlzddltkfndhdmzedxbnoxwx/Build/Pr ...

随机推荐

  1. spring boot 使用静态资源

    ./ 当前目录../ 父级目录/ 根目录 spring boot 打包时: The default includes are as follows: 默认包括的文件 public/**, resour ...

  2. Ubuntu16.04 安装 “宋体,微软雅黑,Consolas雅黑混合版编程字体” 等 Windows 7 下的字体

    Windows平台下,“宋体”.“微软雅黑”.“Courier New(编程字体)”用的比较多,看的也习惯了.那如何在 Ubuntu下也安装这些字体呢? 操作步骤如下: 第一步:从 Windows 7 ...

  3. 训练/验证/测试集设置;偏差/方差;high bias/variance;正则化;为什么正则化可以减小过拟合

    1. 训练.验证.测试集 对于一个需要解决的问题的样本数据,在建立模型的过程中,我们会将问题的data划分为以下几个部分: 训练集(train set):用训练集对算法或模型进行训练过程: 验证集(d ...

  4. collections模块(收藏)

    collections是Python内建的一个集合模块,提供了许多有用的集合类. 1. namedtuple 我们知道tuple可以表示不变集合,例如,一个点的二维坐标就可以表示成: >> ...

  5. testng入门教程12 TestNG执行多线程测试

    testng入门教程 TestNG执行多线程测试 testng入门教程 TestNG执行多线程测试 并行(多线程)技术在软件术语里被定义为软件.操作系统或者程序可以并行地执行另外一段程序中多个部分或者 ...

  6. owl.carousel

    简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON ...

  7. [转]使用C#开发ActiveX控件全攻略

    前言: 这段时间因为工作的需要,研究了一下ActiveX控件.总结如下: 先说说ActiveX的基本概念. 根据微软权威的软件开发指南MSDN(Microsoft Developer Network) ...

  8. Python 成对处理数据 zip()

    当你想成对处理数据的时候zip() 函数是很有用的.比如,假设你头列表和一个值列表,就像下面这样: headers = ['name', 'shares', 'price'] values = ['A ...

  9. nohup 命令(设置后台进程): appending output to ‘nohup.out’ 问题

    一.Linux 下使用 nohup Unix/Linux下一般比如想让某个程序在后台运行,很多都是使用 & 在程序结尾来让程序自动运行. 比如我们要运行weblogic在后台:./startW ...

  10. python之路----网络编程--黏包

    黏包现象 让我们基于tcp先制作一个远程执行命令的程序(命令ls -l ; lllllll ; pwd) res=subprocess.Popen(cmd.decode('utf-8'), shell ...