html2canvas not rendering images with base64 src, call not coming back to "onrendered"

[manosymbian1]

html2canvsas not rendering images given with base64 src, call is not coming back to "onrendered"
function. Kindly help

1283ms html2canvas: Document cloned html2canvas.js:1487
3936ms html2canvas: Initialized CanvasRenderer with size 601 x 965 html2canvas.js:1487
3937ms html2canvas: Starting NodeParser html2canvas.js:1487
4014ms html2canvas: Fetched nodes, total: 10 html2canvas.js:1487
4015ms html2canvas: Calculate overflow clips html2canvas.js:1487
4034ms html2canvas: Start fetching images html2canvas.js:1487
4044ms html2canvas: Added image #1 data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pL html2canvas.js:1487
4047ms html2canvas: Added image #2 data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aH html2canvas.js:1487
4051ms html2canvas: Finished searching images html2canvas.js:1487
4052ms html2canvas: Succesfully loaded image #1
ImageContainer {src: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD…AKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/2Q==", image: img, tainted: null, promise: h}
html2canvas.js:1487
4056ms html2canvas: Succesfully loaded image #2
ImageContainer {src: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD…4PXOaUMB0/GlrcdiYtkcc/WkzjqfwqMPxzxRvAz3oSCx//9k=", image: img, tainted: null, promise: h}
html2canvas.js:1487
4059ms html2canvas: Images loaded, starting parsing html2canvas.js:1487
4060ms html2canvas: Creating stacking contexts html2canvas.js:1487
4064ms html2canvas: Sorting stacking contexts html2canvas.js:1487
4066ms html2canvas: Render queue created with 9 items html2canvas.js:1487
4104ms html2canvas: Finished rendering html2canvas.js:1487
4109ms html2canvas: Cropping canvas at: left: 28 top: 529 width: 545 height: 0 html2canvas.js:1487
4111ms html2canvas: Resulting crop with width 545 and height 0 with x 28 and y 529

[mc-suchecki]

Use the library like it was intended:

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

[manosymbian1]

 $("#photoSignBtn").click(function(){
                            var scrBase64;
                            var img = html2canvas($('#jointScr'), {
                                allowTaint: true,
                                logging:true,
                              onrendered: function(canvas) {
                                  scrBase64 = canvas.toDataURL("image/png");
                                  scrBase64 = scrBase64.split(",")[1];                                                 
                              }
                            });                                           
                        });

Kindly check if there is anything wrong..

[mc-suchecki]

There is, like I said, use Promise (then callback) instead of onrendered callback. Also, don't forget to include Promise polyfill in your project. You should close this issue, because there is nothing wrong with the library.

[manosymbian1]

can you send me the modified code that will work..
because without images I have made it work

[mc-suchecki]

Here you are:

$('#photoSignBtn').click(function () {
  var scrBase64;
  html2canvas(
    $('#jointScr'),
    {allowTaint: true, logging: true}
  ).then(
    function (canvas) {
      scrBase64 = canvas.toDataURL('image/png');
      scrBase64 = scrBase64.split(',')[1];
      console.log(scrBase64);
    }
  );
});

Please read the library documentation carefully.

[manosymbian1]

Hi, I have used the above still not working

[manosymbian1]

I`m not getting breakpoint in this code aft call "scrBase64 = canvas.toDataURL('image/png')"
console.log is also not printing anything

[manosymbian1]

I`m using base64 data as src for img tag

[igoreliasm]

I'm have the same problem with base64 inside src img div that will render. The image inside src is not display on canvas