说在前面
在日常的图片处理中，我们经常会遇到需要抠图的情况，无论是为了美化照片、制作海报，还是进行图片合成。抠图对于我们来说也是一种很常用的功能了，今天就让我们一起来看下怎么使用canvas来实现一个锚点抠图功能。
效果展示
体验地址
代码实现
一、图片上传
想要进行抠图的话我们得先有图片是吧，所以要有个图片上传的功能。
1、本地图片上传
这里我们使用简单的点击按钮上传，前面也有文章介绍过了拖拽上传功能的实现，这里就不赘述了，有兴趣的可以看下这篇文章：《文件拖拽上传功能已经烂大街了，你还不会吗？》
这里我们直接使用input标签来实现上传功能即可：
vue
<label for="file-upload" class="custom-file-upload">
<i class="fas fa-cloud-upload-alt"></i> 选择文件
</label>
<input
v-show="false"
id="file-upload"
type="file"
accept="image/*"
@change="handleFileUpload"
/>
javascript
handleFileUpload(e) {
let file = e.target.files[0];
if (!file) return;
this.srcLink = "";
const reader = new FileReader();
reader.onload = event => {
const img = new Image();
img.onload = () => {
this.image = img;
this.width = img.width;
this.height = img.height;
this.originWidth = img.width;
this.originHeight = img.height;
this.drawCanvas();
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
}2、在线链接图片
使用Input输入在线图片链接：
html
<input
type="input"
@change="inputSrc"
placeholder="输入图片在线地址"
v-model="srcLink"
class="input-style"
style="width: 100%;"
/>
javascript
getImageBase64FromURL(url, callback) {
return new Promise(resove => {
const xhr = new XMLHttpRequest();
xhr.onload = function() {
const reader = new FileReader();
reader.onloadend = function() {
resove(reader.result);
};
reader.readAsDataURL(xhr.response);
};
xhr.open("GET", url);
xhr.responseType = "blob";
xhr.send();
});
},
async inputSrc() {
const src = await this.getImageBase64FromURL(this.srcLink);
const img = new Image();
img.onload = () => {
this.image = img;
this.width = img.width;
this.height = img.height;
this.drawCanvas();
};
img.src = src;
}3、将上传的图片绘制到canvas中
javascript
drawCanvas() {
setTimeout(() => {
if (!this.image || !this.ctx) {
return;
}
this.ctx.clearRect(0, 0, this.width, this.height);
this.ctx.save();
this.ctx.translate(this.width / 2, this.height / 2);
this.ctx.drawImage(
this.image,
-this.width / 2,
-this.height / 2,
this.width,
this.height
);
this.ctx.restore();
this.realPoints.forEach(point => {
this.drawPoint(point.x, point.y);
});
this.connectPoints(); // 每次绘制canvas后连接所有点
}, 100);
}使用ctx.clearRect()方法清除整个画布，以便在重新绘制之前清空之前的内容。然后，使用ctx.save()方法保存当前的绘图状态。
通过ctx.translate()方法将绘图原点移动到画布的中心位置(this.width / 2, this.height / 2)，这样可以方便地绘制图像和点的坐标。
使用ctx.drawImage()方法绘制图像，参数分别为图像对象this.image、图像左上角的x和y坐标(-this.width / 2, -this.height / 2)，以及图像的宽度和高度(this.width, this.height)。这样就在画布上绘制了图像。
接着使用ctx.restore()方法恢复之前保存的绘图状态。
然后，通过forEach循环遍历this.realPoints数组中的每个点，调用this.drawPoint()方法绘制每个点。
最后，调用this.connectPoints()方法连接所有的点，以绘制线条。
二、锚点选择与撤销
1、监听鼠标点击
这里我们使用canvas来展示图片：
html
<canvas
ref="canvas"
id="example-canvas"
:width="width"
:height="height"
@click="canvasClick"
tabindex="0"
></canvas>
监听canvas的点击事件并保存点击坐标
javascript
canvasClick(event) {
if (!this.image || !this.ctx) {
return;
}
const x = event.offsetX / (this.width / this.originWidth);
const y = event.offsetY / (this.height / this.originHeight);
this.points.push({ x, y }); // 将坐标添加到数组中
const point = this.tranPoint({ x, y });
this.drawPoint(point.x, point.y);
},2、绘制锚点
前面我们获取到点击坐标了，这里我们需要在该坐标上绘制上锚点：
javascript
drawPoint(x, y) {
// 绘制一个小圆点
this.ctx.beginPath();
this.ctx.arc(x, y, 4, 0, 2 * Math.PI);
this.ctx.fillStyle = "red";
this.ctx.fill();
this.ctx.closePath();
this.connectPoints(); // 每次点击后连接所有点
},使用beginPath()方法创建路径，然后使用arc()方法绘制圆形，参数解释如下：
- x: 圆心的x轴坐标
- y: 圆心的y轴坐标
- 4: 圆的半径
- 0, 2 * Math.PI: 圆弧的起始角度和结束角度，这里表示绘制一个完整的圆
接下来设置fillStyle属性为红色，使用fill()方法填充圆形区域，并使用closePath()方法关闭路径。
3、连接锚点
用虚线将所有锚点按顺序连接起来：
javascript
connectPoints() {
if (this.realPoints.length <= 1) {
return;
}
this.ctx.beginPath();
this.ctx.moveTo(this.realPoints[0].x, this.realPoints[0].y);
for (let i = 1; i < this.realPoints.length; i++) {
this.ctx.lineTo(this.realPoints[i].x, this.realPoints[i].y);
}
this.ctx.setLineDash([5, 5]);
this.ctx.strokeStyle = "blue";
this.ctx.lineWidth = 2;
this.ctx.stroke();
this.ctx.closePath();
}如果realPoints数组长度大于1，接着使用beginPath()方法开始创建新的路径，并通过moveTo()方法将画笔移动到第一个点的位置(this.realPoints[0].x, this.realPoints[0].y)。随后使用for循环遍历realPoints数组中的每个点，使用lineTo()方法将画笔移动到下一个点的位置(this.realPoints[i].x, this.realPoints[i].y)，从而连接所有的点。
在绘制线条之前，通过setLineDash()方法设置虚线的样式，这里是一个5像素的实线和5像素的空白，表示虚线的样式。然后设置线条的颜色为蓝色，线宽为2像素，最后通过stroke()方法绘制连接线条。最后使用closePath()方法关闭路径。
4、锚点撤销功能
平时我们都习惯了通过Ctrl+Z来撤销上一步操作，这里我们也加上，通过监听键盘按键事件来实现当用户按下Ctrl+Z组合键时,撤销最后一步锚点操作，也就是将锚点列表的最后一个删除即可：
javascript
document.addEventListener("keydown", event => {
if (event.ctrlKey && event.key === "z") {
event.preventDefault();
that.undoPoint();
}
});
undoPoint() {
if (this.points.length > 0) {
this.points.pop();
this.drawCanvas();
}
},5、获取锚点集合
这里我们在右边预留了一个展示锚点列表的文本域
html
<textarea v-model="pointsStr" class="points-list"></textarea>
javascript
computed: {
pointsStr() {
return JSON.stringify(this.realPoints);
}
}
大家觉得这里输出锚点集合可以做什么？这里先卖个关子，下一篇博客就会需要用到这里的锚点集合了。
三、尺寸修改
页面上我们可以对图片尺寸进行修改，便于获取不同比例下的锚点集：
1、页面图片尺寸修改
html
<label class="label-style">宽</label>
<input
type="number"
v-model="width"
@input="resizeImage($event, 'width')"
@keydown.ctrl.z.prevent
class="input-style"
/>
<label class="label-style">高</label>
<input
type="number"
v-model="height"
@input="resizeImage($event, 'height')"
@keydown.ctrl.z.prevent
class="input-style"
/>
<label class="label-style">按比例缩放</label>
<input type="checkbox" v-model="aspectRatio" class="checkbox-style" />
javascript
resizeImageByWidth(event) {
this.width = event.target.value ? parseInt(event.target.value) : null;
if (this.aspectRatio && this.width) {
this.height = Math.round(
(this.width / this.originWidth) * this.originHeight
);
}
},
resizeImageByHeight(event) {
this.height = event.target.value ? parseInt(event.target.value) : null;
if (this.aspectRatio && this.height) {
this.width = Math.round(
(this.height / this.originHeight) * this.originWidth
);
}
},
resizeImage(event, dimension) {
if (!this.image) {
return;
}
if (dimension === "width") {
this.resizeImageByWidth(event);
} else if (dimension === "height") {
this.resizeImageByHeight(event);
}
if (
this.aspectRatio &&
(!event || event.target !== document.activeElement)
) {
const aspectRatio = this.originWidth / this.originHeight;
if (this.width && !this.height) {
this.height = Math.round(this.originWidth / aspectRatio);
} else if (!this.width && this.height) {
this.width = Math.round(this.originHeight * aspectRatio);
} else if (this.width / aspectRatio < this.height) {
this.width = Math.round(this.originHeight * aspectRatio);
} else {
this.height = Math.round(this.originWidth / aspectRatio);
}
}
this.$refs.canvas.width = this.width ? this.width : null;
this.$refs.canvas.height = this.height ? this.height : null;
this.image.width = this.width;
this.image.height = this.height;
this.drawCanvas();
}根据 dimension 的值（可能是 "width" 或 "height"），调用相应的方法来调整图像的宽度或高度。
resizeImageByWidth(event) 方法用于根据给定的宽度调整图像的大小。它首先将 event.target.value 转换为整数，并将结果赋值给 this.width。然后，如果启用了纵横比 (this.aspectRatio) 并且 this.width 有值，则计算出相应的高度，使得调整后的图像与原始图像保持相同的纵横比。
resizeImageByHeight(event) 方法用于根据给定的高度调整图像的大小。它的逻辑与 resizeImageByWidth(event) 类似，只是操作的是 this.height 和宽高比的计算方式不同。
接下来，如果启用了纵横比 (this.aspectRatio) 并且没有通过键盘事件触发该方法，则根据原始图像的宽高比 (this.originWidth / this.originHeight) 进行额外的调整。具体的调整逻辑如下：
- 如果只设置了宽度 (
this.width) 而没有设置高度 (this.height)，则根据原始图像的宽高比计算出相应的高度。 - 如果只设置了高度 (
this.height) 而没有设置宽度 (this.width)，则根据原始图像的宽高比计算出相应的宽度。 - 如果设置了宽度和高度，并且根据当前的宽高比计算出的宽度小于当前的高度，则根据原始图像的宽高比计算出相应的宽度。
- 否则，根据原始图像的宽高比计算出相应的高度。
最后，根据调整后的宽度和高度，更新画布（this.$refs.canvas.width 和 this.$refs.canvas.height），以及图像的宽度和高度 (this.image.width 和 this.image.height)。然后调用 drawCanvas() 方法重新绘制画布。
2、锚点根据缩放比例进行修改
图片缩放之后，锚点位置也要进行对应的缩放。
javascript
tranPoint(point) {
let { x, y } = point;
x = x * (this.width / this.originWidth);
y = y * (this.height / this.originHeight);
return { x, y };
}四、抠图预览
1、图片预览组件
这里我们简单编写一个图片预览弹窗组件：
vue
<template>
<div>
<div class="preview-overlay" @click="hidePreview">
<img :src="currentImage" alt="preview image" class="preview-image" />
<div class="export-button" @click.stop="handleExport">
<span>导出图片</span>
<span class="shine"></span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "previewImg",
props: {
imageList: {
type: Array,
default: () => []
},
currentImage: {
type: String,
default: ""
}
},
data() {
return {};
},
methods: {
hidePreview() {
this.$emit("close");
},
handleExport() {
this.$emit("export", this.currentImage);
}
}
};
</script>
<style>
.preview-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}
.preview-image {
max-width: 80%;
max-height: 80%;
object-fit: contain;
}
.export-button {
position: absolute;
bottom: 20px;
padding: 10px;
background-color: #00aaff;
color: white;
border-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
font-weight: bold;
text-align: center;
box-shadow: 0 0 10px #00aaff;
overflow: hidden;
}
.export-button:hover {
background-color: #00e5ff;
}
.shine {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
45deg,
#ffffff 10%,
rgba(255, 255, 255, 0) 50%,
rgba(255, 255, 255, 0) 100%
);
animation: exportButtonShine 2s linear infinite;
}
@keyframes exportButtonShine {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>模板部分包含了一个遮罩层和图片预览，以及一个导出按钮。当用户点击遮罩层时，会触发 hidePreview 方法，关闭预览。图片预览部分使用了动态绑定的 :src 属性来显示当前的图片，而导出按钮则绑定了 handleExport 方法，在点击时会触发导出操作。
脚本部分定义了名为 "previewImg" 的组件，其中包括了两个属性 imageList 和 currentImage，分别用于接收图片列表和当前显示的图片。在方法部分，定义了 hidePreview 方法用于关闭预览，并通过 $emit 向父组件发送 "close" 事件，以通知父组件关闭预览。另外还有 handleExport 方法，用于处理导出操作，并通过 $emit 向父组件发送 "export" 事件，并传递当前图片的路径。
2、抠图操作
javascript
cutImg() {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
if (!this.image || !ctx) {
return;
}
const image = this.image;
canvas.width = image.width;
canvas.height = image.height;
// 定义剪切路径
const cutPath = this.realPoints;
ctx.beginPath();
ctx.moveTo(cutPath[0].x, cutPath[0].y);
for (let i = 1; i < cutPath.length; i++) {
ctx.lineTo(cutPath[i].x, cutPath[i].y);
}
ctx.closePath();
ctx.clip();
// 绘制图片
ctx.drawImage(image, 0, 0, this.width, this.height);
// 将Canvas元素转换为PNG图像
const imgData = canvas.toDataURL("image/png");
this.currentImage = imgData;
this.showImg = true;
}获取要剪切的图片对象，并根据该图片的宽度和高度设置 <canvas> 的宽度和高度。
然后，定义剪切路径，通过遍历 cutPath 数组中的点坐标，使用 ctx.lineTo() 方法绘制路径。最后使用 ctx.closePath() 方法闭合路径，并调用 ctx.clip() 方法将剪切路径应用于上下文。
接着，使用 ctx.drawImage() 方法绘制剪切后的图片。传入的参数包括原始图片对象、剪切后的起始点坐标以及剪切后的宽度和高度。
最后，使用 canvas.toDataURL() 方法将 <canvas> 元素转换为 base64 编码的 PNG 图像数据，并将该数据赋值给 imgData 变量。然后将 imgData 赋值给 currentImage 属性，将剪切后的图片显示出来（通过在模板中绑定 currentImage）。
五、导出抠图图片
javascript
downloadImg(imgData) {
// 创建一个链接元素，将图像数据作为URL设置给它
const link = document.createElement("a");
link.download = "myImage.png";
link.href = imgData;
// 触发链接的下载事件
link.click();
}首先，通过 document.createElement("a") 创建一个 <a> 元素，并将该元素赋值给 link 变量。
然后，将要下载的图片的文件名设置为 "myImage.png"，可以根据实际需要修改。
接下来，将图片数据 imgData 设置为链接元素的 href 属性，这样点击链接时会下载该图片。
最后，通过调用 link.click() 方法触发链接的点击事件，从而触发下载操作。
源码地址
gitee
公众号
关注公众号『前端也能这么有趣』发送 vueDemo即可获取源码。
说在后面
🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『
前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。