在Pc端实现图片的裁剪功能,可以使用Jquery图片裁剪插件-------PhotoClip
PhotoClip插件描述
该插件可以支持手机端,PC端图片的旋转,缩放,移动等操作。
依赖插件
- [jquery.transit.js] 插件 (v1.4 中已经移除了对该插件的依赖)
- [iscroll-zoom.js] 插件
- [hammer.js] 插件
- [lrz.all.bundle.js] 插件
操作说明
在PC设备上鼠标滚轮为缩放,每次双击顺时针旋转90°。
使用方法及配置参数简介
<div id="clipArea"></div>
<input type="file" id="file">
<button id="clipBtn">截取</button>
<div id="view"></div>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/iscroll-zoom.min.js"></script>
<script src="js/lrz.all.bundle.js"></script>
<script src="js/jquery.photoClip.min.js"></script>
<script>
var clipArea = new bjj.PhotoClip("#clipArea", {
size: [260, 260], // 截取框的宽和高组成的数组。默认值为[260,260]
outputSize: [640, 640], // 输出图像的宽和高组成的数组。默认值为[0,0],表示输出图像原始大小
//outputType: "jpg", // 指定输出图片的类型,可选 "jpg" 和 "png" 两种种类型,默认为 "jpg"
file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
loadStart: function(file) {}, // 开始加载的回调函数。this指向 fileReader 对象,并将正在加载的 file 对象作为参数传入
loadComplete: function(src) {}, // 加载完成的回调函数。this指向图片对象,并将图片地址作为参数传入
loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象,并将错误事件的 event 对象作为参数传入
clipFinish: function(dataURL) {}, // 裁剪完成的回调函数。this指向图片对象,会将裁剪出的图像数据DataURL作为参数传入
});
</script>
Demo
写一个例子,先看一下最后实现的效果:
使用鼠标滚轮可以缩放照片大小,双击照片可以顺时针旋转90°。
首先,我们要写一个图片本身所在的div
<div class="form-group">
<label class="col-md-2 control-label" for="id">个人图片</label>
<div class="col-md-8">
<input type="hidden" name="imageUrl" value="${obj.imageUrl!}" class="form-controluploadinput" readonly="readonly" id="imageUrl"/>
<div id="view" class="clip-view-default" style="width:400px;height:225px;background-image:url(bootstrap-3.3.7/images/icon-add.png);">
<img id="userImg" src="${obj.imageUrl?default('')}" style="width:400px;height:225px;">
</div>
<div style="height:10px"></div>
<input type="file" id="file" style="">
<div class="btn btn-primary" style="display:none;">上传图片 </div>
</div>
</div>
然后在写一个PhotoClip组件必须要存在的一个 id = clipArea的div
<div class="cover-wrap" >
<div class="clipBgn" >
<div id="clipArea" style="margin:10px;height: 520px;"></div>
<div class="clipButton" >
<p>使用说明:点击可移动图片,滚动鼠标缩放图片</p>
<button id="clipBtn" onclick="imgHidden()" class="btn btn-primary">保存图片</button>
</div>
</div>
</div>
需要注意的是,在配置PhotoClip的时候,以下必须存在,否则组件配置会不成功。分别为 id="file"的控件的选择器或者DOM对象,id="view"的显示截取后图像的容器的选择器或者DOM对象,id="clipButton"的确认截图按钮的选择器或者DOM对象。
最后在js方法中,配置整个组件:
var clipArea = new bjj.PhotoClip("#clipArea", {
size: [${width}, ${height}],// 截取框的宽和高组成的数组。默认值为[260,260]
outputSize: [${width}, ${height}], // 输出图像的宽和高组成的数组。默认值为[0,0],表示输出图像原始大小
outputType: "jpg", // 指定输出图片的类型,可选 "jpg" 和 "png" 两种种类型,默认为 "jpg"
file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
loadStart: function() {
// 开始加载的回调函数。this指向 fileReader 对象,并将正在加载的 file 对象作为参数传入
$('.cover-wrap').fadeIn();
console.log("照片读取中");
},
loadComplete: function() {
// 加载完成的回调函数。this指向图片对象,并将图片地址作为参数传入
console.log("照片读取完成");
},
//loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象,并将错误事件的 event 对象作为参数传入
clipFinish: function(dataURL) {
// 裁剪完成的回调函数。this指向图片对象,会将裁剪出的图像数据DataURL作为参数传入
$('.cover-wrap').fadeOut();
$('#view').css('background-size','100% 100%');
console.log(dataURL); //输出图像base64
}
});
配置完这些基本上使用功能没什么大问题了,最后裁剪完成的回调函数,会把图像数据DataURL作为参数传入,存储裁剪完的图像时,可以先把Base64图像数据转化为图片文件然后在进行存储。