html2canvas的使用

html2canvas是什么

html2canvas 可以在浏览器端直接对整个或部分页面进行截屏。脚本通过读取DOM并将不同的样式应用到这些元素上，从而将当页面渲染成一个Canvas图片。

html2canvas怎么用

// element：要绘图的dom节点；
// options：可选参数；
html2canvas(element, options).then(function(canvas) {
    document.body.appendChild(canvas);
});

html2canvas的例子

1. 首先定义两个使用到的方法

/* 根据window.devicePixelRatio获取像素比 */
function DPR() {
    if (window.devicePixelRatio && window.devicePixelRatio > 1) {
        return window.devicePixelRatio;
    }
    return 1;
}
/* 将传入值转为整数 */
function parseValue(value) {
    return parseInt(value, 10);
}

devicePixelRatio属性是干嘛的
window的该属性能够获取到当前显示设备物理分辨率与css的像素分辨率之间的比率。简单说就是告诉浏览器应该使用多少个物理像素来会在单个css像素。

2.绘制canvas

async function drawCanvas(selector) {
    // 获取想要转换的 DOM 节点
    const dom = document.querySelector(selector);
    const box = window.getComputedStyle(dom);
    
    // DOM 节点计算后宽高
    const width = parseValue(box.width);
    const height = parseValue(box.height);
    
    // 获取像素比
    const scaleBy = DPR();
    
    // 创建自定义 canvas 元素
    let canvas = document.createElement('canvas');
    
    // 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
    canvas.width = width * scaleBy;
    canvas.height = height * scaleBy;
    
    // 设定 canvas css宽高为 DOM 节点宽高
    canvas.style.width = `${width}px`;
    canvas.style.height = `${height}px`;
    
    // 获取画笔
    const context = canvas.getContext('2d');
    
    // 将所有绘制内容放大像素比倍
    context.scale(scaleBy, scaleBy);
    let x = width;
    let y = height;
    
    return await html2canvas(dom, {
        useCORS:true // 配置这个可以用cors跨域使用服务器图片
    }).then(function() {
        // 绘制的图片就是canvas；在这里可以对canvas进行你所需要的操作
    });
}

关于在配置项中设置跨域
useCORS和allowTaint两种都可以设置跨域；
为什么要设置跨域：我们图片一般都是放到静态资源服务器上的，资源服务器地址一般和项目地址是不一样的；虽然图片可以在页面上显示，但是用canvas绘图时却绘制不出来；

3.清晰度优化（canvas图片转base64显示）

经过上面的步骤就可以绘制出canvas图片了，但是查看实际图片时会发现，图片部分绘制是没问题的，但是文字部分就模糊了；因此还需对绘制出来的canvas做进一步处理

/* 图片转base64格式 */
function convertCanvasToImage(canvas, x, y) {
    let image = new Image();

    image.crossOrigin = 'anonymous';
    image.width = x;
    image.height = y;
    image.style="display: block;";
    image.src = canvas.toDataURL('image/png');
    return image
}

4.其他

canvas绘制图片的dom元素部分最好定义宽高，不然单纯靠子元素撑开的话，绘图的时候可能会绘制不完整

参考文档

html2canvas的官方地址：html2canvas.hertzen.com
devicePixelRatio的文档地址：//developer.mozilla.org/zh-CN/docs/Web/API/Window/devicePixelRatio