素材牛VIP会员

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

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

 浏览:2511次  评论:4次  更新时间:2017-09-18
牛币素材VIP可免积分下载
基于PhotoClip移动端上传图片裁剪兼容IE11
积分说明:注册即送10牛币,每日签到可获得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

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

讨论这个素材(4)回答他人问题或分享使用心得会奖励牛币

12***23  
2017年09月18日

很    棒

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

好丑啊

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

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

回复
qq***17  
2021年03月30日

不错的特效

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:15 开始下载

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