前端利用原生canvas生成图片

原创已于 2023-11-16 17:26:28 修改 · 371 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2023-11-16 15:22:21 首次发布

本文介绍了如何在JavaScript中利用HTML2Canvas.js库将HTML页面上的图片转换为Base64格式，以便于传输至后台生成Excel文件。特别提到了处理复合图形的方法。

最近遇到了将图片传递给后台，生成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');  
}

有复合图形的业务，可以看这个链接