html2canvas 将HTML内容写入Canvas生成图片

1. 下载安装：

npm install --save html2canvas
yarn add html2canvas

2. 引入使用

import html2canvas from 'html2canvas';


html2canvas(document.getElementById("box")).then(function(canvas) {
	// 获取到 canvas 后 使用 canvas 自身带的 toDataURL 方法 将生成的canvas 转换成 base64
	let base64 = canvas.toDataURL();
	downloadFileByBase64(base64,'图片');
});

// 将 base64 转换成图片，并下载下来
function downloadFileByBase64(base64, name) {
  var myBlob = dataURLtoBlob(base64);
  var myUrl = URL.createObjectURL(myBlob);
  downloadFile(myUrl, name);
}

function dataURLtoBlob(dataurl) {
  var arr = dataurl.split(","),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

function downloadFile(url, name = "图片") {
  var a = document.createElement("a");
  a.setAttribute("href", url);
  a.setAttribute("download", name);
  a.setAttribute("target", "_blank");
  let clickEvent = document.createEvent("MouseEvents");
  clickEvent.initEvent("click", true, true);
  a.dispatchEvent(clickEvent);
}

案例

<!-- html --> 
<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

//js
html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

更多属性详见：
官网：http://html2canvas.hertzen.com/getting-started

如遇到无法解决的坑，参考大佬操作
前端js保存页面为图片下载到本地的坑 http://caibaojian.com/h5-download.html