博主在最近的工作中遇到了这么一个问题：将 HTML 页面中渲染的内容保存为图片文件或 base64 字节流。于是博主便开始如下探索：
- 首先博主从同事那里打听到了一个 js 库
html2canvas.min.js，该库可将 HTML 转 Canvas 同时可用以获取 canvas 内容的字节流。 - 上述 js 库的发现，使获取字节流的需求得到了解决，但是将内容保存为图片的需求还没解决。于是博主又在浏览器上进行了一顿猛如虎的查询，找了另外一个 js 库
canvas2image.js，这个库的发现，成功解决了博主另一个需求。
博主与需求的故事到此结束，下面就是激动人心的时刻：上代码！！！
demo.html
<!DOCTYPE html>
<html><head><title></title><meta charset="UTF-8"><script type="text/javascript" src="html2canvas.min.js"></script><script type="text/javascript" src="canvas2image.js"></script><style type="text/css">/*将图片在窗体可见区外进行渲染*/.canvasDemo {width: 1920px;height: 1080px;background: url("S1.jpg");background-size: 1920px 1080px;position: absolute;top: -30000px;left: -30000px;}.marker {width: 30px;height: 30px;background-color: blue;position: absolute;top: 50px;left: 50px;}#cvs{position: absolute;top: -30000px;left: -30000px;}</style>
</head><body style="overflow: hidden;"><!-- HTML 容器 --><div class="canvasDemo" id="screenImg"><!-- 在容器中做个小标记，以示改插件可用于带图片背景和HTML标签样式的HTML到canvas的转换 --><div class="marker"></div></div><!-- 定义一个canvas容器 --><canvas width="1920" height="1080" id="cvs"></canvas><script type="text/javascript">// 将 canvas 转为 base64 字节码html2canvas(document.getElementById("screenImg")).then(function(canvas) {// 将渲染出来的图片显示在页面中document.body.appendChild(canvas);// 打印 canvas 内容的 base64 字节流console.log(canvas.toDataURL());});// 将转换完成的 HTML 渲染至指定 canvas 标签中并将其保存 canvas 为图片var canvasDom = document.getElementById('cvs');html2canvas(document.getElementById("screenImg"),{canvas:canvasDom}).then(function(canvas) {Canvas2Image.saveAsImage(canvasDom, "1920", "1080", "png");});</script>
</body></html>
效果图
示例代码粘贴完事，收工！下~ ~ ~ 班 ~ ~ ~ 是不可能下班的！工作使我快乐，我也要996，也要ICU
PS：
- 上述样例需在 web 服务器中进行发布测试，否则会因跨域问题导致失败。
- 浏览器下载下来的图片文件是没有文件格式后缀的
- canvas2image Github地址：https://github.com/hongru/canvas2image
- html2canvas Github地址：https://github.com/niklasvh/html2canvas/
- html2canvas 官网：http://html2canvas.hertzen.com/
- 代码下载：https://download.csdn.net/download/supreme_sir/11149920
