Vue image-painter

圖片涂鴉、繪制职恳、標(biāo)注

在線預(yù)覽

支持功能

1.畫筆顏色 ??

2.畫筆粗細(xì) ??

3.畫布放大 ??

4.畫布縮小 ??

5.清除畫布 ??

6.保存圖片 ??

7.回退一步 ??

8.前進(jìn)一步 ??

畫筆工具類型

1.畫筆 ??

2.直線 ??

3.圓形 ??

4.矩形 ??

5.橡皮 ??

6.文字 ??

實(shí)現(xiàn)思路

創(chuàng)建三個(gè)不同作用的畫布

// 用于繪制的畫板
this.canvas_front = document.getElementById("ctx_front");

// 用于生成繪制后效果圖的畫板
this.canvas_back = document.getElementById("ctx_back");

// 底圖畫板菇肃，橡皮擦除時(shí)獲取像素放到繪制畫板中，達(dá)到不擦出底圖的效果
this.canvas_base = document.getElementById("ctx_base");

鼠標(biāo)按下判斷工具類型聘芜，記錄初始位置

let mousedown = (e) => {
    this.ctx_front.strokeStyle = this.defaultColor;
    this.ctx_front.lineWidth = this.slide;
    e = e || window.event;
    sx = e.clientX - this.canvas_front.offsetLeft;
    sy = e.clientY - this.canvas_front.offsetTop;

    this.ctx_front.moveTo(sx, sy);
    this.canDraw = true;
    ...

若是輸入文字則定位輸入框到畫布中燕偶，失焦或回車文字繪制到畫布中

this.handleTextBlur();
    this.text = "";
    text.style.fontSize = 14 + this.slide * 10 + "px";
    text.style.color = this.defaultColor;
    text.style.left =
              e.offsetX + this.canvas_front.offsetLeft - 20 + "px";
    text.style.top =
              e.offsetY + this.canvas_front.offsetTop - 10 + "px";
    text.style.zIndex = 10;
    text.style.display = "block";
    this.tl = e.offsetX - 20;
    this.tt = e.offsetY + 10;
    break;

    ...

handleTextBlur() {
      let text = document.getElementById("text");
      this.ctx_front.font = `300 ${text.style.fontSize} sans-serif`;
      this.ctx_front.fillStyle = this.defaultColor;
      this.ctx_front.fillText(this.text, this.tl, this.tt);
      text.style.display = "none";
      this.handleSaveCanvasStore();
    }

鼠標(biāo)移動，根據(jù)工具類型繪制不同路徑

 let mousemove = (e) => {
        e = e || window.event;
        mx = e.clientX - this.canvas_front.offsetLeft;
        my = e.clientY - this.canvas_front.offsetTop;
        const cbx = this.ctx_base.getImageData(
          e.offsetX - this.slide / 2,
          e.offsetY - this.slide / 2,
          this.slide * 2,
          this.slide * 2
        );
    ...

若工具類型是橡皮旺韭，則從 canvas_base 中獲取底圖像素放回 canvas_front 中

    const cbx = this.ctx_base.getImageData(
          e.offsetX - this.slide / 2,
          e.offsetY - this.slide / 2,
          this.slide * 2,
          this.slide * 2
    );

    ...

 this.ctx_front.putImageData(
                cbx,
                e.offsetX - this.slide / 2,
                e.offsetY - this.slide / 2
              );
    ...

鼠標(biāo)抬起氛谜，從繪制畫布 canvas_front 生成繪制圖并繪制到 canvas_back 中，然后再重繪 canvas_front

handleSaveCanvasStore() {
      let url = this.canvas_front.toDataURL();
      let image = new Image();
      image.src = url;
      image.onload = () => {
        this.ctx_front.clearRect(
          0,
          0,
          this.canvas_front.width,
          this.canvas_front.height
        );
        this.ctx_front.drawImage(image, 0, 0, image.width, image.height);
        this.ctx_back.drawImage(image, 0, 0, image.width, image.height);
        const url2 = this.canvas_back.toDataURL();
        this.currentImg.url = url2;
        this.currentImg.index += 1;
        this.canvasStore.push(url2);
        this.prevDis = false;
        console.log(this.canvasStore);
      };
    },

最終保存圖片

let canvas = document.getElementById("ctx_back");
    this.$refs.download.href = canvas.toDataURL();
    this.$refs.download.click();

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

感謝支持

技術(shù)能力有限茂翔，不喜勿噴混蔼，不足之處履腋，請指點(diǎn)一二（源碼地址）