canvas画矩形方法

// img图片地址,result绘画矩形的坐标,name要显示的文字,color颜色
draw_one_box(img, result, name, color, id) {
      let image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.src = img;
      image.onload = () => {
        let canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        let context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        if (result) {
          result = JSON.parse(result);
          let x = result[0];
          let y = result[1];
          let w = result[2] - x;
          let h = result[3] - y;
          let text = name;
          context.beginPath();
          context.strokeStyle = "#f00";
          context.lineWidth = 5;
          context.strokeRect(x, y, w, h);
          let text_opt = {
            size: 16,
            color: "#f00",
            textBaseline: "top",
          };
          let offset_opt = {
            w: canvas.width,
            h: canvas.height,
            size: text_opt.size,
            textBaseline: text_opt.textBaseline,
          };
          let offset = common.textOffset(x + 5, y + 5, text, offset_opt);
          common.drawText(context, offset.x, offset.y, text, text_opt);
        }
		// 图片生成
        canvas.toBlob((blob) => {
          let imgurl = URL.createObjectURL(blob);
          if (this.isLeftOrRight === 0) {
            this.$set(this.leftRes[id], "url", imgurl);
          }
          if (this.isLeftOrRight === 1) {
            this.$set(this.rightRes[id], "url", imgurl);
          }
        }, "image/png");
      };
    },