美文网首页
cropper.js 裁剪图片并上传

cropper.js 裁剪图片并上传

作者: 淡淡紫色 | 来源:发表于2020-07-16 17:09 被阅读0次

    引入+使用

    <link  href="/path/to/cropper.css" rel="stylesheet">
    <script src="/path/to/cropper.js"></script>
    

    HTML结构

    <!-- 用一个块元素(容器)包装图像或画布元素 -->
    <div class="box">
      <img id="image" src="picture.jpg">
    </div>
    

    官网上的是以下面的一段代码进行引入的

       var cropper = new Cropper(image, {
            aspectRatio: 16 / 9,
            viewMode:1,
            crop: function (e) {
                console.log(e.detail.x);
                console.log(e.detail.y);
                console.log(e.detail.width);
                console.log(e.detail.height);
                console.log(e.detail.rotate);
                console.log(e.detail.scaleX);
                console.log(e.detail.scaleY);
            }
        });
    

    这里有个问题如果使用本地的cropper.js和cropper.css;就会报错(绝对的版本号的问题v1.x版本),而使用cdn方法报错就可以解除;
    cdn的链接;如果使用本地的文件(v3.x版本)则写法变为

    $('#image').cropper({
            aspectRatio: 16 / 9,
            viewMode:1,
            crop: function (e) {
                console.log(e);
            }
        });
    

    一个简单的demo就出现了;效果图


    20171213154615081.png

    参数options

    1.viewMode—定义cropper的视图模式

    类型:number;默认:0;可以使用0,1,2,3;
    
    20171213161043763.png
    0:没有限制,3可以移动到2外。
    1 : 3只能在2内移动。
    2:2图片 不全部铺满1 (即缩小时可以有一边出现空隙)
    3:2图片填充整个1
    

    2.dragMode —-定义cropper的拖拽模式。

    类型: String
    默认: ‘crop’
    选项:
    ‘crop’: 可以产生一个新的裁剪框3
    ‘move’: 只可以移动3
    ‘none’: 什么也不处理
    

    3.aspectRatio—-裁剪框的宽高比

    类型:number;默认:NAN;
    在默认的时候。可以随意改变裁剪框的大小;我这里的设置的值为 16/9;
    

    4.data—如果您已经存储了以前的数据,那么在构建时将会自动将其传递给setData方法

    类型:object;默认:null;
    

    5.preview—-添加额外的元素(容器)以供预览

    类型:Element / String 默认:“ ”;
    注意这里是一个dom元素。必须可以被Document.querySelectorAll获取到;
    preview:".small",
    HTML结构:<div class="small"></div>;注意一定要设置small的宽高;最好和裁剪比例一致;还有如果要想正确的显示出裁剪的区域需要加上样式overflow: hidden;
    
    20171213164317298.png

    去掉overflow: hidden;效果图如下:


    20171213164452815.png

    6.responsive—在调整窗口大小的时候重新渲染cropper

    类型:Boolean 默认:true;
    

    7.restore—在调整窗口大小后恢复裁剪的区域。

    类型:Boolean 默认:true;
    

    8.checkCrossOrigin—-检查当前图像是否为跨域图像。

    类型:Boolean 默认:true;
    

    9.checkOrientation—-检查当前图像的Exif定向信息。

    类型:Boolean 默认:true;
    好像是移动端选择发生旋转变化的时候,触发的事件。
    

    10.modal—显示图片上方的黑色模态并在裁剪框下面。

    类型:Boolean 默认:true;
    改成false效果图为:
    
    20171213170629395.png

    11.guides—显示在裁剪框上方的虚线。

    类型:Boolean 默认:true;
    改成false效果图为:
    
    20171213171522726.png

    12.center—裁剪框在图片正中心。

    类型:Boolean 默认:true;
    

    13.highlight–在裁剪框上方显示白色的区域(突出裁剪框)。

    类型:Boolean 默认:true;
    
    1. background–显示容器的网格背景。(就是后面的马赛克)
    类型:Boolean 默认:true;
    
    1. autoCrop–当初始化时,可以自动生成图像。(就是自动显示裁剪框,改成false裁剪框自动消失)
    类型:Boolean 默认:true;
    改成false效果图为:
    
    20171213172910219.png

    16.autoCropArea–定义自动裁剪面积大小(百分比)和图片进行对比。

    类型:number 默认:0.8;
    就是裁剪框显示的大小
    
    1. movable–是否允许可以移动后面的图片
    类型:Boolean 默认:true;
    
    1. rotatable–是否允许旋转图像。
    类型:Boolean 默认:true;
    

    19.scalable–是否允许缩放图像。

    类型:Boolean 默认:true;
    

    20.zoomable–是否允许放大图像。

    类型:Boolean 默认:true;
    

    21.zoomOnTouch–是否可以通过拖动触摸来放大图像。

    类型:Boolean 默认:true;
    

    22.zoomOnWheel–是否可以通过移动鼠标来放大图像。

    类型:Boolean 默认:true;
    

    23.wheelZoomRatio–用鼠标移动图像时,定义缩放比例。

    类型:Number 默认:0.1;
    

    24.cropBoxMovable—是否通过拖拽来移动剪裁框。

    类型:Boolean 默认:true;
    改成false效果图为:剪裁框不可以拖动。
    
    1. cropBoxResizable—是否通过拖动来调整剪裁框的大小。
    类型:Boolean 默认:true;
    改成false效果图为:剪裁框不可以调整大小。
    

    26.toggleDragModeOnDblclick—当点击两次时可以在“crop”和“move”之间切换拖拽模式,

    类型:Boolean 默认:true;
    

    27.minContainerWidth—容器的最小宽度。

    类型:Number 默认:200;
    

    28.minContainerHeight—容器的最小高度。

    类型:Number 默认:100;
    

    29.minCanvasWidth—canvas的最小宽度

    类型:Number 默认:0;
    

    30.minCanvasHeight—canvas的最小高度。

    类型:Number 默认:0;
    

    31.minCropBoxWidth—裁剪层的最小宽度。

    类型:Number 默认:0;
    

    32.minCropBoxHeight—裁剪层的最小高度。

    类型:Number 默认:0;
    

    33.ready—插件准备完成执行的函数(只执行一次)。

    类型:Function 默认:null;
    

    34.cropstart—剪裁框开始移动执行的函数。

    类型:Function 默认:null;
    

    35.cropmove—剪裁框移动时执行的函数。

    类型:Function 默认:null;
    

    36.cropend—剪裁框移动结束执行的函数。

    类型:Function 默认:null;
    

    37.crop—剪裁框发生变化执行的函数。

    类型:Function 默认:null;
    

    38.zoom—剪裁框缩放的时候执行的函数。

    类型:Function 默认:null;
    
    $('#image').cropper({
            aspectRatio: 16 / 9,
            viewMode:1,
            dragMode:'none',
            preview:".small",
            responsive:false,
            restore:false,
    //        modal:false,
    //        guides:false,
    //        background:false,
    //        autoCrop:false,
    //        autoCropArea:0.1,
    //        movable:false,
    //        scalable:false,
    //        zoomable:false,
    //        wheelZoomRatio:false,
    //        cropBoxMovable:false,
    //        cropBoxResizable:false,
            ready:function () {
                console.log("ready");
            },
            cropstart: function (e) {
                console.log("cropstart");
            },
            cropmove: function (e) {
                console.log("cropmove");
            },
            cropend: function (e) {
                console.log("cropend");
            },
            crop: function (e) {
                console.log("crop");
            },
            zoom: function (e) {
                console.log("zoom");
            },
        });
    
    20171213200938933.png

    Methods 方法

    使用方法示例:
    
    $().cropper({
      ready: function () {
        $().cropper('method', argument1, , argument2, ..., argumentN);
      }
    });
    

    1.crop() 手动显示裁剪框

    $("#image").cropper({
      autoCrop: false, //关闭自动显示裁剪框
      ready: function () {
        $(this).cropper('crop');
      }
    });
    

    2.reset()—-将图像和裁剪框重置为初始状态

    <button id="reset">reset</button>
    //-----------------------------
    $("#reset").on("click", function () {
            $('#image').cropper('reset');
       })
    

    3.clear()—清除裁切框

    $("#clear").on("click", function () {
            $('#image').cropper('clear');
        })
    

    4.replace(url[, onlyColorChanged])—替换图像的src并重新构建cropper

    url :–类型String;—新图片的url;
    onlyColorChanged (optional):–类型:Boolean默认:false;—-如果只是改变颜色,而不是大小,那么cropper只需要改变所有相关图像的src,不需要重新构建cropper。这可以用于应用过滤器。(意思是:改成true,图像的比例会发生变化自适应父盒子的大小;会失真的)
    
    $("#replace").on("click", function () {
            $('#image').cropper('replace',"./images/111.jpeg",true );
        })
    
    20171214101057326.png 20171214101113850.png

    5.enable()—解锁,锁定的裁切框(与disable相对应)

    $("#enable").on("click", function () {
            $('#image').cropper('enable');
        })
    

    6.disable()—锁定的裁切框(裁切框不可移动)(与enable相对应)

    $("#disable").on("click", function () {
            $('#image').cropper('disable');
        })
    

    7.destroy()—销毁cropper并从图像中删除整个cropper。

    $("#destroy").on("click", function () {
            $('#image').cropper('destroy');
        })
    

    8.move(offsetX[, offsetY])—使用相对偏移量移动图像(裁切框不移动)。

    offsetX–类型:Number;在水平方向上移动(px)
    offsetY –类型:Number;在垂直方向上移动(px);如果不存在,其值和offsetX相同;
    
        $("#move1").on("click", function () {
            $('#image').cropper('move', 1, 0);
        })
        $("#move2").on("click", function () {
            $('#image').cropper('move', 0, -1);
        })
    

    9.moveTo(x[, y])—-将画布(图像包装器)移动到一个绝对点

    X–类型:Number;画布canvas距离left的值;
    Y –类型:Number;画布canvas距离top的值;如果不存在,其值和X相同;
    

    10.zoom(ratio)—放大图片,并使用相对比例。(裁切框不变化)

    $('#image').cropper('zoom', 0.1);
    $('#image').cropper('zoom', -0.1);
    

    11.zoomTo(ratio)—-将画布(图像包装器)放大到一个绝对比例

    ratio:类型Number—要放大的比例
    
    $('#image').cropper('zoomTo', 1); // 1:1 (canvasData.width === canvasData.naturalWidth)
    

    12.rotate(degree)—旋转图像以一定的角度

    degree—类型: Number
    向右旋转 (degree > 0);向左旋转 (degree < 0);
    
    $('#image').cropper('rotate', 90);
    $('#image').cropper('rotate', -90);
    

    13.rotateTo(degree)—旋转图像到固定的角度

    degree—类型: Number
    
    1. scale(scaleX[, scaleY])—-翻转图像
    scaleX–类型:Number;水平方向翻转;默认为 1
    scaleY–类型:Number;垂直方向翻转;如果不存在,其值和scaleX相同;
    
    $('#image').cropper('scale', -1); // 水平、垂直方向翻转
    $('#image').cropper('scale', -1, 1); // 水平方向翻转
    $('#image').cropper('scale', 1, -1); // 垂直方向翻转
    

    15.scaleX(scaleX)—-缩放图像的横坐标。

    类型:Number;水平方向翻转;默认为 1
    

    16.scaleY(scaleY)—-缩放图像的纵坐标

    类型:Number;垂直方向翻转;默认为 1
    
    $('#image').cropper('scaleX', 1); 
    

    17.getData([rounded])—-输出最终裁剪的区域位置和大小数据(根据原始图像的自然大小

    rounded 类型:Boolean 默认:false;设置true可以获取其所有数据;
    返回的数据类型:Object;
    - x裁切框距离左边的距离
    - y裁切框距离顶部的距离
    - width裁切框的宽度
    - height裁切框的高度
    - rotate裁切框的旋转的角度
    - scaleX缩放图像的横坐标
    - scaleY缩放图像的纵坐标
    
    20171214111128948.jpg
    $("#getData").on("click", function () {
            console.log($('#image').cropper('getData', true));;
        })
    
    20171214111053762.png
    1. setData(data)—用新数据改变裁切区域的位置和大小(以原始图像为基础)。
    data–类型:Object;
    
     $("#setData").on("click", function () {
            $('#image').cropper('setData',{width:200,height:100});
        })
    
    1. getContainerData()—输出container 容器大小数据。
    返回的数据类型:Object;
    
    width当前容器的宽
    height当前容器的高
    
    20171214112220807.jpg
    $("#getContainerData").on("click", function () {
            console.log($('#image').cropper('getContainerData', ));;
        })
    
    20171214112042918.png

    20.getImageData()—-输出图像image位置、大小和其他相关数据。

    返回的数据类型:Object;
    - leftimage距离左边的距离
    - topimage距离顶部的距离
    - widthimage的宽度
    - heightimage的高度
    - naturalWidth image的原始宽度
    - naturalHeight image的原始高度
    - aspectRatio image的纵横比
    - rotateimage的旋转的角度
    - scaleX缩放图像的横坐标
    - scaleY缩放图像的纵坐标
    
    $("#getImageData").on("click", function () {
            console.log($('#image').cropper('getImageData', ));;
        })
    
    20171214113013804.png

    21 . getCanvasData()—输出画布Canvas(图像包装器)位置和大小数据。

    返回的数据类型:Object;
    - leftcanvas距离左边的距离
    - topcanvas距离顶部的距离
    - widthcanvas的宽度
    - heightcanvas的高度
    - naturalWidth canvas的原始宽度
    - naturalHeight canvas的原始高度
    
    20171214113537807.png
    注意getImageData()和getCanvasData()的naturalWidth、naturalHeight的值是一样的;
    22 . setCanvasData(data)—:使用数据更改画布Canvas(图像包装器)位置和大小。
    返回的数据类型:Object;
    - leftcanvas距离左边的距离
    - topcanvas距离顶部的距离
    - widthcanvas的宽度
    - heightcanvas的高度
    
    $("#setCanvasData").on("click", function () {
            $('#image').cropper('setCanvasData',{width:200,height:100});
        })
    
    

    23 .getCropBoxData()—输出剪切框的位置和大小数据。

    返回的数据类型:Object;
    - left剪切框距离左边的距离
    - top剪切框距离顶部的距离
    - width剪切框的宽度
    - height剪切框的高度
    
    $("#getCropBoxData").on("click", function () {
            console.log($('#image').cropper('getCropBoxData'));;
        })
    
    20171214123613452.png

    24 . setCropBoxData(data)—–改变剪切框的位置和大小数据

    data的数据类型:Object;
    - left剪切框距离左边的距离
    - top剪切框距离顶部的距离
    - width剪切框的宽度
    - height剪切框的高度
    
    $("#setCropBoxData").on("click", function () {
            $('#image').cropper('setCropBoxData',{width:200,height:100});
        })
    
    1. getCroppedCanvas([options])—画一张剪裁的图片。如果没有剪裁,则返回一个绘制整个im的画布
    options 类型Object
    - width输出Canvas的宽度
    - height输出Canvas的高度
    - minWidth输出Canvas的最小宽度;默认值是0
    - minHeight输出Canvas的最小高度;默认值是0
    - maxWidth输出Canvas的最大宽度;默认值是Infinity(无穷大)
    - maxHeight输出Canvas的最大高度;默认值是Infinity(无穷大)
    - fillColor在输出画布Canvas中填充任何alpha的颜色,默认值是透明的
    - imageSmoothingEnabled如果图像被设置为平滑(true,默认)或不设置(false)。
    - imageSmoothingQuality设置图像的质量,一个“low”(默认)、“medium”或“high”。
    返回值:类型:HTMLCanvasElement画布绘制出了剪裁过的图像
    注意:输出canvas画布的宽高比将自动适应剪切框的纵横比。
    如果您打算从输出画布canvas中获得一个JPEG图像,您应该首先设置填色选项,否则,JPEG图像中的透明部分将在缺少情况下变为黑色。
    为了避免获得空白的输出图像,您可能需要将maxWidth和maxHeightproperties设置为有限的数字,从而来画布元素的大小限制。
    
    $("#getCroppedCanvas").on("click", function () {
            console.log($('#image').cropper('getCroppedCanvas'));;
            var cas=$('#image').cropper('getCroppedCanvas');
            var base64url=cas.toDataURL('image/jpeg');
            cas.toBlob(function (e) {
                console.log(e);  //生成Blob的图片格式
            })
            console.log(base64url); //生成base64图片的格式
            $('.cavans').html(cas)  //在body显示出canvas元素
        })
    
    20171214141944512.png 20171214142000975.png
    $('#image').cropper('getCroppedCanvas', {
      width: 160,
      height: 90,
      minWidth: 256,
      minHeight: 256,
      maxWidth: 4096,
      maxHeight: 4096,
      fillColor: '#fff',
      imageSmoothingEnabled: false,
      imageSmoothingQuality: 'high',
    });
    
    // Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`
    $('#image').cropper('getCroppedCanvas').toBlob(function (blob) {
      var formData = new FormData();
      formData.append('croppedImage', blob);
      $.ajax('/path/to/upload', {
        method: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function () {
          console.log('Upload success');
        },
        error: function () {
          console.log('Upload error');
        }
      });
    });
    

    26 . setAspectRatio(aspectRatio)—改变裁切框的宽高比。

    aspectRatio:类型number;是一个正数
    
    $("#setAspectRatio").on("click", function () {
            $('#image').cropper('setAspectRatio',1/1);
        })
    

    27 . setDragMode([mode])—-设置拖拽模式(就是鼠标显示的是十字还是那种带箭头的十字)

    mode 类型String ;取值:none、crop、move;默认是none
    

    Events 事件

    ready—当一个cropper实例完全构建时,这个事件就会发生。
    cropstart—当画布(图像包装器)或剪切框开始发生变化时,该事件就会发生。

    返回的参数有event.originalEvent:;类型event;参数: mousedown, touchstart 和 pointerdown ;即触发的事件源
    event.action::发生事件的行为(移动的方向)
    
    crop:创建一个剪切框的时候
    move:移动图片的时
    zoom:放大缩小canvas的时候
    e:调整剪切框东侧的大小
    w:调整剪切框西侧的大小
    s:调整剪切框南侧的大小
    n:调整剪切框北侧的大小
    se:东南
    sw:西南
    ne:东北
    nw:西北
    all:所有方向
    
    $('#image').on('cropstart', function (e) {
      console.log(e.type); // cropstart
      console.log(e.namespace); // cropper
      console.log(e.action); // ...
      console.log(e.originalEvent.pageX);
    
      // Prevent to start cropping, moving, etc if necessary
      if (e.action === 'crop') {
        e.preventDefault();
      }
    });
    

    cropmove—当画布(图像包装器)或剪切框正在发生变化时,该事件就会发生;

    返回的参数有event.originalEvent:;类型event;参数: mousemove, touchmove 和 pointermove ;即触发的事件源
    event.action::发生事件的行为(移动的方向) 和 cropstart的相同
    

    cropend—当画布(图像包装器)或剪切框正在发生变化结束时,该事件就会发生;

    返回的参数有event.originalEvent:;类型event;参数: mouseup, touchend、pointerup 、pointercancel和 touchcancel ;即触发的事件源
    event.action::发生事件的行为(移动的方向) 和 cropstart的相同
    

    crop—当画布(图像包装器)或农作物盒发生改变时,该事件就会发生。

    event.x
    event.y
    event.width
    event.height
    event.rotate
    event.scaleX
    event.scaleY
    这些参数的含义去参照getData;
    

    zoom—当一个cropper实例开始放大或缩小画布(图像包装器)时,这个事件就会发生

    返回的参数有
    event.originalEvent:;类型event;参数: wheel, touchmove ;即触发的事件源
    event.oldRatio:类型number;当前canvas的裁切比例
    event.ratio:类型number;新的canvas的裁切比例(canvasData.width / canvasData.naturalWidth)
    
    $().on('zoom', function (e) {
    
      // Zoom in
      if (e.ratio > e.oldRatio) {
    
        // Prevent zoom in
        e.preventDefault();
      }
    
      // Zoom out
      // ...
    });
    

    Npm组件地址:https://www.npmjs.com/package/virsical-cropper

    引自:官网http://fengyuanchen.github.io/cropper/
    文档https://github.com/fengyuanchen/cropper/blob/master/README.md –v3.x版本

    相关文章

      网友评论

          本文标题:cropper.js 裁剪图片并上传

          本文链接:https://www.haomeiwen.com/subject/hwtmhktx.html