html2canvas icon indicating copy to clipboard operation
html2canvas copied to clipboard

Image is not generated by html2canvas in firefox without giving any errors

Open po95-backup opened this issue 5 years ago • 10 comments

Here is my code of generating a image on chrome, firefox and other browsers. When i click on my function to generate a image in firefox, the browser holds the request and after sometime it prints some outputs without downloading the image

var node = document.querySelector("#pop-up-table");
            html2canvas(node, {}).then(function(canvas){
                var userAgent = navigator.userAgent;
                var a = document.createElement('a');
                if(userAgent.search('Chrome') >= 0){
                    a.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                    a.download = 'table.png';
                } else {
                    a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
                    a.download = 'table.jpg';
                }
                a.click();
            });

I modified the code slightly for firefox (will generate jpg for firefox and other browsers) other than chrome because of a claim on a comment in this post (here)

16df332f834 0ms Starting document clone                                   html2canvas.min.js:20:84099
16df332f834 3798ms Document cloned, using computed rendering              html2canvas.min.js:20:84099
16df332f834 3799ms Starting DOM parsing                                   html2canvas.min.js:20:84099
16df332f834 10556ms Starting renderer                                     html2canvas.min.js:20:84099
16df332f834 10557ms Canvas renderer initialized 
(770x1184 at 197,96.60000610351562)with scale 1                           html2canvas.min.js:20:84099
16df332f834 27498ms Finished rendering                                    html2canvas.min.js:20:84099

Have seen these solutions below but it didn't bring any good:

  • https://github.com/niklasvh/html2canvas/issues/491
  • https://github.com/niklasvh/html2canvas/issues/95#issuecomment-477503221
  • https://stackoverflow.com/questions/26604942/cant-draw-the-contents-of-a-div-onto-a-canvas-using-html2canvas-without-a-timeou

NB: I call this code snippet in a setTimeout() function and increasing time didn't help

po95-backup avatar Oct 22 '19 13:10 po95-backup

same

drxcheng avatar Oct 24 '19 21:10 drxcheng

same problem facing

praveenkumarhopscotch avatar May 14 '20 08:05 praveenkumarhopscotch

same

swvv avatar May 30 '20 09:05 swvv

same~ but is sometimes in mobile

UserHuRu avatar Aug 03 '20 07:08 UserHuRu

me too

gillespieza avatar Aug 27 '20 12:08 gillespieza

same problem. I tried using 'image/jpeg', but still not working for me. image

JordanBoulan avatar Apr 14 '21 20:04 JordanBoulan

same to me

chua1989 avatar Sep 06 '22 09:09 chua1989

Facing similar issue on ios (all browsers) but working fine on every other device. Anyone found a solution yet?

sharmavj89 avatar Apr 19 '23 10:04 sharmavj89