photoclip 图片旋转_上传图片可裁剪-photoClip.js-支持移动端

1. 引入文件：

2. html：

截取

3. 代码初始化：

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

size: [300, 300],    // 截取框的宽和高组成的数组。默认值为[260,260]

outputSize: [800, 800],     // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小

file: "#file",     // 上传图片的type="file">控件的选择器或者DOM对象

view: "#view",    // 显示截取后图像的容器的选择器或者DOM对象

ok: "#clipBtn",    // 确认截图按钮的选择器或者DOM对象

loadStart: function() {    // 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入

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

},

loadComplete: function() {    // 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入

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

},

clipFinish: function(dataURL) {    // 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入

console.log(dataURL);

}

});

4. 说明：

在移动端设备上双指捏合为缩放，双指旋转为旋转；

在PC设备上鼠标滚轮为缩放，每次双击为顺时针旋转90度。