给HTML拍个照（如何将html元素转成图片）

本文主要介绍一款好用的库，如何将HTML生成图片。

1、简述

最近在做的项目中，需要将界面转换成模板保存下来，本来想使用自适应布局完成，但是页面较复杂，模板较多，生成的模板使用过多的HTML标签，于是想着能否将HTML生成图片，保存及获取的时候直接使用图片，于是网上查了下，发现已经有人做好了轮子：html2canvas.js，直接拿来滚滚就好啦~

2、使用

安装

npm install html2canvas --save-dev

html转为canvas

html2canvas.js可将html元素渲染为 canvas，这里只需调用 html2canvas(element[, options]) 即可。

    html2canvas(document.body).then(function(canvas) {
        document.body.appendChild(canvas);
    });

canvas转image

基于原生canvas的 toDataURL 方法可以将 canvas 输出为data: URI类型的图片地址，再将该图片地址赋值给元素的src属性即可~

html2canvas($dom, {
    useCORS: true, // 【重要】开启跨域配置
    scale: 2, // canvas放大倍数，增加图片的清晰度
    logging: false // 是否开启日志
}).then(canvas => {
    let imageSrc = canvas.toDataURL("image/png");
})

也可以使用第三方库Canvas2Image.js，调用其 convertToJPEG 方法即可。它也是基于canvas.toDataURL的封装，相比原生的canvas API对于转为图片的功能上考虑更为具体适合在项目中使用。

html2canvas($dom).then(canvas => {
    let imageSrc = canvas2Image.convertToJPEG(canvas, 100, 100).getAttribute('src');
})

一个坑

canvas对于图片资源的请求有 同源限制，如果画布中包含跨域的图片资源则会污染画布，造成含有图片的部分一片空白，因此必须使用同源的图片哦~