华为云开发者空间

；注意一定要设置small的宽高；最好和裁剪比例一致；还有如果要想正确的显示出裁剪的区域需要加上样式: ;

按照上面简单试了一下，效果如图：

<div class="image-view"></div>
.image-view{
   width: 190px;
   height: 160px;
   //overflow很重要
   overflow: hidden;
}

：显示容器的网格背景

默认true，显示马赛克背景，false时显示灰色背景色

：是否允许旋转图像。

默认true，允许旋转

：是否允许缩放图像。

默认true，允许缩放

：是否允许放大图像。。

默认true，允许放大

和 都试了一下，设为false还是可以通过鼠标滑轮缩放图片。但是设为false时，滑轮将不能再缩放图片

：是否可以通过拖动触摸来放大图像。

默认true，可以

：是否通过拖拽来移动剪裁框。

默认：true，裁剪框可以拖拽

：是否通过拖动来调整剪裁框的大小。

默认true，可以调整裁剪框大小

ready：插件准备完成执行的函数（只执行一次）。

默认null

例如：

ready: (event) => {
     console.log('准备完成：',event);
 },

：剪裁框开始移动执行的函数。

默认null

：剪裁框移动时执行的函数。

默认null

：剪裁框移动结束执行的函数。

默认null

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

默认：null

zoom：剪裁框缩放的时候执行的函数。

默认：null

方法

reset()：将图像和裁剪框重置为初始状态

const cropper = new Cropper(this.$refs.imgRef, {
    // 宽高比
    aspectRatio: 16 / 9,
    viewMode: 1,
});
this.cropper = cropper;
this.cropper.reset();

通过生成的对象来调用相应的方法。

clear()：清除裁切框

(url,true])：替换图像的src并重新构建

()：销毁并从图像中删除整个。

zoom(ratio)：缩放图片，并使用相对比例。（裁切框不变化）

 this.cropper.zoom(1.5);

注：1、会在上一次图片的大小上放大或缩小 2、如果设置未false，该函数将不起作用

()：旋转图像以一定的角度

向右旋转 ( > 0)；向左旋转 ( < 0)；

([])：输出最终裁剪的区域位置和大小数据(根据原始图像的自然大小

类型： 默认：false；设置true可以获取其所有数据；

返回的数据类型：；

([])—画一张剪裁的图片。如果没有剪裁，则返回一个绘制整个im的画布（很有用）

类型

$("#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元素
    })

自己改成vue的语法就好

Demo

简单写了一个头像上传的组件，感兴趣的可以看一下：

基于和vue3的头像上传组件

图片裁剪参数设置