html2canvas：纯SVG渲染正常，img标签内SVG显示异常

问题描述 #

纯SVG在浏览器中渲染正常，但通过img标签引用该SVG后，使用html2canvas生成截图时仅显示旗帜左上角部分，调整scale参数为1后仍无法解决。

相关代码 #

SVG文件内容 #

<svg width="100" xmlns="http://www.w3.org/2000/svg" id="flag-icons-ca" viewBox="0 0 640 480">
<path fill="#fff" d="M150.1 0h339.7v480H150z"/>
<path fill="#d52b1e"  d="M-19.7 0h169.8v480H-19.7zm509.5 0h169.8v480H489.9zM201 232l-13.3 4.4 61.4 54c4.7 13.7-1.6 17.8-5.6 25l66.6-8.4-1.6 67 13.9-.3-3.1-66.6 66.7 8c-4.1-8.7-7.8-13.3-4-27.2l61.3-51-10.7-4c-8.8-6.8 3.8-32.6 5.6-48.9 0 0-35.7 12.3-38 5.8l-9.2-17.5-32.6 35.8c-3.5.9-5-.5-5.9-3.5l15-74.8-23.8 13.4c-2 .9-4 .1-5.2-2.2l-23-46-23.6 47.8c-1.8 1.7-3.6 1.9-5 .7L264 130.8l13.7 74.1c-1.1 3-3.7 3.8-6.7 2.2l-31.2-35.3c-4 6.5-6.8 17.1-12.2 19.5-5.4 2.3-23.5-4.5-35.6-7 4.2 14.8 17 39.6 9 47.7z"/>
</svg>

img标签代码 #

<img width="100" src="{{generate_src()}}lfc/graphics/more/flags-4x3/test.svg"/>

渲染效果对比 #

• 浏览器正常渲染效果：
  
• html2canvas截图效果：
  

截图代码 #

window.takeScreenShot<?= $rand ?> = function () {
    html2canvas(document.getElementById("takeScreenShot<?= $rand ?>"), {
        scale: 2,
        dpi: 360,
        backgroundColor: null,
        width: document.getElementById('takeScreenShot<?= $rand ?>').offsetWidth,
        height: document.getElementById('takeScreenShot<?= $rand ?>').offsetHeight
    }).then(function (canvas) {
            var a = document.createElement('a');
            a.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
            a.download = 'fsf_<?= $rand ?>.png';
            a.click();
        }
    );
}

解决方案 #

方案1：内联SVG替代img引用 #

将SVG直接嵌入DOM中，而非通过img标签引用，html2canvas对DOM内的SVG支持更完善：

<div id="takeScreenShot<?= $rand ?>">
    <svg width="100" xmlns="http://www.w3.org/2000/svg" id="flag-icons-ca" viewBox="0 0 640 480">
    <path fill="#fff" d="M150.1 0h339.7v480H150z"/>
    <path fill="#d52b1e"  d="M-19.7 0h169.8v480H-19.7zm509.5 0h169.8v480H489.9zM201 232l-13.3 4.4 61.4 54c4.7 13.7-1.6 17.8-5.6 25l66.6-8.4-1.6 67 13.9-.3-3.1-66.6 66.7 8c-4.1-8.7-7.8-13.3-4-27.2l61.3-51-10.7-4c-8.8-6.8 3.8-32.6 5.6-48.9 0 0-35.7 12.3-38 5.8l-9.2-17.5-32.6 35.8c-3.5.9-5-.5-5.9-3.5l15-74.8-23.8 13.4c-2 .9-4 .1-5.2-2.2l-23-46-23.6 47.8c-1.8 1.7-3.6 1.9-5 .7L264 130.8l13.7 74.1c-1.1 3-3.7 3.8-6.7 2.2l-31.2-35.3c-4 6.5-6.8 17.1-12.2 19.5-5.4 2.3-23.5-4.5-35.6-7 4.2 14.8 17 39.6 9 47.7z"/>
    </svg>
</div>

方案2：调整html2canvas配置 #

移除手动指定的width和height参数，让html2canvas自动计算目标元素尺寸，同时若SVG来自跨域地址需开启跨域支持：

window.takeScreenShot<?= $rand ?> = function () {
    html2canvas(document.getElementById("takeScreenShot<?= $rand ?>"), {
        scale: 2,
        dpi: 360,
        backgroundColor: null,
        useCORS: true
    }).then(function (canvas) {
            var a = document.createElement('a');
            a.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
            a.download = 'fsf_<?= $rand ?>.png';
            a.click();
        }
    );
}

方案3：修正SVG尺寸属性 #

确保SVG的viewBox与img的宽高比例一致，当前SVGviewBox="0 0 640 480"比例为4:3，img可显式设置对应高度保证比例正确：

<img width="100" height="75" src="{{generate_src()}}lfc/graphics/more/flags-4x3/test.svg"/>

内容的提问来源于stack exchange，提问作者trinoweb