vue图片编辑组件

组件预览

// 安装 
npm i vue-img-editor-xx

// 全局导入 main.js
import ImgEditor from 'vue-img-editor-xx'
Vue.use(ImgEditor)

// 单独导入
import {ImgEditor} from 'vue-img-editor-xx';

// 添加组件
{
    components: {
        ImgEditor
    },
    data:{
        value:"", // 图片地址
    },
    methods:{
        // 图片更改回调
        onChange(src){
            // 更改后的图片地址
            console.log(src)
        }
    }
}

// 使用
<template>
    <!-- pattern: edit | view -->
    <img-editor pattern="edit" v-model="value"  @change="onChange" />
</template>

github:vue-img-editor

实现

缩放和拖动

通过css的 transform来实现，设置拖动的边界： 最大拖动距离(left,top) = （放大后canvas宽高 - 容器的宽高） / 2

{
    transform: `translate(${left}px, ${top}px) scale(${this.zoom})`,
}

添加文字

声明一个数组用来存放添加的文字信息，使用v-for在容器中遍历生成输入框，进入文字编辑模式时，点击容器区域向数组追加一项,包含（初始文字内容,x坐标，y坐标）：

data(){
    return{
        texts:[],
    }
}
    
methods:{
    textAdd(){
        this.texts.push({
            text: "",
            x: e.offsetX,
            y: e.offsetY,
            editing: true,
       });
    }
}

因为采用的是textarea，所以添加完毕后，在canvas上渲染时需要对文字进行换行处理

/** 添加文字完毕 */
addTexted(row) {
  this.textEditEnd();
  this.ctx.font = `${
    13 * Math.max(this.scaleX, this.scaleY)
  }px '微软雅黑' `;
  this.ctx.fillStyle = "red";
  this.ctx.textBaseLine = "top";
  this.drawText(row.text, row.x * this.scaleX, row.y * this.scaleY);
  this.addStack();
},
/** canvas文字换行 */
drawText(str, x, y) {
  let strArr = str.split("\n").map((item) => this.splitArr(item, 21));
  strArr = [].concat(...strArr);
  for (let i = 0; i < strArr.length; i++) {
    const text = strArr[i];
    this.ctx.fillText(text, x + 5, y + 20 * this.scaleY * i + 15);
  }
},

图形标记

通过mousedown记录鼠标点击的位置作为起始坐标，通过mousemove事件获取结束坐标，有了起始坐标和结束坐标就可以通过方法来画出 矩形 、 圆形 、 箭头 了，获取坐标时需要注意放大后获取的坐标，此时canvas和容器的宽高不一样，需要计算出真实的canvas的坐标。

/** 矩形 */
drawRect(canvas,e) {
  const savedContent = this.imgStack[this.imgStack.length - 1];
  canvas.clearRect(0, 0, this.width, this.height);
  canvas.putImageData(savedContent, 0, 0);
  canvas.beginPath();
  let tx = e.layerX - this.drawMap.beginX;
  let ty = e.layerY - this.drawMap.beginY;
  canvas.lineWidth = 1 * Math.max(this.scaleX, this.scaleY);
  canvas.rect(
    this.drawMap.beginX * this.scaleX,
    this.drawMap.beginY * this.scaleY,
    tx * this.scaleX,
    ty * this.scaleY
  );
  canvas.strokeStyle = "red";
  canvas.stroke();
},
/** 椭圆 */
drawEllipse(canvas, e) {
  const savedContent = this.imgStack[this.imgStack.length - 1];
  this.ctx.clearRect(0, 0, this.width, this.height);
  this.ctx.putImageData(savedContent, 0, 0);

  let { beginX, beginY } = this.drawMap;
  beginX = beginX * this.scaleX;
  beginY = beginY * this.scaleY;
  const endX = e.layerX * this.scaleX,
    endY = e.layerY * this.scaleY;
  const centerX =
    Math.abs(endX - beginX) / 2 + (endX > beginX ? beginX : endX);
  const centerY =
    Math.abs(endY - beginY) / 2 + (endY > beginY ? beginY : endY);
  const radiusX = Math.abs(endX - beginX) / 2;
  const radiusY = Math.abs(endY - beginY) / 2;

  this.ctx.beginPath();
  this.ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
  this.ctx.lineWidth = 1 * Math.max(this.scaleX, this.scaleY);
  this.ctx.strokeStyle = "red";
  this.ctx.stroke();
},
/** 箭头 */
drawArrow(beginx, beginy, e, canvas) {
  const savedContent = this.imgStack[this.imgStack.length - 1];
  this.ctx.clearRect(0, 0, this.width, this.height);
  this.ctx.putImageData(savedContent, 0, 0);

  // 画直线
  const startX = beginx * this.scaleX;
  const startY = beginy * this.scaleY;
  const endX = e.layerX * this.scaleX;
  const endY = e.layerY * this.scaleY;
  canvas.beginPath();
  canvas.lineWidth = 1 * Math.max(this.scaleX, this.scaleY);
  canvas.moveTo(startX, startY);
  canvas.lineTo(endX, endY);
  canvas.stroke();

  // 画箭头
  const arrowLength = 15;
  const arrowWidth = 5;
  const angle = Math.atan2(endY - startY, endX - startX);
  const arrowStartX = endX - Math.cos(angle) * arrowLength;
  const arrowStartY = endY - Math.sin(angle) * arrowLength;
  const arrowLeftX =
    arrowStartX + Math.cos(angle - Math.PI / 2) * arrowWidth;
  const arrowLeftY =
    arrowStartY + Math.sin(angle - Math.PI / 2) * arrowWidth;
  const arrowRightX =
    arrowStartX + Math.cos(angle + Math.PI / 2) * arrowWidth;
  const arrowRightY =
    arrowStartY + Math.sin(angle + Math.PI / 2) * arrowWidth;
  canvas.beginPath();
  canvas.moveTo(arrowStartX, arrowStartY);
  canvas.lineTo(endX, endY);
  canvas.lineTo(arrowLeftX, arrowLeftY);
  canvas.lineTo(arrowRightX, arrowRightY);
  canvas.lineTo(endX, endY);
  canvas.closePath();
  canvas.strokeStyle = "red";
  canvas.fillStyle = "red";
  canvas.fill();
},

撤回、清空

生命一个操作栈(Array)每次更改画布的时候，使用canvas的getImageData方法将画布信息push进操作栈中,撤回时删除数组最后一项，然后取数组最后一项使用putImageData方法重新渲染画布,清空时取数组第一项进行渲染，并清空数组。

/** 撤销 */
undo() {
  if (this.imgStack.length > 1) {
    this.imgStack.pop();
    const savedContent = this.imgStack[this.imgStack.length - 1];
    this.ctx.clearRect(0, 0, this.width, this.height);
    this.ctx.putImageData(savedContent, 0, 0);
    this.$emit("change", this.getImgBase64());
  }
},
/** 清空 */
clean() {
  const imgData = this.imgStack.shift();
  this.imgStack = [imgData];
  this.ctx.clearRect(0, 0, this.width, this.height);
  this.ctx.putImageData(imgData, 0, 0);
  this.$emit("change", this.getImgBase64());
},