本章介绍一下如何把HTML转成图片，主要思路是用html2canvas这个插件生成把页面生成canvas，然后用canvas的toDataURL生成图片。
方程式
DOM + html2canvas => DOM=canvas + toDataURL("图片格式") = imgUrl(base64)
例子
// DOM
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello world!</h4>
</div>
// JS
<script>
html2canvas(document.querySelector("#capture")).then(data => {
// data 就是生成的canvas
document.body.appendChild(canvas);
// canvas 有个api方法toDataURL把canvas转成base64
const domImgUrl = canvas.toDataURL('image/png');
console.log(domImgUrl)
});
</script>
使用方式
html2canvas(DOM元素, 配置).then(canvas => {
console.log('转换成的canvas', canvas);
console.log('canvasToUrl', canvas.toDataURL('图片格式'));
})
例子
const body = document.querySelector('.demo');
html2canvas(body, {
useCORS: true,
logging: false,
x: 0,
y: window.pageYOffset, // 解决canvas截图有部分空白问题
})
.then(function(canvas) {
const demoUrl = canvas.toDataURL('image/png');
console.log(demoUrl)
})
.catch(e => {
console.error('error--> ', e);
});
}
常用配置
useCORS: true/false 一般用来解决图片跨域true(允许)false(拒绝)
logging: true/false 生成canvas的日志信息，上线前设为false
x: x轴偏移量
y: y轴偏移量
height: canvas的高度
width: canvas的宽度
技巧
- 可以通过window.screen.height来控制图片是否在保存后全屏显示
- 图片跨域可以用
useCORS: true解决
结束
用useCORS解决跨域只是一种方法还是其他方法可以尝试，总体来说，初级使用html2canvas可以满足常用需求。具体细节需要调试，如果页面中用了echarts会出现整体空白的问题。
有问题请评论，看到会回复。
