从零开始做一个图片裁剪组件

13,262 阅读12分钟

零、 介绍

本篇文章主要介绍如何从零开始做一个完整的图片裁剪组件

本文主要包括:

  1. 上传读取图片
  2. Canvas绘制图片
    1. 解析图片信息
    2. 预览图片
  3. 裁剪相关操作
    1. Canvas的save() 和 restore()
    2. 基本裁剪流程
    3. 裁剪框的绘制
    4. 裁剪框的移动和伸缩
    5. 旋转
  4. 输出裁剪图片
    1. 使用Canvas.toBlob() 输出图片
    2. Canvas的getImageData() 和 putImageData()
    3. 上传至CDN

背景

一个图片裁剪组件的应用场景其实比较多,相应的第三方插件也不少,但有时候会需要一些特定的功能,比如想有个特定样式的裁剪框,想批量裁剪,甚至想直接裁出定制化的尺寸等等,这时就只能手写一个裁剪组件了。

大致流程

300

一、上传读取图片

上传图片时,用onChange事件来获取该file对象,里面会包含文件的name,size,type,和修改时间等信息(只读),预览图片之前可以通过这些信息来限制上传图片的格式、类型等等。

handleChange = (e) => {
        const files = Array.from(e.target.files);
        if (!files.length) {
            // 释放上传系统存储当前值,避免相同文件不触发onchange事件
            this.imageUpload.value = null; 
            return;
        }
        // 上传规则校验(比如图片格式,图片大小限制等等
        ....
}
render() {
  return (
  	<div>
      	<input
            type="file"
            onChange={this.handleChange} // 监听上传事件
            multiple="true" // 是否批量上传
            accept="image/*" // 控制上传文件的类型,image/*表示接收所有image后缀的文件
            ref={e => {
                this.imageUpload = e;
            }}
        />
    </div>
  )
}

⚠️注意点: 使用onChange上传文件时,如果连续两次选择相同的文件,第二次会因为value还是同一个值导致onChange不会触发,所以在第一次上传完之后,需要将input的value置为空

二、Canvas绘制图片

2.1 解析图片信息

利用我们刚刚获取的file文件对象,可以解析出一些图片的关键信息,比如图片的宽、高以及最重要的base64。这里我们主要是通过FileReader.readAsDataURL来实现。

1

触发 FileReader.onload 方法时,会返回一个基于 base64 编码的 data-uri 对象。

// 读取图片原始信息方法
filesInfo = (file) => {
    return new Promise((res, rej) => {
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e) {
          	// 实例一个Image对象,为了获取宽、高(下文预览图片时需要)
          	let image = new Image(); 
            image.onload = function() {
                res({
                    width: image.width, // 宽
                  	height: image.height, // 高
                    // 其他图片信息
                  	// ...
                });
            };
            image.src = e.target.result; // base64
          	image.crossOrigin = 'Anonymous'; //解决跨域问题
        };
    });
},

其实除了上述还有第二种方式, window.URL.createObjectURL,有兴趣的小伙伴可以自行查阅一下,本文就不再做赘述了。

2.2 预览图片

canvas的宽高分为2种:

  • canvas style样式中的宽高:是整个canvas的宽高,决定了整个canvas context的大小

  • canvas元素属性的宽高:表示canvas的画布大小

因此我们的自适应图片居中策略:

300*300

⚠️关于设备像素比具体可以戳 👉 为什么canvas绘制的图很模糊❓

canvas渲染图片的主要是通过canvas.drawImage(),🔨部分实现代码如下:

// 绘制图片方法
// 这里的参数就是上文的image对象
drawImage = (image) => {
  	// 获取canvas的上下文
  	this.showImg = this.canvasRef.getContext('2d');
  	// 清除画布
  	this.showImg.clearRect(0, 0, this.canvasRef.width, this.canvasRef.height);
  	// 设置默认canvas元素大小
  	const canvasDefaultSize = 300;
    // 初始化canvas画布大小, 获取等比例缩放后的canvas宽高尺寸
  	let proportion = image.width / image.height,
      	scale = proportion > 1 ? canvasDefaultSize / image.width : canvasDefaultSize / image.height,
        canvasWidth = image.width * scale * 像素比,
        canvasHeight = image.height * scale * 像素比;
    this.canvasRef.width = canvasWidth;
    this.canvasRef.height = canvasHeight;
    this.canvasRef.style.width = canvasWidth / 像素比 + 'px';
  	this.canvasRef.style.height = canvasHeight / 像素比 + 'px';
  	// ...
    // 绘制图片,这个image就是我们刚刚获取的Image对象
  	this.image = image; // 保存这个Image对象
    this.showImg.drawImage(image, 0, 0, this.canvasRef.width, this.canvasRef.height);
};
render() {
  const canvasDefaultSize = 300; // 设置默认canvas元素大小
  return (
  	<div 
      className="modal-trim"
      // 固定整个canvas的变化范围
      style={{ width: `${canvasDefaultSize}px`, height: `${canvasDefaultSize}px` }}    
    >
      	<canvas 
          ref={e => {this.canvasRef = e}} 
          // 给予一个默认初始宽高
          width={canvasDefaultSize}
          height={canvasDefaultSize}
          // ...
       	></canvas>
    </div>
  )
}
/* 部分css */
.modal-trim {
    overflow: hidden;
    position: relative;
  	/* 马赛克背景图 */
    background-image: url(https://s10.mogucdn.com/mlcdn/c45406/190723_3afckd96l9h4fh6lcb56117cld176_503x503.jpg);
    background-size: cover;
  	/* 使canvas始终居中 */
    canvas {
        cursor: default;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
}

三、裁剪相关操作

3.1 Canvas的save() 和 restore()

(了解canvas的save()和restore()的童鞋可以直接跳过这小节)

通俗地说,save和restore是用来保存canvas状态的存储器

  • context.save()将当前状态压入堆栈。
  • context.restore() 弹出堆栈顶端的状态,将上下文恢复到该状态。

那么什么是canvas的状态呢?这里有一个容易被误解的点,状态并不是指画布的内容,而是画布的绘制属性,比如:

  • 当前的矩阵变换:平移translate(),缩放scale(),以及旋转rotate()
  • 当前的剪切区域:clip()
  • 其他属性值:strokeStylefillStylelineWidthshadowColor ...等

所以我们了解这个属性有什么作用?因为canvas的上下文只有一个,我们进行裁剪操作的时候会涉及到大量的状态变换,比如裁剪选择框的重绘,图片的旋转等,在进行这些操作的时候就需要恢复绘制属性,举个🌰:

function draw() {
   let ctx = document.getElementById("canvas").getContext("2d");
   ctx.save();  //默认设置
   ctx.fillStyle = "#09f";
   ctx.fillRect(15,15,120,120); //填充当前设置的#09f颜色
   ctx.restore();
   ctx.fillRect(30,30,90,90); //填充默认的黑色
}

上述代码绘制第一个正方形时,我们填充了蓝色,而第二个正方形没有设置颜色,所以是默认的黑色。效果如下:

300*300

但是如果将上文的save和restore注释掉,绘制的就都是蓝色的正方形了,这是因为fillStyle改变了canvas的绘制属性,如果不进行restore恢复之前的绘制属性,那之后绘制的就都是蓝色了。

⚠️注意点: save()和restore()都是成双成对的,千万不要拆散他们

3.2 基本裁剪流程

回归正题,关于图片裁剪,我们一般的操作流程是:

300*300

所以我们可以通过鼠标的**onMouseDown(点击)、onMouseMove(移动)、onMouseUp(松开)**三种事件监听,来完成一次完整的裁剪操作。🔨部分实现代码如下:

// 每张图片的初始化配置
initialConfigs = () => {
  this.showImg = this.canvasRef.getContext('2d');
  this.dragging = false; // 判断是否触发裁剪操作的全局变量
  this.startX = null;
  this.startY = null;
}

// 点击事件
mouseDownEvent = (e) => {
  	// 点击时表示触发裁剪操作
    this.dragging = true;
  	// 保存当前鼠标开始坐标, 一般坐标都会乘以个像素比
  	this.startX = e.nativeEvent.offsetX;
  	this.startY = e.nativeEvent.offsetY;
}

// 移动事件
mouseMoveEvent = (e) => {
    if (!this.dragging) return;
    // 计算临时裁剪框的宽高
    let tempWidth = e.nativeEvent.offsetX - this.startX,
        tempHeight = e.nativeEvent.offsetY - this.startY;
    // 调用绘制裁剪框的方法
  	this.drawTrim(this.startX, this.startY, tempWidth, tempHeight, this.showImg)
}

// 移出/松开事件
mouseRemoveEvent = (e) => {
  	// 保存相关裁剪选择框信息
    if (this.dragging) { ... }
    // 保存后将其置为false,表示结束当前流程
    this.dragging = false;
}
render() {
  return (
  	// ...
      	<canvas 
          ref={e => {this.canvasRef = e}}
          onMouseDown={(e) => this.mouseDownEvent(e)}
          onMouseMove={(e) => this.mouseMoveEvent(e)}
          onMouseUp={(e) => this.mouseRemoveEvent(e)}
        ></canvas>
   // ...
  )
}

3.3 裁剪框的绘制

关于裁剪框的绘制实现,业界里比较常用的方式大概是介个样子:

300*300

如何将这几层图像按照需求正确叠在一起呢❓

这里就需要用到canvas.globalCompositeOperation这个API了,它设置或返回新图像如何绘制到已有的图像上,来合并图片实现裁剪框。关于它绘制的具体参数可以戳 👉 globalCompositeOperation详解 或者 MDN

利用我们需要刚刚传过来的鼠标坐标参数,我们来绘制裁剪框以及8个边框像素点,记得一定要保存每次操作的相关信息~ 🔨部分实现代码如下:

// 每张图片的初始化配置
initialConfigs = () => {
  // ...
  // 需要保存的坐标信息
  this.trimPosition = { 
    startX: null,
    startY: null,
    width: null,
    height: null
  };	// 裁剪框坐标信息
  this.borderArr = []; // 裁剪框边框节点坐标
  this.borderOption = null; // 裁剪框边框节点事件
}

// 绘制裁剪框方法
drawTrim = (startX, startY, width, height, ctx) => {
    // 每一帧都需要清除画布
    ctx.clearRect(0, 0, this.canvasRef.width, this.canvasRef.height);
  
    // 绘制蒙层
    ctx.save();
    ctx.fillStyle = 'rgba(0,0,0,0.6)'; // 蒙层颜色
    ctx.fillRect(0, 0, this.canvasRef.width, this.canvasRef.height);
  
    // 将蒙层凿开
    ctx.globalCompositeOperation = 'source-atop';
    ctx.clearRect(startX, startY, width, height); // 裁剪选择框
  
  	// 绘制8个边框像素点并保存坐标信息以及事件参数
    ctx.globalCompositeOperation = 'source-over';
  	ctx.fillStyle = '#fc178f';
    let size = 10; // 自定义像素点大小
  	ctx.fillRect(startX - size / 2, startY - size / 2, size, size);
  	// ...同理通过ctx.fillRect再画出8个像素点
    ctx.restore();
  
    // 再次使用drawImage将图片绘制到蒙层下方
    ctx.save();
    ctx.globalCompositeOperation = 'destination-over';
   	ctx.drawImage(this.image, 0, 0, this.canvasRef.width, this.canvasRef.height);
    // ...
    ctx.restore();
}

3.4 裁剪框的移动和伸缩

光实现了裁剪选择框还不够,我们平时的裁剪步骤还需要移动以及自由拉伸,怎么实现呢❓

我们上文已经通过drawTrim()这个方法绘制出了初次的裁剪框,而我们裁剪框的每次移动、伸缩,修改的只是裁剪框移动、伸缩之后的坐标信息,也就是说都可以通过drawTrim()这个方法来重绘。

所以我们这里需要修改一下上文的基本裁剪流程:

300*300

🔥小贴士:这里可以使用canvas.isPointInPath()来判断鼠标是否移入了8个像素点的区域

主要还是依靠我们上文保存的裁剪框的坐标以及8个像素点坐标信息,来判断当前需要执行的事件。

类似的,如果我们需要有定向修改裁剪框大小、直接裁出需求的最优尺寸等定制化的功能,思路也是一样的,都是通过一些计算来获取裁剪框最终坐标信息,再去用上文的drawTrim()这个方法来重绘出一个裁剪框。

3.5 旋转

裁剪组件中最坑的点就是这个旋转坐标🔨,我们先了解一下canvas.rotate()

众所周知,canvas的初始画布的坐标轴原点在左上角,也就是说(0,0)代表了左上角的那个点,基于左上角往右 X 为正,往下 Y 为正,反之为负。

而canvas中的rotate方法就是绕画布左上角(0,0)进行旋转的,而且坐标轴也会旋转,并且会受到translate的影响,也就是说我们如果通过rotate方法顺时针旋转90度,图片在画布中的相对位置是会改变的,坐标轴也会从“右 X 为正,下 Y 为正”变成“下 X 为正,左 Y 为正”。

300*300

所以我们该如何实现图片以自身为中心旋转呢❓

这个时候就得提一下canvas.translate()了,顾名思义,就是用来平移画布坐标轴原点的方法。每次旋转之后再将坐标轴平移回原来的位置是不是就可以了?

重新理一下思路,如果我们需要实现图片以自身为中心旋转45度:

  1. 将canvas的坐标轴原点平移到这张图的中心
  2. 旋转canvas 45度
  3. 绘制图片时再将图片往右上角平移图片自身一半的距离
300*300

⚠️注意点:记得每次旋转完之后还需要用上文提到的save和rotate恢复到之前的绘制属性状态,由于涉及到的代码还是坐标的计算与转换,这里只介绍一下旋转图片的大致思路,想具体了解可以戳 👉 canvas旋转详解

四、输出裁剪图片

4.1 使用Canvas.toBlob() 输出图片

我们在上传图片时,将file文件转成了base64,再利用canvas.drawImage()来实现的图片预览,那么我们裁剪完之后如何将canvas转回img图片呢❓

其实canvas提供了两个2D转换为图片的方法:

  • canvas.toDataURL()

  • canvas.toBlob()

由于我们最终的目的是上传至CDN,所以这里选择canvas.toBlob()这个方法:

// 获得裁剪后的图片文件
getImgTrim = (type) => {
  	this.canvasRef.toBlob((blob)=>{
        // 加个时间戳缓存
        blob.lastModifiedDate = new Date();
      	let fd = new FormData();
      	fd.append('image', blob);
      	// 图片上传cdn
      	// ...
    }, type)
}

❓:如果我需要转成的是file对象怎么办

const file = new File([blob], '图片.jpg', { type: blob.type })

4.2 Canvas的getImageData() 和 putImageData()

我们先来看看MDN上是如何解释的:

  • CanvasRenderingContext2D.getImageData() 返回一个ImageData对象,用来描述canvas区域隐含的像素数据,这个区域通过矩形表示,起始点为*(sx, sy)、宽为sw、高为sh*
  • CanvasRenderingContext2D.putImageData() 是 Canvas 2D API 将数据从已有的 ImageData 对象绘制到位图的方法。 如果提供了一个绘制过的矩形,则只绘制该矩形的像素。此方法不受画布转换矩阵的影响。

通俗的说,getImageData()是用来获取canvas画布区域的像素数据,并返回一个ImageData对象的,而putImageData()则是将ImageData对象的像素数据放回canvas画布中。

所以我们为什么需要了解这两个api呢?直接canvas.toBlob()输出图片不就行了❓

因为canvas.toBlob()输出的是canvas整个画布元素,而不是我们所裁剪的部分,所以我们需要新构建一个canvas画布来实现:

300*300
// 获得裁剪后的图片文件
getImgTrim = (type) => {
  	// 重新构建一个canvas
  	this.saveImg = this.saveCanvasRef.getContext('2d');
  	this.saveImg.clearRect(0, 0, this.saveCanvasRef.width, this.saveCanvasRef.height);
  	// 裁剪框的像素数据
  	let { startX, startY, width, height } = this.trimPosition
  	const data = this.canvasRef.getImageData(startX, startY, width, height)
    // 输出在另一个canvas上
    this.saveImg.putImageData(data, 0, 0)
  	this.saveCanvasRef.toBlob((blob)=>{
        // ...
    }, type)
}

❓:为什么我输出的图片整体变大/变小了

虽然我们将裁剪框中的图片部分截取到第二个canvas上了,但我们canvas本身的宽高是经过计算后的(在预览图片那一段中),和图片本身的宽高是不一致的,就导致了输出的图片整体变大/变小。

解决办法:我这里是新建了第三个canvas画布作为承接,思路如下:

300*300

4.3 上传至CDN

既然要做一个通用型组件,最好就是要统一成同一个出口,所以我们这里选择上传至CDN,统一输出为图片链接

// 获得裁剪后的图片文件
getImgTrim = (cdnUrl, type) => {
  	// 重新构建一个canvas并输出
  	// ...
  	this.saveCanvasRef.toBlob((blob)=>{
        // 加个时间戳缓存
        blob.lastModifiedDate = new Date();
      	let fd = new FormData();
      	fd.append('image', blob);
      	// 创建 XMLHttpRequest 提交对象
      	let xhr = new XMLHttpRequest();
      	xhr.onreadystatechange = function () {
          	if (this.readyState === 4 && this.status === 200) {
              	// ...
            }
        }
      	// 开始上传
        xhr.withCredentials = true; // 跨域传cookie的时候有用
        xhr.open("POST", cdnUrl, true);
        xhr.setRequestHeader('Access-Control-Allow-Headers','*');
        xhr.send(fd);
    }, type)
}

❓:为什么我输出图片之后会报跨域的错误

canvas在输出图片时会因画布污染导致跨域,需要设置crossOrigin为 'Anonymous'以及setRequestHeader等,具体可以戳 👉 解锁canvas导出图片跨域的N种姿势

总结

本文主要介绍了一个完整的裁剪过程的大致实现,至于一些比较定制的功能(批量裁剪、缩放裁剪、定向尺寸裁剪等),原理其实都大同小异,只是如何操作批量的图片信息、裁剪信息的问题罢了

操作canvas最重要的一点就是关于坐标的计算,尤其是旋转的坐标,一定要细心地理清楚。其实整个流程下来,只要思路清晰,还是挺简单的。

组件demo地址可以戳 👉 github

参考链接