vue 使用H5 的canvas 绘制图片

// url---图片地址  x,y 在画布中的位置  width, height 图片的宽度和高度 cavasDom画布
drawImage(url, x, y, width, height, cavasDom) {
  return new Promise((resolve, reject) => {
    try {
      let img = new Image();
      //绘制时候 放大devicePixelRatio 倍 盒子和绘制canvas  然后css来达到缩放图片的效果
      //解决最后绘制canvas图片 调用toDataURL转成base64图片跨越问题
      if (url.includes("http")) {
        this.getBase64(url).then(base64 => { //这里使用后端的接口 解决图片http的canvas不能base64 出现跨越问题
          img.src = base64;
          img.onload = () => {
            const ctx = cavasDom.getContext("2d");
            ctx.drawImage(img, x, y, width * devicePixelRatio, height * devicePixelRatio); // 这里的devicePixelRatio是window.devicePixelRatio;
            resolve();
          };
        });
      } else {
        img.src = url;
        img.onload = () => {
          const ctx = cavasDom.getContext("2d");
          ctx.drawImage(img, x, y, width * devicePixelRatio, height * devicePixelRatio);
          resolve();
        };
      }
    } catch (error) {
      reject();
    }
  });
},

getBase64(imageUrl) { // 利用后端接口 把http图片转成base64  防止下载cavans的时候 出现跨越问题
  return new Promise(resolve => {
    getImageBuffer({
      url: imageUrl
    }).then(response => {
      let blob = new Blob([response]);
      let reader = new FileReader();
      reader.onload = event => {
        resolve(event.target.result);
      };
      reader.readAsDataURL(blob);
    });
  });
}

注意 这里 有个绘制图片 出现模糊的问题

解决方法 利用

  data() {
    return {
      devicePixelRatio: window.devicePixelRatio,
    };
  },

 <canvas
          ref="canvas1"
          id="canvas1"
          :width="width * devicePixelRatio" //盒子的宽度  放大devicePixelRatio倍去画图
          :height="height * devicePixelRatio" // canvas盒子的高度 放大devicePixelRatio倍
          :style="{
            width: width + 'px', // 然后利用css属性 设置canvas在页面要显示的大小--相对canvas画布的宽和高 相当于压缩了devicePixelRatio倍---所以会变的清晰。
            height: height + 'px'
          }"
        ></canvas>

这里可以将 canvas 比喻为一个 img ，其中画布的 width 与 height 属性，相当于 img 中图片的原始尺寸；我们使用JS在画布上绘制的内容对应的就是 img 中的图片；而 style 或者CSS设置的 width 与 height ，就是设置 canvas 或者 img 在页面上要显示的大小。