html2canvas image issue on firefox While working fine on chrome

问题

I am using html2canvas.js and it's working 100% fine in chrome while in firefox it's not showing some div's which are arrows inside my target div am just converting image to base64 and sending it through ajax to server where I save image and generate pdf. On chrome image and pdf both match 100% with target div while when I try with mozilla it's not not rendering some arrows in image here is my js code

 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;
    }
});

I don't think that there is any need to show code from server side cause when I bind rendered image here on html even that has missing arrows here am uploading images from chrome and firefox respectively.

回答1:

I was saving images with .png extension and was getting issue in firefox than I saved them with .jpg extension and it solved my problem.

来源：https://stackoverflow.com/questions/50323795/html2canvas-image-issue-on-firefox-while-working-fine-on-chrome