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

【问题标题】：Pass base64 image from php query to html5 canvas将base64图像从php查询传递到html5画布
【发布时间】：2012-11-05 07:09:31
【问题描述】：

我使用 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);}

【问题讨论】：

不要编辑答案以显示结果而不是评论

标签： php javascript html canvas

【解决方案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);}

更新：

基于this 的外观，$DBImage 中有换行符。这会导致 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);}

【讨论】：

谢谢，字符串现在被加载到 complex 中，但画布保持为空。在页面加载之前是否有任何更改尚未加载字符串。
PHP 在页面实际发送之前全部运行，而 JavaScript 在页面加载后运行。你能告诉我们更多细节吗？
@user1786301 也许你需要你的最后一行是image.onload = function() { ctx.drawImage(image, 0 ,0) }？这可确保在调用 ctx.drawImage 之前准备好绘制 image。
不幸的是无法正常工作。我做了一个小测试。 ;?> 然后在 js 中回显 $test，但这里画布也是空的。
image 只是来自document.createElement('img') 的图像元素吗？

【解决方案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 添加回声才能使画布不显示任何内容。

【讨论】：

我现在知道出了什么问题。当我传递带有变量“complex”的字符串时，该字符串被分解为单独的行。我需要字符串为 1 行。