使用canvas对图片进行裁切

青旅半醒 2022-10-05 00:41 194阅读 0赞

# canvas #

canvas 又叫做画布，是 HTML5 新增内容，可以使用js脚本在其中绘制图像的元素。  
常用于制作网页上的一些毕竟炫酷的前端特效。  
可以完成**图片处理、动画渲染、图表渲染**等操作。  
最近用uni-app的推流组件做了个已证件照拍摄的相机，但是拍照完成后还需要对图片进行裁切，才能真正使用。  
今天就来看看如何使用canvas对图片进行裁切处理。

## 一、图片剪裁 ##

### 1. 处理思路 ###

1.  首先创建canvas对像。
2.  指定canvas的高度宽度。
3.  计算原图需要剪切的相关参数。
4.  通过drawImage方法将需要的部分画上去。
5.  通过toDataURL方法获取图片base64的值。
6.  完成，后续可对base64值进行其他操作。

### 2. 关键方法 ###

最主要的drawImage方法有一下传参方式：

*  drawImage(img, dx, dy)
 *  drawImage(img, dx, dy, dw, dh)
 *  drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)

各参数说明：

*  img：需要插入的img/video/canvas 元素。
 *  dx/dy：canvas的开始绘制点位。
 *  dw/dh：canvas的绘制区域大小。
 *  sx/sy：image的开始绘制点位。
 *  sw/wh：image的绘制区域大小。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70]

### 3. 示例代码 ###

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>Canvas</title>
    	</head>
    	<body>
    		<div class="wrapper">
    			<h3>目标</h3>
    			<span>将图片中的最右侧头像剪裁出来</span>
    			
    			<h3>原始图预览</h3>
    			<img id="image" alt="" style="width:300px; height:200px">
    
    			<h3>Canvas裁切视图</h3>
    			<canvas id="canvas-cut" width="100" height="100" ></canvas>
    			
    			<h3>Base64结果展示</h3>
    			<img id="result" />
    		</div>
    		<script> const SRC= "https://img0.baidu.com/it/u=2484538263,336635826&fm=26&fmt=auto&gp=0.jpg"; document.getElementById('image').src = SRC; var canvas = document.getElementById('canvas-cut'); var cut = canvas.getContext('2d'); var img = new Image(); img.src = SRC; //处理toDataURL遇跨域资源导致的报错 img.crossOrigin = 'Anonymous'; img.onload = function() { cut.drawImage(img,295,40,100,100,0 ,0,100,100); var imgbase64 = canvas.toDataURL("image/png"); document.getElementById('result').src =imgbase64; }; </script>
    	</body>
    </html>

运行效果：  
![在这里插入图片描述][20210707155205988.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70]: /images/20221005/b0b85819673641429b1d80ea06475f7f.png
[20210707155205988.png]: /images/20221005/57d5698aa41540f29ceb50167f306b69.png