主要用到以下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

相关文章:

  • 2021-11-03
  • 2021-08-09
  • 2021-12-22
  • 2021-11-26
  • 2021-11-26
  • 2021-10-19
  • 2021-12-22
猜你喜欢
  • 2021-12-22
  • 2021-11-09
  • 2021-07-03
  • 2018-12-07
  • 2021-09-06
  • 2021-08-06
  • 2021-04-19
  • 2022-01-01
相关资源
相似解决方案