前端利用原生canvas生成图片

最近遇到了将图片传递给后台，生成excel文件下载的业务，网络上都是利用html2canvas.js的方案去实现的，个人特地记录一下。 

function renderHTMLToCanvas(html) {  
  // 获取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');  
}