素材牛VIP会员

基于PhotoClip移动端上传图片裁剪

 所属分类:网页殊效-图片裁剪,上传

 浏览:1529次-  下载:7次-  评论:3次-  更新时间:2017-09-18
基于PhotoClip移动端上传图片裁剪兼容IE11
积分辩明:注册即送15牛币,逐日签到可取得5牛币,成为VIP会员可永久免积分下载!   充值积分   充值会员   更多解释»
素材描述:项目须要移动端页面上传图象并停止裁剪,网上找了很多插件,感到这个比较简单,功能也强大年夜可以停止拖拽,缩放,改变。

详细简介

项目须要移动端页面上传图象并停止裁剪,网上找了很多插件,感到这个比较简单,功能也强大年夜可以停止拖拽,缩放,改变。

本身做了个简单的demo款式

var clipArea = new PhotoClip("#clipArea", {
    size: [300300], //裁剪框大年夜小
    outputSize: [00], //翻开图片大年夜小,[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格局提交给后台处理
    }
});

文件目次构造

  • css
    • ┝ aui-iconfont.ttf
    • ┝ aui.css
    • ┝ icons_mobiscroll.eot
    • ┝ icons_mobiscroll.svg
    • ┝ icons_mobiscroll.ttf
    • ┝ icons_mobiscroll.woff
    • ┝ intial.css
  • img
    • ┝ headbig.png
  • ┝ index.html
  • js
    • camera.js
      • ┝ hammer.min.js
      • ┝ iscroll-zoom-min.js
      • ┝ lrz.all.bundle.js
      • ┝ PhotoClip.js
    • ┝ jquery-2.1.1.min.js

相干素材 - 图片裁剪,上传

评论辩论这个素材(3)答复他人成绩或分享运居心得会嘉奖牛币

12***23  
2017年09月18日

很    棒

答复
qq***14  
2018年04月03日

好丑啊

答复
zj***ar  
2019年07月05日

没有效啊。裁剪后有效,不显示。

答复
 文明上彀,理性说话!   😉 阿里云荣幸券,戳我支付
我的牛币余额:0 已下载次数:7
所需牛币:15 开端下载

牛币获得:签到、评论、充值    » 在线充值(10牛币=1元)