最近遇到了将图片传递给后台,生成excel文件下载的业务,网络上都是利用html2canvas.js的方案去实现的,个人特地记录一下。
function renderHTMLToCanvas() {
// 获取dom
const canvas = document.getElementsByTagName('canvas')[0];
// 转化为2d对象
const ctx = canvas.getContext('2d');
// 获取显示的相关参数
const rect = canvas.getBoundingClientRect();
// 用2d对象去生成base64图片
ctx.drawImage(canvas, rect.left, rect.top, rect.width, rect.height, 0, 0, rect.width, rect.height);
// 返回生成的图片数据 URL
return canvas.toDataURL('image/png');
}
有复合图形的业务,可以看这个链接