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

Question

我正在使用 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 上传图像。

标签： csspnghtml2canvas

Answer 1

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