Firefox上的html2canvas图像问题虽然在chrome上工作正常答案

【问题标题】：html2canvas image issue on firefox While working fine on chromeFirefox上的html2canvas图像问题虽然在chrome上工作正常
【发布时间】：2018-10-03 12:24:58
【问题描述】：

我正在使用 html2canvas.js，它在 chrome 中可以 100% 正常工作，而在 Firefox 中，它没有显示一些 div，它们是我的目标 div 内的箭头，我只是将图像转换为 base64 并通过 ajax 将其发送到我保存图像的服务器和生成pdf。在 chrome 图像和 pdf 上都与目标 div 匹配 100%，而当我尝试使用 mozilla 时，它没有在图像中呈现一些箭头这是我的 js 代码

 html2canvas(div, {
    canvas: canvas,
    height: useWidth,
    width: useHeight,
    onrendered: function (canvas) {
       m_intSelectedProjectID = parseInt(m_intSelectedProjectID)
        var image = canvas.toDataURL("image/png");
        var l_strBase64 = image.replace('data:image/png;base64,', '');

        var name = 'test'
        $.ajax({
            type: "POST",
            url: "PTServiceRoutines.aspx/AjaxSaveImageFile",
            data: "{'buffer':'" + l_strBase64 + "','p_intSelectedProjectID':'" + m_intSelectedProjectID + "','p_strViewMode':'" + p_strViewMode +"'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: successAjaxSaveImageFile,
            failure: failureAjaxSaveImageFile,
            error: errorAjaxSaveImageFile
        });
        return false;
    }
});

我认为没有必要从服务器端显示代码，因为当我在 html 上绑定渲染图像时，即使此处缺少箭头，也分别从 chrome 和 firefox 上传图像。

【问题讨论】：

当遇到此类问题时，您来这里解决问题时，需要您提供足够的代码以便我们可以重现问题，同时删除所有不必要的部分。第二点对您也很重要，以便清楚地确定罪魁祸首在哪里。例如，这里似乎只有箭头，所以尝试删除除此箭头之外的所有其他内容，然后显示此箭头的标记。但在您的情况下，第一步是尝试更新您的 html2canvas 版本。 github.com/niklasvh/html2canvas/releases
更新的 html2canvas 仍然出现同样的问题，而且关于代码太长了在哪里生成图表你知道我如何找出导致问题的问题吗？

标签： css png html2canvas

【解决方案1】：

我使用 .png 扩展名保存图像，但在 Firefox 中遇到问题，而不是使用 .jpg 扩展名保存它们，它解决了我的问题。

【讨论】：