更新时间:2020-11-16 16:48:02
更新说明:解决图片剪裁后默认图片未改变的问题。
项目需要移动端页面上传图像并进行裁剪,网上找了许多插件,感觉这个比较简单,功能也强大可以进行拖拽,缩放,旋转。
自己做了个简单的demo样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var clipArea = new PhotoClip( "#clipArea" , { size: [300, 300], //裁剪框大小 outputSize: [0, 0], //打开图片大小,[0,0]表示原图大小 file: "#file" , view: "#view" , //裁剪预览图片id(需要的自行添加) ok: "#clipBtn" , loadStart: function () { //图片开始加载的回调函数。this 指向当前 PhotoClip 的实例对象,并将正在加载的 file 对象作为参数传入。(如果是使用非 file 的方式加载图片,则该参数为图片的 url) }, loadComplete: function () { //图片加载完成的回调函数。this 指向当前 PhotoClip 的实例对象,并将图片的 <img> 对象作为参数传入。 }, done: function (dataURL) { //裁剪完成的回调函数。this 指向当前 PhotoClip 的实例对象,会将裁剪出的图像数据DataURL作为参数传入。 console.log(dataURL); //dataURL裁剪后图片地址base64格式提交给后台处理 } }); |
特别申明:
本站所有资源都是由网友投稿发布,或转载各大下载站,请自行检测软件的完整性!
本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
如有侵权请联系我们删除下架,联系方式:lei1294551502@163.com