vue 图片加框及文字标注，并可返回base64

// 图片添加标注并转为base64,用于对图片某个地方画框标注文字

/**

 * 获取table可视化高度

 * @param imgUrl 图片地址

 * @param markInfo 标注信息，markInfo.target是标注画框的坐标，markInfo.text为标注文字，默认标注在画框的右下角

 * @param isBase64 是否返回base64，false则返回canvas

 * @param callback 回调函数，确保返回base64后再进行下一步操作

 */

function imgToCanvasToBase64(imgUrl, markInfo, isBase64, callback) {

  let canvas = document.createElement('canvas');

  let img = new Image();

  img.crossOrigin = 'anonymous'; //设置图片跨域,不然获取不到图片元素

  img.src = imgUrl;

  img.onload = function () {

//很多操作要在onload 里面进行，不然找不到img元素

    canvas.height = img.height;

    canvas.width = img.width;

    let ctx = canvas.getContext('2d');

    ctx.drawImage(this, 0, 0);

    // 绘制图片

    ctx.strokeStyle = '#FF0000'; //框颜色

    ctx.fillStyle = '#FF0000'; //文字颜色

    ctx.font = '24px Microsoft YaHei';//文字字体大小

    let target = JSON.parse(markInfo.target); //target传JSON格式

    // 画框

    ctx.beginPath();

    ctx.moveTo(target.x1, target.y1);

    ctx.lineTo(target.x2, target.y1);

    ctx.lineTo(target.x2, target.y2);

    ctx.lineTo(target.x1, target.y2);

    ctx.closePath();

    ctx.stroke();

    // 文字

    ctx.fillText(markInfo.text, target.x2, target.y2);

    if (isBase64) {

      var base64 = canvas.toDataURL('image/png');

      callback(base64);

    } else {

      callback(canvas);

    }

    // return canvas

  };

}