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

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

基于cropper.js的图片裁剪插件 ie兼容10

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

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


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

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

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

相关插件-图像,上传

svgmap地图

svgmap实现中国地图。
  图像
 24224  164

基于HTML5 Canvas实现的图片马赛克模糊特效

基于HTML5 Canvas实现的图片马赛克模糊特效
  图像
 8377  30

可视化的交互图形库Cytoscape.js

Cytoscape.js ? 用于数据分析和可视化的交互图形库
  图像
 21781  46

canvas图片+文字合成

canvas图片+文字合成,实现照片合成效果,界面有点丑但是功能OK的。
  图像
 9786  45

讨论这个项目(21)回答他人问题或分享插件使用方法奖励jQ币

    0n1zvka 0
    2018/4/21 18:36:03
    作者您好,请问下这个图片被裁减完毕后该怎么传给后台上传数据库,我项目是基于s2sh的,谢谢
        StruggleThunder0
        2018/4/22 17:12:11
        你好,java的东西我不会。之前的评论有将哪个传递给后台。传过去了就是后台做的事了,后台的东西也不太懂。.......最后应该就是绝对路径存在服务器上,虚拟路径存在数据库里。
        0n1zvka0
        2018/4/23 22:36:11
        好的,我自己在研究一下,谢谢您的回答
    回复
    友人A 0
    2018/4/20 15:01:51
    能设置裁剪后的图片大小吗?例如 裁剪后我想获得128*128像素的头像,本人小白菜一枚,希望作者能告知,实在万分感谢啊~~~
        StruggleThunder0
        2018/4/20 21:26:02
        裁剪出来的尺寸大小 是裁剪框的大小,裁剪框的大小是按比例来的。128*128比例是 1:1 。
        如果你要获得一个固定尺寸的图片,你可以将裁剪出来后的图片重新画入一个canvas里面,设置这个canvas的宽高(128*128),再将这个canvas转成图片的形式。
        友人A0
        2018/4/23 8:41:50
        非常感谢~~!!
    回复
    wudachen123 0
    2018/4/18 15:19:06
    如何的对的上传的图片的大小做限制?以及裁剪完成后大小是多少?可以限制吗
        StruggleThunder1
        2018/4/19 10:16:31
        /**
           * 获取选择的图片储存大小 img_storage
            * 在selecImg(file)方法里面写
            * 之后再做判断
            */
        var img_storage = file.files[0].size / 1024; //这里单位是KB
        /*再裁剪后处理 里面最后*/
        var cutImg_storage = fd.get("file").size / 1024; //裁剪之后的大小 KB
    回复
    wudachen123 0
    2018/4/13 9:34:55
    裁剪完成后返回给后台的图片数据在哪里,求告知
        StruggleThunder1
        2018/4/13 11:09:20
        /*需要将dataURL转成Blob对象. 这儿在全局写个方法*/
        function dataURLtoBlob(dataURI) {
            var arr = dataURI.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = (arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {
                type: mime
            });
        }
        /*在全局new 一个 FormData()的对象*/
        var fd = new FormData();
        /*裁剪后处理里面*/
        var blob = dataURLtoBlob(base64url);
        fd.append('file', blob)
        /*最后 将fd 提交post 给后台 */
        function submitImg() {
            $.ajax({
                type: "post",
                url: url,
                data: fd,
                processData: false, // 不会将 data 参数序列化字符串
                contentType: false, // 根据表单 input 提交的数据使用其默认的 contentType
                xhrFields: {
                    withCredentials: true
                },
                success: function(data) {
                    //console.log(data)
                },
                error: function(err) {
                    console.log("上传失败");
                    console.log(fd);
                }
            });
        }
        wudachen1230
        2018/4/13 14:06:21
        好的谢啦
        恒智~吕0
        2018/4/18 14:49:03
        这种全局直接new FomeData对象会不会冲突,js全局的东西都看着不是很保险
        StruggleThunder0
        2018/4/19 10:06:16
        不会,变量名确保不要重了就行
        恒智~吕0
        2018/4/19 11:56:16
        大牛,我用了那个传数据,但是FormData()对象存不进去值,不用对象的话传到后台又会被转义,唉项目不是前后分离,各部分代码也都是不同时期的前端工程师写的,谁知道这些鬼变量会不会重名
        StruggleThunder0
        2018/4/19 14:33:02

        后台会给接口给你           url:"上传接口的地址"。
        全局变量名在当前这个里面的不要重名就行。
        你可以做个小测试:

        <script>
           var variable = "这里面是没有ajax";
           console.log(variable);
        </script>
        
        <script>
        var variable = "这里面是有ajax的";
           $("html").click(function () {
               $.ajax({
                   type: "post",
                   url: "http://www.baidu.com", //随便给个地址
                   data: variable,
                   processData: false,
                   contentType: false,
                   xhrFields: {
                       withCredentials: true
                   },
                   success: function(data) {
                       //console.log(data)
                   },
                   error: function(err) {
                       console.log(variable); //输出:   这里面是有ajax的
                   }
               });
           });
        </script>
        恒智~吕0
        2018/4/20 9:49:42
        我的微信:AA13891964141
        我的QQ:2916669400
        fd.append('file', blob)
        fd对象没有值
        StruggleThunder1
        2018/4/20 18:01:49
        console.log(fd.append('file',blob)); //这样是找不到的

        你想看里面的值 你可以这么打印,这样就能看到file里面的一些数据了

        console.log(fd.get("file"));

        提交给后台只需要提交  fd 就行了
        --------------------------------
        已经加你QQ了

    回复
    德仁darin 0
    2018/3/27 20:23:00
    元大明 0
    2018/3/26 11:14:05
    这个插件不错,直接兼容了 回复
    Yoke 0
    2018/3/5 19:52:48
    361258177 0
    2018/2/25 12:13:35
    前排收藏,感谢作者
    回复
取消回复