JQ剪辑图片插件，适用于移动端和PC端

主要用到以下JS文件：

<script src="js/photo/iscroll-zoom.js"></script>

<script src="js/photo/hammer.js"></script>

<script src="js/photo/lrz.all.bundle.js"></script>

<script src="js/photo/jquery.photoClip.js"></script>

 

记得在页面加载完成后初始化插件：

var clipArea = new bjj.PhotoClip("#clickArea", {

size: [254, 246], //编辑区域的宽高

outputSize: [254, 246], //编辑完成后输出的图片尺寸

outputType: "png",

file: "#file", //input框的ID

view: "#view", //编辑区域

ok: "#clickBtn", //剪切按钮

loadStart: function() {

console.log("照片读取中");

},

loadComplete: function() {

console.log("照片读取完成");

},

loadError:function(event){

alert("照片读取失败");

console.log(event);

},

clipFinish: function(dataURL) {

console.log(dataURL);

}

注意:

clickArea、clickBtn、view、file四个要在同一个页面上。

 

Github地址：https://github.com/baijunjie/jQuery-photoClip

转载于:https://www.cnblogs.com/davidpan/p/5563768.html