300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > webuploader ajax上传图片 webuploader + cropper实现图片裁剪后上传

webuploader ajax上传图片 webuploader + cropper实现图片裁剪后上传

时间:2021-12-31 01:21:15

相关推荐

webuploader ajax上传图片 webuploader + cropper实现图片裁剪后上传

说明

这里主要用了webloader里面的图片预览功能uploader.makeThumb取出对应base64图片文件,将文件生成的文件传给cropper裁剪,裁剪后将文件转换成blob对象传给服务器;

代码分步骤实现

1、取出图片base64的src

uploader.on(fileQueued, function(file) {

//这里动态添加一个上传中的提示……

var $li = $(

+

上传中...

);

uploader.makeThumb(file, function(error, src) {

if (error) {

$img.replaceWith(不能预览);

return;

}

clipFn(src); //取出src传给裁剪函数

// var uploadClipImg = ……………………第三步

}, 1, 1);

2、cropper裁剪

裁剪说明:裁剪的步骤首先是根据cropper提供的接口获取索要裁剪的尺寸参数,比如getData,然后传给生成canvas图像的方法getCroppedCanvas,然后

通过toDataURL()生成裁剪过后的base64地址;

var clipFn = function(src) {

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。