canvas：html2canvas的使用

安装

npm install html2canvas

基本使用

import html2canvas from 'html2canvas'

export default () => {
    const savePic = () => {
        const targetDom = document.getElemetById('picture');
        html2canvas(targetDom, {
            // 可配置项放在这里
            scale: 1, // 渲染的比例
        })
            .then(canvas => canvas.toDataURL('image/png', 1.0))
            .then(src => image.src = src)
            .catch(err => console.log(err.message))
    }
    
    return (
        <div id='picture'>
            <img src='xxx'/>
            <img src='yyy'/>
        </div>
    )
}

如何提高图片清晰度

方法一：添加html2canvas配置项

html2canvas(targetDom, {
    // 可配置项放在这里
    scale: 4, // 提高渲染的比例
    dpi: window.devicePixelRatio // 分辨率
})

window.devicePixelRatio：显示设备的物理像素分辨率与css像素分辨率之比
值为 1.25 表示 1.25 × 96 dpi

方法二：调整canvas.toDataURL()参数

canvas => canvas.toDataURL('image/png', 1.0)

toDataURL(type, encoderOptions)方法的两个参数：

• type：‘image/jpeg’，‘image/png’，‘image/webp’
• encoderOptions：转换为base64编码后图片的质量，取值范围为0~1

参考

HTML2CANVAS 中文文档