基于cropper.js的图片裁剪插件

所属分类:媒体,输入-图像,上传

 43952  262  查看评论 (68)
分享到微信朋友圈
X
基于cropper.js的图片裁剪插件 ie兼容10

更新时间:2018/2/25 下午1:07:06

更新说明:裁剪框居中问题,由于低版本号的浏览器有些css属性不支持,用js来裁剪框水平垂直居中


1、引入相关的css和js文件。

2、相关js代码都在页面上,根据自己要求修改。

3、cropper.js的参数请参考相关文档。

相关插件-图像,上传

jquery.photoClip图片裁剪添加旋转 缩放按钮功能

项目上用的jquery.photoClip 插件,为了更好的用户体验 需要添加 旋转 缩放按钮功能,所以在原有的基础上添加了点功能,希望能帮助各位,写的不好 海涵!
  图像
 15045  153

SVG图像生成插件triangloid

triangloid是一个JavaScript库,可以将图像生成为多边形图像并输出成SVG格式。它是基于trianglify
  图像
 21095  180

二维码生成插件qrcode.js

二维码生成插件qrcode.js,在此插件基础上添加了logo图片功能和对中文的支持,无需对中文转码可直接支持生成中文网址二维码
  图像
 12705  187

jQueryphotoClip图片剪裁插件

jQueryphotoClip是一款支持移动设备触摸手势的图片裁剪jQuery插件。
  图像
 64009  252

讨论这个项目(68)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    It's you. 0
    2019/11/28 14:31:10
    裁剪框的大小怎么设置固定框亚?
    回复
    It's you. 0
    2019/11/28 13:50:51
    裁剪区域的大小可以设置为固定值吗?
        StruggleThunder1
        2019/11/29 9:30:21

        cropper.js这个插件好像只能设置宽高比

         //cropper图片裁剪
         $('#tailoringImg').cropper({
             aspectRatio: 1 / 1, //默认比例
             preview: '.previewImg', //预览视图
             guides: false, //裁剪框的虚线(九宫格)
             autoCropArea: 0.5, //0-1之间的数值,定义自动剪裁区域的大小,默认0.8
             movable: false, //是否允许移动图片
             dragCrop: true, //是否允许移除当前的剪裁框,并通过拖动来新建一个剪裁框区域
             movable: true, //是否允许移动剪裁框
             resizable: true, //是否允许改变裁剪框的大小
             zoomable: false, //是否允许缩放图片大小
             mouseWheelZoom: false, //是否允许通过鼠标滚轮来缩放图片
             touchDragZoom: true, //是否允许通过触摸移动来缩放图片
             rotatable: true, //是否允许旋转图片
             crop: function(e) {
                 // 输出结果数据裁剪图像。
             }
         });
    回复
    ●╉мe 0
    2019/8/19 10:32:56
    雨の中で?? 0
    2019/7/25 17:16:04
    前面问错了,问题是:我是通过form.submit提交表单的,怎么将裁剪后的图片路径赋给<input type=file>,不然提交表单会出错
        帅不来呆呆0
        2019/10/11 16:45:37
        我也遇到这个问题了,不知道您是怎么解决的?
    回复
    雨の中で?? 0
    2019/7/25 16:34:01
    你好,我想问下,如果我想得到 C:\fakepath\i31_登录.jpg 这样的路径,应该怎么做呢,对php不怎么熟,原始程序上传图片后是这个值然后可以正常提交,但我改成你这个之后报错了 回复
    勿忘初心 0
    2019/6/20 16:44:12
    可以将裁剪出来后的图片重新画入一个canvas里面,设置这个canvas的宽高(宽高就是你要的图片尺寸大小)。再将这个canvas转成图片
        残城.碎梦0
        2019/8/9 16:44:00
        大佬,能不能给个demo
    回复
    狼行天下 0
    2019/4/28 10:16:55
    请问怎么设置裁剪后图片的大小?
        StruggleThunder1
        2019/4/30 9:25:34
        可以将裁剪出来后的图片重新画入一个canvas里面,设置这个canvas的宽高(宽高就是你要的图片尺寸大小)。再将这个canvas转成图片
        狼行天下0
        2019/5/24 9:17:19
        好的。那这个插件能实现放大和缩小功能吗?
        StruggleThunder0
        2019/5/24 17:13:51
        能。 https://fengyuanchen.github.io/cropperjs/
    回复
    ?ζ?╊??___? 0
    2019/3/15 9:43:56
    在移动端怎么这么多bug呀,上传的图片超出规定的框,裁剪框的比例不管用,那些设定也有好多不管用 回复
    Sunny灬MVC 0
    2018/11/5 15:36:01
    jQuery 最低支持到那个版本?我引用的1.10.2版本的,报错。
        StruggleThunder0
        2018/11/16 13:32:22
        Jquery 2.x

        yue9090
        2019/5/30 17:51:32
        求问怎么把裁剪框设置成自由比例裁剪,而不是1:1
        xmage0
        2019/6/13 15:14:27
        注释掉1/1默认比例
    回复
    a592909057 0
    2018/9/25 16:00:00
    大佬我想知道如果要把截取框改成圆形要怎么操作?刚自学前端不怎么会改... 回复
取消回复