canvas绘制图片，并标注框选出指定坐标位置的目标

将图片绘制到canvas画布上，并标出指定坐标位置的目标

本篇文章介绍只是canvas绘制图片背景，并通过读取坐标信息对每个坐标对应目标进行标注框选，和前面写过的一篇Canvas和Konva结合实现手动标注文章的区别在于该方法只是页面展示效果，不能进行手动新增标注或修改已有目标。

实现代码：

export default {
  judgeInitCanvas: function (imgList, canvasList) {
    let len = imgList.length;
    if (len > 1) {
      for (let i = 0; i < len; i++) {
        this.initCanvas(canvasList[i], imgList[i]);
      }
    } else if (len === 1) {
      this.initCanvas(canvasList[0], imgList[0]);
    } else {
      this.initCanvas(canvasList, imgList);
    }
  },
  initCanvas: function (canvas, imgData) {
    let
      ctx = canvas.getContext('2d'),
      canvasW = canvas.width,
      canvasH = canvas.height;

    ctx.clearRect(0, 0, canvasW, canvasH);
    ctx.lineWidth = '2';
    let img = new Image();
    let self = this;
    img.src = imgData.fileUrl;
    img.onload = function () {
      self.renderImgAndRect(ctx, img, imgData, canvasW, canvasH)
    };
  },
  renderImgAndRect: function (ctx, img, imgData, canvasW, canvasH) {
    let
      actImgW = img.width,
      actImgH = img.height,
      imgW = actImgW,
      imgH = actImgH,
      rate = 1,
      left = 0,
      top = 0;
      
//因为canvas画布的宽高固定，所以通过判断图片的宽高来进行缩放处理
    if (actImgW > canvasW || actImgH > canvasH) {
      if (actImgW / actImgH >= canvasW / canvasH) {
        imgW = canvasW;
        rate = actImgW / canvasW;
        imgH = actImgH / rate;
        top = (canvasH - imgH) / 2;
      } else {
        imgH = canvasH;
        rate = actImgH / canvasH;
        imgW = actImgW / rate;
        left = (canvasW - imgW) / 2;
      }
    } else {
      left = (canvasW - imgW) / 2;
      top = (canvasH - imgH) / 2;
    }
    ctx.drawImage(img, left, top, imgW, imgH);
    
//labelVos为图片信息集合中的坐标集合，通过该集合中的坐标，在画布上绘制画框
    if (imgData.labelVos) this.drawRect(ctx, imgData.labelVos, left, top, rate);
  },
  drawRect: function (ctx, rectList, left, top, rate) {
  //给不同名称的目标画框匹配随机颜色
    let colorType = sessionStorage.getItem("colorType");
    let labelArr = [];
    if (colorType) {
      colorType = JSON.parse(colorType);
      labelArr = Object.keys(colorType);
    } else {
      colorType = {};
    }

    for (let i = 0; i < rectList.length; i++) {
      let rect = rectList[i];
      let labelName = rect.labelName;
      if (!labelArr.includes(labelName)) {
        labelArr.push(labelName);
        let randomColor = this.getRandomColor();
        colorType[labelName] = randomColor;
        ctx.strokeStyle = randomColor;
        ctx.fillStyle = randomColor;
      } else {
        ctx.strokeStyle = colorType[labelName];
        ctx.fillStyle = colorType[labelName];
      }

      let
        x = rect.upperLeftCoorX / rate + left,
        y = rect.upperLeftCoorY / rate + top,
        w = (rect.lowerRightCoorX - rect.upperLeftCoorX) / rate,
        h = (rect.lowerRightCoorY - rect.upperLeftCoorY) / rate;
      ctx.strokeRect(x, y, w, h);
      if (labelName) {
        ctx.font = `${20 / rate}px sans-serif`;
        let {confidence} = rect;
        let text = confidence ? `${labelName}: ${confidence}%` : labelName;
        ctx.fillText(text, x - 1, y - 10 / rate);
      }
    }
    sessionStorage.setItem("colorType", JSON.stringify(colorType));
  },
  getRandomColor: function () {
    let colorValue = "0123456789abcdef";
    let randomColor = "#";
    for (let i = 0; i < 6; i++) {
      randomColor += colorValue[Math.floor(Math.random() * 16)];
    }
    return randomColor;
  },
}

在vue项目页面中直接调用该方法

//在代码中调用
this.previewCanvas = document.getElementById("previewCanvas");
canvasUtils.judgeInitCanvas(imgData, this.previewCanvas);
//这里canvasUtils是自定义js方法的名称，imgData是页面需要展示的图片的集合，必须要包含图片的url地址，其他参数信息可根据自身项目需求添加