html2canvas 生成图片偏移出现白边的解决方案

说明

最近开发时，遇到需要将 html 页面生成图片并下载的情况。因为之前就有接触过 html2canvas 这个工具库，所以就直接使用了。

一开始，只是先做功能的实现，也就没太在意。

但后边随着功能完善，开始测试时，发现每次截图时生成的图片都会有白边，而且白边的大小和位置会随着窗口的改变而出现较为明显的变动。

于是，在网上各种查找 html2canvas 处理白边的方案，并做了尝试，但很显然，都不能很好的解决，白边的问题依旧存在。

后来，在重新测试的时候，发觉白边问题的本质是目标内容出现了偏移，而且这个偏移跟窗口有一定的关系。

无奈，通过浏览器控制台，找到引用的源码文件（用 cdn 引入，可以在 source 中找到文件），对 html2canvas.js 文件中配置样式（defaultOptions）进行断点。

断点调试的过程中，发现其中 x 的配置值 left 的值，当窗口出现滚动条时，会出现相应的减量，使得生成的 canvas 会出现偏移的情况。

由此，解决的点就在于如何避开这个减量，进而避免 canvas 的偏移。

在这里，由于我个人只遇到了横向（x）上的偏移，所以就只对 x 的值进行处理。先是直接通过 window.innerWidth 获取窗口的宽度值，再减去目标元素的宽度，最后除以 2，得到两边的实际边距

源码

const generator = () => {
    const el = document.getElementById('code')
    html2canvas(el, {
        allowTaint: true,
        width: el.offsetWidth,
        height: el.offsetHeight,
        x: (window.innerWidth - 1000) / 2, // 因为我的目标元素是水平居中的，所以通过这种方式来获取真实的偏移量
    }).then(canvas => {
        var image = new Image()
        image.src = canvas.toDataURL("image/png")
        download(image.src)
    });
}

 

下边，附上下载的函数

const download = (url) => {
    if (url) {
        // 生成一个a元素
        let a = document.createElement('a')
        // 创建一个单击事件
        let event = new MouseEvent('click')
        // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
        a.download = name || Math.random().toString(16).substr(2, 8)
        // 将生成的URL设置为a.href属性
        a.href = url
        // 触发a的单击事件
        a.dispatchEvent(event)
    }
}