cropper图片剪裁 , .toBlob()报错
问题描述:
使用 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()报错的更多相关文章
- 两个由于php.ini配置错误导致的报错:ajax图片上传报错和exec报错
遇到了两个由于php.ini配置错误导致的报错:ajax图片上传报错和exec报错 首先第一个: 在做一个用ajax图片上传的功能中,php报了这样一个错误:File upload error - u ...
- Canvas引入跨域的图片导致toDataURL()报错的问题的解决
本文介绍了Canvas引入跨域的图片导致toDataURL()报错的问题的解决,分享给大家,具体如下: [场景] 用户打开网页,则请求腾讯COS(图片服务器)上的图片js代码.使用canvas绘图. ...
- vs中正常IIS发布网站后css样式、图片丢失jQuery报错 $ is not defined
问题描述: VS运行能够正常看到样式和图片 ,IIS发布后样式丢失.图片不显示.并且jQuery报错“$ is not defined”. 问题分析: 1.首先怀疑是样式文件.图片等发布的时候没有发布 ...
- blurImage做图片模糊处理报错free(): invalid next size
$image = new Imagick($url); $image->blurImage($x, $y); 调用blurImage($x, $y)函数报错: 原因是:原来的图片是CMYK的是印 ...
- Access to Image at 'file:///Users canvas本地图片跨域报错解决方案
1.设置跨域 添加跨域条件 crossorigin="anonymous" 前提是后端支持这个图片跨域 2.上面加了之后还是报错 如标题所示 你需要把你的项目放到服务器上面跑 ...
- flutter 图片为空报错
imgpath != null ? Image.network(imgpath) : Container() 如果不判断imgpath 为空 network 内的url 为空就会报错
- 解决 canvas 将图片转为base64报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasEleme...
问题描述 当用户点击分享按钮时,生成一张海报,可以保存图片分享到朋友圈,用户的图片是存储在阿里云的OSS,当海报完成后,执行.canvas.toDataURL("image/png" ...
- 解决 canvas 将图片转为base64报错
var canvas=document.getElementById("canvas"),//获取canvas ctx = canvas.getContext("2d&q ...
- 添加图片后xcode报错:resource fork, Finder information, or similar detritus not allowed
/Users/songximing/Library/Developer/Xcode/DerivedData/Children-cvqgzlzddltkfndhdmzedxbnoxwx/Build/Pr ...
随机推荐
- [py][mx]django模板继承-课程列表页
课程列表页分析 1,机构类型 2,所在地区 3.排序 学习人数 先分析下 纵观页面,页头页脚都一样. django提供了模板继承. 至少 不同页面的title 面包屑路径 content内容不一致,以 ...
- iOS 第三方框架-MBProgressHUD
MBProgressHUD提示框官网地址:https://github.com/jdg/MBProgressHUD 官网里已经提供了足够多的例子供我们使用,但在实现开发中,我们用到的只是其中的一小部分 ...
- iOS 界面启动时,功能新特征显示
APP新启动的时候,都会有几张新的图片滑动,才能到主的界面.现在,我们新建一个控制器,专门来处理新特性,直接上代码. 第一步:新建一个NewfeatureController // // HWNewf ...
- 怎么把<li>标签里的内容付给文本框
如果你不想使用jq,那就可以这样先写一个js函数,function val(a){alert(a);} 然后在li标签上添加点击事件,调用这个函数并将当前li里的文本当做参数一起发送给js函数< ...
- shell应用技巧
Shell 应用技巧 Shell是一个命令解释器,是在内核之上和内核交互的一个层面. Shell有很多种,我们所使用的的带提示符的那种属于/bin/bash,几乎所有的linux系统缺省就是这种she ...
- JS中“==”和“===”的原理和区别
1.为什么讨论这个问题? - 有个说法,尽量不用==,而使用===,是这样吗? 2.分析问题,原理是什么? 下面说说ECMAScript 5 language specification里的说明: 1 ...
- Windows下Ionic Android开发环境搭建
转自 http://www.itwap.net/ArticleContent.aspx?id=26 来源: itwap.net 作者: 词略 时间: 2015-4-2 16:57:28 (一)Ioni ...
- Q-learning简明实例Java代码实现
在<Q-learning简明实例>中我们介绍了Q-learning算法的简单例子,从中我们可以总结出Q-learning算法的基本思想 本次选择的经验得分 = 本次选择的反馈得分 + 本次 ...
- 一个快速检测系统CPU负载的小程序
原理说明 在对服务器进行维护时,有时也遇到由于系统 CPU(利用率)负载过高导致业务中断的情况.服务器上可能运行多个进程,查看单个进程的 CPU 都是正常的,但是整个系统的 CPU 负载可能是异常的. ...
- 解析分布式锁之Redis实现(二)
摘要:在前文中提及了实现分布式锁目前有三种流行方案,分别为基于数据库.Redis.Zookeeper的方案,本文主要阐述基于Redis的分布式锁,分布式架构设计如今在企业中被大量的应用,而在不同的分布 ...