canvas + drawImage, toDataURL returns blank image

Question

The problem of genres when I am adding image to canvas (drawImage), when I draw a drawing with the other canvas methods I have no problems.

var ready;
ready = function() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var imageObj = new Image();

imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

imageObj.onload = function() {
  context.drawImage(imageObj, 69, 50);
};

var pngUrl = canvas.toDataURL();
console.log(pngUrl);
$('#client_avatar').val(pngUrl);

};

You should also add the jQuery tag to your question since you're using that library in your source code. — NewToJS, Jun 16 '17 at 00:27
use this line `imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';` aftere onload callback — owais, Jun 16 '17 at 00:28
You have to call toDataURL inside your image's `onload` handler. This handler will be called asynchronously (i.e after the execution of the current stream of js), and thus at the time you call `toDataURL`, nothing has been drawn on the canvas yet. See https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — Kaiido, Jun 16 '17 at 01:48
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Kaiido, Jun 16 '17 at 01:48

owais · Answer 1 · 2017-06-16T00:53:00.250

1

before setting source you must define onload otherwise it will not be able to call onload.

$(document).ready(function() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var imageObj = new Image();


    imageObj.onload = function() {
      context.drawImage(imageObj, 69, 50);
    };
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';


    var pngUrl = canvas.toDataURL();
    console.log(pngUrl);
//    $('#client_avatar').val(pngUrl);
$("#client_avatar").append("<img src='"+ pngUrl +"'>")

    });

Here is working jsbin link

edited Jun 16 '17 at 00:53

answered Jun 16 '17 at 00:30

owais

4,752
5
31
41

what is #client_avatar is it img tag or what ? – owais Jun 16 '17 at 00:39
#client_avatar is an input, with the save the photo in the database – Carlos Ignacio Gomez Maureira Jun 16 '17 at 00:42
Generate the image in base64 but this is still empty, [link](https://gist.github.com/CarlosIgnacioGo/4c28b85f88fb54234ce63fcea19ee0a0) – Carlos Ignacio Gomez Maureira Jun 16 '17 at 00:51
In the canvas it shows them correctly, but if you realize in the img tag in the src it shows you an empty image – Carlos Ignacio Gomez Maureira Jun 16 '17 at 00:58

score 0 · Accepted Answer · answered Jun 16 '17 at 02:00

$(document).ready(function() {
   var canvas = document.getElementById('canvas');
   var context = canvas.getContext('2d');
   var imageObj = new Image();

   imageObj.onload = function() {
      context.drawImage(imageObj, 0, 0, 200, 200);
      var pngUrl = canvas.toDataURL();
      console.log(pngUrl);
      $('#client_avatar').attr('src', pngUrl);
   };

   imageObj.crossOrigin = 'anonymous'; //not necessary, if image hosted on same server
   imageObj.src = 'https://i.imgur.com/Q6aZlme.jpg';
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="200" height="200"></canvas>
<img id="client_avatar">

^{apology for not giving any explanation}

ʜᴀᴠᴇ ꜰᴜɴ :)

canvas + drawImage, toDataURL returns blank image

2 Answers2