// 图片添加标注并转为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
};
}