php - 将base64图像从php查询传递到html5画布

Question

我使用 PHP 中的查询从数据库中获取 base64 字符串。这个字符串代表一个图像。

我想在 html5 画布中显示此图像，但它不起作用。

该字符串存储在 $DBimage 中。然后我使用：

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

base64 仍然是一个字符串，所以你需要引用它。另外，您在字符串中使用 document.write 吗？我假设你试图附加它。

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);}

更新：

$DBImage根据this的外观，有换行符。这会导致 javascript 错误。（Javascript 中的字符串中不允许有新行），这应该可以解决它。

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);}

Answer 2

此代码有效

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var image = new Image();

image.src = "data:image/png;base64, /9j/4AAQSkZJRgAB...etc";
image.onload = function() {
ctx.drawImage(image, 0, 0);
}

但

var complex = "<?php echo $DBimage; ?>";
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var image = new Image();

image.src = "data:image/png;base64, /9j/4AAQSkZJRgAB...etc";
image.onload = function() {
ctx.drawImage(image, 0, 0);
}

不工作。因此，只有从 php 添加回声才能使画布不显示任何内容。