1

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

2 に答える 2

2

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);}
于 2012-11-04T12:33:10.330 に答える
0

このコードは機能します

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 からのエコーを追加するだけで、キャンバスに何も表示されなくなります。

于 2012-11-04T13:49:35.417 に答える