如何使用dataURL导出带有drop-shadow投影外边框的div元素图片

• 当前导出逻辑指定捕获的是.webtoonImage元素，但drop-shadow滤镜规则定义在其父容器.container上，子元素本身不携带该样式，导出时自然无法渲染对应的边框效果
• 滤镜生成的阴影属于容器外部效果，若容器没有预留足够内边距，生成的画布会默认裁剪掉超出容器边界的阴影内容

方案1：直接导出带滤镜的父容器（推荐） #

调整导出逻辑的捕获目标为添加了滤镜的.container父容器，同时临时给父容器添加足够容纳阴影的内边距，避免阴影被裁剪，修改后代码如下：

function downloadWebtoonDesktop() {
    const container = document.querySelector(".container");
    // 临时添加内边距容纳阴影，导出后还原
    const originalPadding = container.style.padding;
    container.style.padding = "2px";
    
    // 若父容器内有不需要导出的元素，可临时隐藏，示例：
    // const hideEls = container.querySelectorAll(".other-element");
    // hideEls.forEach(el => el.style.display = "none");

    html2canvas(container, {
      useCORS: true, // 若容器内存在跨域图片需要开启
      scale: 2, // 可选，提高导出图片的清晰度
      allowTaint: true
    }).then(function(canvas) {
        // 还原原有样式
        container.style.padding = originalPadding;
        // hideEls.forEach(el => el.style.display = "");

        var dataURL = canvas.toDataURL("image/png");
        let downloadLink = document.createElement('a');
        downloadLink.setAttribute('download', 'DiamondWebtoonLayout-Episode-.png');
        let url = dataURL.replace(/^data:image\/png/,'data:application/octet-stream');
        downloadLink.setAttribute('href', url);
        downloadLink.click();
    });
}

方案2：将滤镜迁移到待导出的子元素 #

如果不需要导出父容器的其他内容，可直接将.container上的filter样式规则迁移到.webtoonImage的样式中，同时给.webtoonImage添加padding: 2px的样式避免阴影被裁剪，原有导出逻辑不需要做任何修改。

兼容性提示 #

如果当前使用的html2canvas版本低于1.0.0-rc.7，建议升级到最新稳定版，旧版本对多层CSS filter的支持存在缺陷，会导致阴影渲染异常。

内容的提问来源于stack exchange，提问作者mangadrawing.123