Latest version of HTML2CANVAS does not work in Chrome, Firefox

Question

I have updated html2canvas from 0.4 to 1.0.0 and I used the function below to take a screenshot.

The function and html2canvas does not work and I got the error below.

How do I solve it?

icefaces-compat.js.jsf?ln=ice.compat&v=3_3_0_130416:1 2ms html2canvas: onrendered option is deprecated, html2canvas returns a Promise with the canvas as the value

function screenshotChrome() {
    var target = $(document.body);
    html2canvas(target, {
        useCORS: true,
        onrendered: function (canvas) {
            canvas.UniversalToBlob(function (blob) {
                    saveAs(blob, "aScreenshot.png");
                },
                "image/png", 1);
        }
    });
}

As the warning suggests...`html2canvas()` now returns a promise. For example `html2canvas(...).then(canvas => ...)` — Adriano Repetti, Apr 26 '18 at 13:58
guessing people do not search error messages anymore https://github.com/MrRio/jsPDF/issues/1610 — epascarello, Apr 26 '18 at 13:58

score 7 · Answer 1 · answered Apr 26 '18 at 13:58

7

I'm not familiar with the library, but the error says that this version uses a Promise instead of using the onrendered callback option. Therefore, it is (probably) used like:

html2canvas(target, {
  useCORS: true
})
  .then(function (canvas) {
    canvas.UniversalToBlob(function (blob) {
      saveAs(blob, "aScreenshot.png");
    }, "image/png", 1);
  })
  .catch(function (err) { console.log(err); });

answered Apr 26 '18 at 13:58

Jonathan Lam

16,831
17
68
94

I think your suggestion is a good solution, but I cannot load the picture for screenshot. Event {isTrusted: true, type: "error", target: img, currentTarget: null, eventPhase: 0, …} bubbles : false cancelBubble : false cancelable : false composed : false currentTarget : null defaultPrevented : false eventPhase : 0 isTrusted : true path : (6) [img, form#mainForm.iceFrm, body#_t4, html, document, undefined] returnValue : true srcElement : img target : img timeStamp : 52486.20000004303 type : "error" __proto__ : Event – Yamur Apr 26 '18 at 14:14
@Yamur Unfortunately, I don't know much about the library. If you post the entire event (include the Event prototype at the end and expand the ellipses) in your question it might provide a little context and I'll try to help, but no guarentees. – Jonathan Lam Apr 26 '18 at 14:18
the error through catch is Chrome error is: TypeError: canvas.UniversalToBlob is not a function – Yamur Apr 26 '18 at 14:20
after I change to .toBlob start to work properly, but the problem is the picture quite not good. – Yamur Apr 26 '18 at 14:29
What do you think the problem with CSS to not to show the proper design? – Yamur Apr 27 '18 at 12:17
@Yamur: Again, I only came here to answer the question you asked. You have a follow-up question that is outside the scope of my knowledge and this question; feel free to open a new question on that. But I only was here to solve you with this specific problem, and (I believe) that problem was solved. Consider accepting this answer and asking a new question. – Jonathan Lam Apr 27 '18 at 14:26

Latest version of HTML2CANVAS does not work in Chrome, Firefox

1 Answers1