html2canvas image issue on firefox While working fine on chrome

Question

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.

When facing this kind of problems and you come here about it, it is required that you give enough code so that we can reproduce the problem, along with removing all the unnecessary parts. This second point is important for you too, in order to clearly identify where the culprit is. e.g here it seems to be only the arrow, so try to remove everything else apart this arrow, and then show the the markup of this arrow. But a first step in your case, try updating your version of html2canvas. https://github.com/niklasvh/html2canvas/releases — Kaiido, May 14 '18 at 06:02
updated html2canvas still gertting same issue and about code it's too long where am genereating charts do you have any idea how may I find out issue where it's causing problem? — Aneeq Azam Khan, May 14 '18 at 06:17

score 1 · Accepted Answer · answered Oct 03 '18 at 04:24

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.

answered Oct 03 '18 at 04:24

Aneeq Azam Khan

992
1
10
23

score 1 · Answer 2 · answered Oct 16 '22 at 21:47

As a rare edge case, for any fancy folks that are positioning the container absolute off screen, make sure its not too far right or left. I had something ridiculous like right: 1000000px;. I put it to 9999 and it worked fine. No need to save as jpg or anything like that.

html2canvas image issue on firefox While working fine on chrome

2 Answers2

Linked