Canvas艺术之旅:探索锚点抠图的无限可能

说在前面

在日常的图片处理中,我们经常会遇到需要抠图的情况,无论是为了美化照片、制作海报,还是进行图片合成。抠图对于我们来说也是一种很常用的功能了,今天就让我们一起来看下怎么使用canvas来实现一个锚点抠图功能。

效果展示

体验地址

http://jyeontu.xyz/JDemo/#/imgCut

代码实现

一、图片上传

想要进行抠图的话我们得先有图片是吧,所以要有个图片上传的功能。

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.widththis.$refs.canvas.height),以及图像的宽度和高度 (this.image.widththis.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" 的组件,其中包括了两个属性 imageListcurrentImage,分别用于接收图片列表和当前显示的图片。在方法部分,定义了 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

https://gitee.com/zheng_yongtao/jyeontu-vue-demo.git

公众号

关注公众号『前端也能这么有趣』发送 vueDemo即可获取源码。

说在后面

🎉 这里是 JYeontu,现在是一名前端工程师,有空会刷刷算法题,平时喜欢打羽毛球 🏸 ,平时也喜欢写些东西,既为自己记录 📋,也希望可以对大家有那么一丢丢的帮助,写的不好望多多谅解 🙇,写错的地方望指出,定会认真改进 😊,偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章,有兴趣的也可以关注下。在此谢谢大家的支持,我们下文再见 🙌。

相关推荐
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
阿伟来咯~2 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨2 小时前
在JS中, 0 == [0] 吗
开发语言·javascript
帅比九日3 小时前
【HarmonyOS Next】封装一个网络请求模块
前端·harmonyos