使用canvas对图片进行裁切

最新推荐文章于 2025-04-03 09:19:56 发布

苛学加

最新推荐文章于 2025-04-03 09:19:56 发布

阅读量1.7w

点赞数 10

分类专栏：前端展现文章标签： canvas

本文链接：https://blog.csdn.net/xiaohui_brook/article/details/117655386

版权

前端展现专栏收录该内容

21 篇文章

订阅专栏

canvas

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

一、图片剪裁

1. 处理思路

首先创建canvas对像。
指定canvas的高度宽度。
计算原图需要剪切的相关参数。
通过drawImage方法将需要的部分画上去。
通过toDataURL方法获取图片base64的值。
完成，后续可对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的绘制区域大小。

在这里插入图片描述

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>

运行效果：
在这里插入图片描述