JS——canvas 拼装图片、复制图片

1. 创建canvas工具类

class Canvas {
  canvas = null;
  ctx = null;

  constructor() {
    this.canvas = document.createElement('canvas');
    this.ctx = this.canvas.getContext('2d');
  }

  /* 设置画布大小 */
  setCanvasSize(w, h) {
    this.canvas.width = w;
    this.canvas.height = h;
  }

  /** 拼装图片
   * @param imgOptions[src] 图片路径
   * @param imgOptions[w] 图片宽
   * @param imgOptions[h] 图片高
   * @param imgOptions[x] 图片横向坐标
   * @param imgOptions[y] 图片纵向坐标
   */
  async assemblyPic(imgOptions) {
    for (const imgOption of imgOptions) {
      let img = new Image();
      img.src = imgOption.src;
      await new Promise((r) => {
        img.onload = () => {
          this.ctx.drawImage(
            img,
            imgOption.x || 0,
            imgOption.y || 0,
            imgOption.w || img.width,
            imgOption.h || img.height,
          );
          r(true);
        };
      });
    }
  }

  /** 复制画布到剪切板 */
  copyCanvas() {
    return new Promise((r, j) => {
      this.canvas.toBlob(async (blob) => {
        const data = [
          new ClipboardItem({
            [blob.type]: blob,
          }),
        ];
        await navigator.clipboard.write(data).then(
          () => {
            r(true);
          },
          () => {
            j(false);
          },
        );
      });
    });
  }
}

2. 使用

//引入工具类
<script src="./canvas.js"></script>

<script>
  const myCanvas = new Canvas()
  document.body.append(myCanvas.canvas)

  const url1 = `https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00426-872.jpg`
  const url2 = `https://img0.baidu.com/it/u=1993557595,4075530522&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500`
  //设置画布大小
  myCanvas.setCanvasSize(1000,1000)
  //拼装图片
  myCanvas.assemblyPic([
    {
      src: url1,
    }, {
      src: url2,
    },
  ])

  //复制图片
  function onCopy(){
    myCanvas.copyCanvas()
  }
</script>