cropperjs的简单使用

Posted 2023-03-29 无知的小菜鸡

前言

最近发现了cropperjs，可以用于裁剪图片，特点来踩一下坑。

官方文档

参考文章：

cropper.js 裁剪图片并上传（文档翻译+demo）

1小时搞定cropper.js制作头像/图片上传、裁剪、并发送至后端

可以仿gitee的头像上传

下面的例子基于vue

基本使用

安装

npm install cropperjs

语法

new Cropper(element[, options])

element：元素，htmlImageElement 或 HTMLCanvasElement
options：配置项，可选

官方例子

<img src="./aa.png" alt="图片" class="image" ref="imgRef" />
<el-button type="primary" @click="cropImage">裁剪</el-button>

cropImage() 
    const cropper = new Cropper(this.$refs.imgRef, 
        // 宽高比
        aspectRatio: 16 / 9,
        crop(event) 
            // console.log(event.detail.x);
            // console.log(event.detail.y);
            // console.log(event.detail.width);
            // console.log(event.detail.height);
            // console.log(event.detail.rotate);
            // console.log(event.detail.scaleX);
            // console.log(event.detail.scaleY);
        
    );
    console.log(cropper);

有两点比较重要：
1、给图片添加这两个属性，官方文档说了很重要

/* Ensure the size of the image fit the container perfectly */
img 
  display: block;

  /* This rule is very important, please don't ignore this */
  max-width: 100%;

2、要导入样式，不然不会生效，像下面这样

import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';

常用属性

以下内容来自上面的这篇文章：cropper.js 裁剪图片并上传（文档翻译+demo） ，文章写的很详细

viewMode：定义cropper的视图模式

dragMode：定义cropper的拖拽模式

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

aspectRatio：裁剪框的宽高比

值为1时，是一个圆形。

preview：添加额外的元素(容器)以供预览

文章作者给踩坑了
这里是一个dom元素。必须可以被Document.querySelectorAll获取到；
preview:“.small”,
HTML结构：<div class=“small”>；注意一定要设置small的宽高；最好和裁剪比例一致；还有如果要想正确的显示出裁剪的区域需要加上样式overflow: hidden;

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

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

background：显示容器的网格背景
默认true，显示马赛克背景，false时显示灰色背景色

rotatable：是否允许旋转图像。
默认true，允许旋转

scalable：是否允许缩放图像。
默认true，允许缩放

zoomable：是否允许放大图像。。
默认true，允许放大

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

zoomOnTouch：是否可以通过拖动触摸来放大图像。
默认true，可以

cropBoxMovable：是否通过拖拽来移动剪裁框。
默认：true，裁剪框可以拖拽

cropBoxResizable：是否通过拖动来调整剪裁框的大小。
默认true，可以调整裁剪框大小

ready：插件准备完成执行的函数（只执行一次）。
默认null
例如：

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

cropstart：剪裁框开始移动执行的函数。
默认null

cropmove：剪裁框移动时执行的函数。
默认null

cropend：剪裁框移动结束执行的函数。
默认null

crop—剪裁框发生变化执行的函数。
默认：null

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

方法

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

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

this.cropper = cropper;
this.cropper.reset();

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

clear()：清除裁切框

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

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

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

 this.cropper.zoom(1.5);

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

rotate(degree)：旋转图像以一定的角度
向右旋转 (degree > 0)；向左旋转 (degree < 0)；

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

rounded 类型：Boolean 默认：false；设置true可以获取其所有数据；
返回的数据类型：Object；

• x裁切框距离左边的距离
• y裁切框距离顶部的距离
• width裁切框的宽度
• height裁切框的高度
• rotate裁切框的旋转的角度
• scaleX缩放图像的横坐标
• scaleY缩放图像的纵坐标

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元素
    )

自己改成vue的语法就好

Demo

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

基于cropperjs和vue3的头像上传组件