Question

I’m getting a base64 string from the database with a query in PHP. This string represents an image.

I want to display this image in the html5 canvas, but it just won’t work.

The string is stored in $DBimage. I then use:

var complex = <?php echo ($DBimage); ?>;
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
image.src = "data:image/  png;base64, document.write(complex)";
ctx.drawImage(image, 0, 0);}

Answer 1

The base64 is still a string, so you need to quote it. Also, you’re using document.write in a string? I’m assuming your trying to append it.

var complex = "<?php echo $DBimage; ?>";
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
image.src = "data:image/png;base64," + complex;
ctx.drawImage(image, 0, 0);}

Update:

There are newlines in $DBImage based on the look of this. This makes a javascript error. (New lines are not permitted in strings in Javascript), This should fix it.

var complex = "<?php echo str_replace("\n", "", $DBimage); ?>";
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
image.src = "data:image/png;base64," + complex;
ctx.drawImage(image, 0, 0);}