canvas实现图片剪切

---

前言

在学习原生canvas，顺便做一个canvas进行图片剪切的小练习，加深自己对canvas的理解。计划做一个很简单很简单版的小demo，主要使用到canvas元素和一些鼠标监听事件。

小demo: http://121.4.85.237:7778/

思路分析

• 1 图片可以在canvas上进行绘制
• 2 绘制的图片在canvas中可以随意拖动(重绘)
• 3 图片也要支持放大与缩小(重绘)
• 4 点击图片裁剪按钮可进行图片导出
• 5 canvas画布最好支持响应式

绘制图片

主要使用到了canvas中自带的drawImage()方法，该方法的形参含义自行去官网了解，只有自己去了解才能印象深刻。
这里还有两个注意点，一是在vue框架中，当引入的图片路径是本地路径时，要使用require的方法引入；第二个是要是image的onload函数触发时(图片加载完成)进行图片绘制。

this.canvas = document.querySelector("#mycanvas");
this.ctx = this.canvas.getContext("2d");

this.image = new Image();
this.image.src = require("./sss.jpg");
this.image.onload = () => {
  this.drawImage(); // 绘制图片
};
drawImage() {
  // 再次绘制前要进行清除之前的绘制
  this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); 
  this.ctx.drawImage(
    this.image,
    0,
    0,
    this.image.width,
    this.image.height,
    this.imageX,
    this.imageY,
    this.image.width * this.imageScale,
    this.image.height * this.imageScale
  );
},

mousedown

给canvas添加鼠标按下事件，以此来判断绘制在canvas上的图片是否可以移动(就是重绘的意思)，并在可以移动时改变鼠标样式。

this.canvas.onmousedown = (e) => {
  this.downpos = this.windowToCanvas(e.clientX, e.clientY);
  if (this.downpos.x > this.imageX && this.downpos.y > this.imageY) {
    this.move = true;
    this.canvas.style.cursor = "pointer";
  }
};

mousemove

在可以移动的情况下进行图片偏移计算，并进行重绘。
这里计算出的偏移量，是用来绘制图片时做为坐标的起始点的。

this.canvas.onmousemove = (e) => {
  const mouseX = e.clientX;
  const mouseY = e.clientY;
  if (
    mouseX > this.canvas.getBoundingClientRect().left ||
    mouseY > this.canvas.getBoundingClientRect().top
  ) {
    if (this.move) {
      this.movePos = this.windowToCanvas(mouseX, mouseY);
      const x = this.movePos.x - this.downpos.x;
      const y = this.movePos.y - this.downpos.y;
      this.imageX += x;
      this.imageY += y;
      this.drawImage();
      this.downpos = JSON.parse(JSON.stringify(this.movePos));
    }
  }
};

mouseup

鼠标抬起事件中进行各个属性值的 reset 。

document.onmouseup = (e) => {
  this.canvas.style.cursor = "default";
  this.downPos = null;
  this.movePos = null;
  this.move = false;
};

图片裁剪

使用canvas.toDataURL()方法即可。

caijian() {
  let imgUrl = this.canvas.toDataURL("image/jpeg", 1.0);
  let a = document.createElement("a");
  a.download = "caijian.jpeg";
  a.href = imgUrl;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
},

画布响应式

这个很简单，就是监听window.onresize事件，这里不写了，demo中实现了。