演示webuploader和cropperjs图片裁剪上传
最近有个项目要在浏览器端裁剪并上传图片。由于缺乏人力,只能我上阵杀敌。通过参考各种文章,最后决定用cropperjs进行图片裁剪,用webuploader上传文件。本文涉及到的知识至少有Java基础、SpringMVC、thymeleaf模版引擎、JS基础、JQuery基础、Bootstrap组件,但是文章重点只是cropperjs和webuploader的组合运用,其他的都是辅助。
1. 依赖JS库
webuploader官网
cropperjs演示主页
cropperjs开源主页
2. 核心流程
- 2.1 选择文件按钮
previewImg用于预览上传后的图片;picker用于选择图片,webuploader会自动给picker赋予选择文件的特性。fileInput用于接收文件数据。
<div class="form-group">
<img id="previewImg" width="200px" />
<div>
<a href="javascript:void(0)" id="picker">选择图片</a>
<input type="file" id="fileInput" style="display: none" />
</div>
</div>
下面代码给fileInput组件触发了点击事件
$("#picker").on('click', function () {
$("#fileInput").trigger("click");
});
- 2.2 定义组件参数和事件
以下代码定义上传组件对象
var uploader = WebUploader.create({
auto: true,// 选完文件后,是否自动上传。
server: '/upload',
fileSingleSizeLimit: 2 * 1024 * 1024,
duplicate: true,
accept: {// 只允许选择图片文件。
title: 'Images',
extensions: 'jpg,jpeg,png',
mimeTypes: 'image/jpg,image/jpeg,image/png'
},
//如果有表单数据要上传,可以给formData赋值
formData: {
id: 0
}
});
以下代码定义上传组件事件。WebUploader组件不提供UI,如果需要定制界面,实现下面的方法即可。
//提交额外的表单数据
uploader.on('uploadBeforeSend', function (object, data, header) {
data.id = $('#id').val();
});
// 当有文件被添加进队列的时候
uploader.on('fileQueued', function (file) {
$('#file_list').append('<div id="' + file.id + '" class="item">' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="state">等待上传...</p>' +
'</div>');
});
// 上传成功
uploader.on('uploadSuccess', function (file, response) {
$('#' + file.id).find('p.state').text('已上传');
console.log(response._raw);
var object = $.parseJSON(response._raw);
//给预览组件赋值
$('#previewImg').attr("src", object.url);
});
// 上传发生错误
uploader.on('uploadError', function (file) {
$('#' + file.id).find('p.state').text('上传出错');
});
// 上传中
uploader.on('startUpload', function (file, rs) {
console.log("文件正在上传中,请稍候");
});
- 2.3 定义裁剪组件参数和事件
以下代码定义裁剪图片的对话框,cropperImage是上传后的图片,被裁剪的目标对象。
<div class="modal" id="cropperImageModal" tabindex="-1" role="dialog" aria-labelledby="cropperImageModal"
aria-hidden="true">
<div class="modal-dialog" style="width: 50%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">裁剪图片</h4>
</div>
<div class="modal-body">
<!-- cropperImage是上传后的图片,被裁剪的目标对象 -->
<img src="" id="cropperImage" style="max-width: 100%"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="modalClose">关闭</button>
<button type="button" class="btn btn-primary" id="modalSubmit">保存</button>
</div>
</div>
</div>
</div>
以下代码定义图片裁剪参数,更多参数参考cropper.js的API详解。如果不需要固定裁剪区域大小,删除ready函数即可。
var cropperImage = $("#cropperImage");
var cropperOptions = {
viewMode: 1,
dragMode: 'none',
aspectRatio: 1,
background: false,
autoCropArea: 0.6,
crop: function (event) {
//裁剪的实时事件
console.log(event.detail.width);
console.log(event.detail.height);
},
ready: function () {
//限定裁剪区域大小为500
cropperImage.cropper('crop');
cropperImage.cropper('setData', {
width: 500,
height: 500
})
}
};
- 2.5 触发裁剪和上传事件
fileInput组件的change事件会采用FileReader对象获得上传的Image,初始化cropperjs裁剪方法。
$("#fileInput").on('change', function () {
var file = this.files[0];
//定义读文件对象
var reader = new FileReader();
reader.onload = function () {
imageOnload(reader.result);
};
reader.readAsDataURL(file);//File对象转换为dataURL
});
//图片对象加载方法
function imageOnload(url) {
var cropperImg = new Image();
cropperImg.src = url;
//destroy方法是为了重入不出错
cropperImage.cropper('destroy').attr('src', url).cropper(cropperOptions);
cropperImg.onload = function () {
//弹窗裁剪
$('#cropperImageModal').modal();
$("#modalClose").on('click', function () {
$("#fileInput").val('');
$('#cropperImageModal').modal('hide');
});
$("#modalSubmit").on('click', function () {
var canVas = $("#cropperImage").cropper("getCroppedCanvas", {});//获取裁剪后得到的canvas数据
var file = convertBase64UrlToBlob(canVas.toDataURL('image/jpeg', '0.0'));//将canvas转换为Blob格式
uploader.addFiles(file);//将裁剪后的图片添加进webuploader上传到后台
$('#cropperImageModal').modal('hide');
$("#fileInput").val('');
});
};
}
采用cropperImage.cropper('getCroppedCanvas').toblob(function(blob){})
也可以获取图片二进制对象,但是默认是png格式,体积很大,不利于网络传输,采用下面的方法可以指定图片格式。
/**
* base64转为blob,图片为jpeg格式
*/
function convertBase64UrlToBlob(urlData) {
//去掉url的头,并转换为byte
var bytes = window.atob(urlData.split(',')[1]);
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], {type: 'image/jpeg'});
}
- 2.6 后端接口实现
@Controller
public class IndexController {
protected final Logger logger = LoggerFactory.getLogger(getClass());
@RequestMapping("/index")
public String list(ModelMap map) {
return "index";
}
@PostMapping("/upload")
@ResponseBody
public UploadFileVo uploadFile(@RequestParam("file") MultipartFile file, @RequestParam("id") Integer id, HttpServletResponse response) {
response.setContentType("text/html");
//保存图片到服务端,返回访问地址
UploadFileVo uploadFileVo = new UploadFileVo();
//这里为了演示,返回一张网图
uploadFileVo.setUrl("https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png");
logger.info("上传成功,url:{},id:{}", uploadFileVo.getUrl(), id);
return uploadFileVo;
}
}
- 2.7 最终效果图
3. 完整代码
参考
https://www.codingbrick.com/archives/456.html
演示webuploader和cropperjs图片裁剪上传的更多相关文章
- PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例
PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例,在手机上双指捏合为缩放,双指旋转可根据旋转方向每次旋转90度,在电脑上鼠标滚轮为缩放,双击则顺时针旋转90度. 下面让我们来看 ...
- vue中使用cropperjs进行图片裁剪上传
下面代码直接就可以复制使用了,但是需要在本地下个cropperjs,下载命令:npm install cropperjs --save-dev <template> <div id= ...
- 微信小程序实现图片裁剪上传(wepy)
参考https://github.com/we-plugin/we-cropper,在wepy中实现,参考的具体例子是we-cropper/example/cutInside/ 项目上传图片时2:3的 ...
- 图片裁剪上传插件——jquery.photoClip.js
想要裁剪图片上传: 需要依赖的的插件为: [jquery.photoClip.js] 插件[iscroll-zoom.js] 插件[hammer.js] 插件 [lrz.all.bundle.js] ...
- PHP裁剪图片并上传完整demo
日前根据功能需求,要做一个图片裁剪上传的功能,在网上找了好久,找到了这位仁兄写的demo! 下载压缩包
- 三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)
涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...
- PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件
PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...
- asp.net实现图片在线上传并在线裁剪
1.说明 接上一篇文章uploadify实现多附件上传完成后,又突然用到头像上传并在线裁剪.在网上找个众多例子都没有符合要求的,有一篇文章写的不错,就是文旺老兄写的这篇Asp.Net平台下的图片在线裁 ...
- HTML5 本地裁剪图片并上传至服务器(转)
很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 ...
- HTML5裁剪图片并上传至服务器实现原理讲解
HTML5裁剪图片并上传至服务器实现原理讲解 经常做项目需要本地上传图片裁剪并上传服务器,比如会议头像等功能,但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁 ...
随机推荐
- ffmpeg 使用记录
这周周末尝试把我硬盘上面的视频文件压缩了一下,但是效果并不理想.其中主要有两个原因, 视频本来就是h264的编码,再重新编码也没啥用,因为限制大小的主要是码率 ffmpeg GPU加速版的h265编码 ...
- 11 .Codeforces Round 891 (Div. 3)E. Power of Points(推公式+前缀和优化)
E. Power of Points 题解参考 #include <bits/stdc++.h> #define int long long #define rep(i, a, b) fo ...
- WPF --- 重写圆角DataGrid样式
引言 因要符合UI设计, 需要一个圆角的 DataGrid 样式,其需要一个,所以需要重写DataGrid的样式, 代码 具体样式代码如下: <ResourceDictionary xmlns= ...
- 摆脱鼠标系列 - vscode - 跳转到下一个文件 Ctrl(右边) + PageDown 这个很常用
为什么 摆脱鼠标系列 - vscode - 跳转到下一个文件 Ctrl(右边) + PageDown 这个很常用 右边Ctrl 就可以单手操控了 这个频率很高
- idea 暂存 Stash Changes Git/Repository/Stash Changes 恢复暂存 UnStash Changes
idea 暂存 Stash Changes Git/Repository/Stash Changes 恢复暂存 UnStash Changes git stash save "save me ...
- 表单验证 validate 两种 一种是callback配合外部变量,当同步用。第2中是 then async await 这种 真正$api也适用
validateFormRealProcessLeft () { let ret = false this.$refs.xxx.validate((valid) => { if (valid) ...
- 在运行程序是出现sh: 行 1: cls: 未找到命令
在运行程序是出现sh: 行 1: cls: 未找到命令 原因是system("cls");--这是在程序中调用系统命令,但是linux识别不了.功能是清除当前的终端显示数据.找到l ...
- Uni-App 实现资讯滚动
项目需要实现资讯的滚动,使用了Swiper组件,实现了首页头部的资讯滚动,简单地做下笔记 效果 实现说明 主要是使用了Swiper可以自动滚动的特性来实现,左边是一个图片,右边则是Swpier,且姜S ...
- Inno setup 脚本判断 Microsoft Visual C++ Redistributable 不同版本区别
有个需要是需要在安装包安装初始化时安装 Microsoft Visual c++ 2013 Redistributable 也就是判断软件安装前需不需要运行 vcredist_x64.exe 和 VC ...
- sqlplus清屏方法
cmd中使用:host cls 或 clear screen或 clear scre或clea scr