前端利用原生canvas生成图片

jsPao

已于 2023-11-16 17:26:28 修改

阅读量224

点赞数

文章标签：前端 javascript 开发语言

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

本文链接：https://blog.csdn.net/array__/article/details/134442627

版权

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

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