將base64圖像從php查詢傳遞到html5 canvas

我從數據庫中獲取base64字符串，並在PHP中使用查詢。該字符串表示圖像。將base64圖像從php查詢傳遞到html5 canvas

我想在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);}

來源

2012-11-04 user1786301

不編輯回答顯示結果，而不是評論 –

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

來源

2012-11-04 12:33:10 Nathaniel

謝謝，字符串現在被加載到複雜，但畫布保持空。是否有任何更改字符串尚未加載尚未頁面之前。 – user1786301

PHP在頁面實際發送前全部運行，而JavaScript在頁面加載完成後運行。你能向我們展示更多細節嗎？ – Nathaniel

@ user1786301也許你需要你的最後一行是'image.onload = function（）{ctx.drawImage（image，0，0）}'？這確保'image'準備好在調用'ctx.drawImage'之前繪製。 – apsillers

此代碼的工作

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的echo就可以讓畫布不顯示任何內容。

來源

2012-11-04 13:49:35 user1786301

我現在知道發生了什麼問題。當我用變量'complex'傳遞字符串時，字符串被分解成單獨的行。我需要字符串爲1行。 – user1786301

將base64圖像從php查詢傳遞到html5 canvas

回答

相關問題