vue下如何利用canvas实现在线图片标注

目录

• 组件代码如下
• 在开发过程中遇到的问题

web端实现在线图片标注在此做下记录，功能类似微信截图时的标注，包含画线、框、箭头和文字输入，思路是利用canvas画布，先把要标注的图片使用drawImage方法画在画布上，然后定义画线、框、箭头和文字输入的方法调用

组件代码如下

然后在页面中引入组件，传入图片链接。

在开发过程中遇到的问题

文字输入功能在用户输入文字后，如果不再点击别的地方直接点击别的功能按钮的话，最后输入的文字将不会再画布上生成，通过监控输入框的blur事件来在画布上生成文字，避免这个问题。

文字输入时字体的大小会影响生成文字的位置，这里发现文字的大小和位置有一个偏移量：

let offset = 0;
if (_this.fontSize >= 28) {
  offset = (_this.fontSize / 2) - 3
} else {
  offset = (_this.fontSize / 2) - 2
}

在画布上生成文字的时候需要加上这个偏移量，这里字体范围是14~36，别的字体大小没有校验，不一定适用这个计算方式。

绘制矩形的时候需要先清空画布，在清空之前先保存一次画布然后再清空再重新画一下画布，负责矩形框会不停的出现轨迹，并且之前画的元素会消失。

撤销的时候需要考虑文字输入，判断input得v-show是否为true，如果是true需要先清空文字，再撤销，否则画布上会一直存在一个输入框。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。