使用canvas对图片进行裁切
Posted 苛学加
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用canvas对图片进行裁切相关的知识，希望对你有一定的参考价值。
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" src="https://img2.baidu.com/it/u=1704416777,980035752&fm=26&fmt=auto&gp=0.jpg" 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 canvas = document.getElementById('canvas-cut');
const cut = canvas.getContext('2d');
img = new Image();
img.crossOrigin = 'Anonymous';//处理toDataURL时的报错
img.src = "https://img2.baidu.com/it/u=1704416777,980035752&fm=26&fmt=auto&gp=0.jpg";
img.onload = function() {
cut.drawImage(img,290,80,100,100,0 ,0,100,100);
var imgbase64 = canvas.toDataURL("image/png");
document.getElementById('result').src =imgbase64;
};
</script>
</body>
</html>
运行效果：
以上是关于使用canvas对图片进行裁切的主要内容，如果未能解决你的问题，请参考以下文章
使用canvas的toDataURL方法将图片转为base64报错：Tainted canvases may not be exported
node.js（express）中使用Jcrop进行图片裁切上传