無法加載Base64字符串到畫布

我想從我的數據庫加載Base64字符串到畫布。無法加載Base64字符串到畫布

我從做相反的方法獲得了這個字符串：在畫布上繪製後，我將它保存到我的數據庫中。所以，現在我想把它加載到另一個畫布上。我已經嘗試了這個代碼，我在網上和其他地方在StackOverflow上找到了這個代碼，但它似乎不工作。

<script type="text/javascript"> 
    $(document).ready(function(){ 
    var canvas = document.getElementById("loading_canvas"); 
    var ctx = canvas.getContext("2d"); 

    var image = new Image(); 

    $.post('doodles/load', function(data) { 
     image.src = data; 
    }); 
    ctx.drawImage(image, 0, 0); 
    }); 
</script>

我用ajax調用從我的數據庫加載數據。

如果我alert()data var，它顯示編碼的Base64字符串。所以它並不是真的在那裏出錯......我最終只是空着的畫布。

任何人都知道我在這裏做錯了嗎？非常感謝！

來源

2011-06-17 cabaret

你可以console.log數據變種，並給我們正確的字符串？當它不應該或任何東西時，它是否有引號？ – 2011-06-17 13:50:56

讓我這樣做，只要我回家，我的火車剛到我的車站; D – cabaret 2011-06-17 13:51:54

嘗試圖像的加載事件後繪製圖像：

var image = new Image(); 
image.onload = function() { 
    ctx.drawImage(image, 0, 0); 
} 

$.post('doodles/load', function(data) { 
    image.src = data; 
});

的src需要有一個完整的數據網址，而不是隻是一堆的base64數據，因此仔細檢查過。示例（從Wikipedia）：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

來源

2011-06-17 13:51:34

如果你的數據是的base64數據-URI你應該將只有一條線，一切都運作良好。

<script type="text/javascript"> 
    $(document).ready(function(){ 
     var canvas = document.getElementById("loading_canvas"); 
     var ctx = canvas.getContext("2d"); 

     var image = new Image(); 

     $.post('doodles/load', function(data) { 
     image.src = data; 
     ctx.drawImage(image, 0, 0); 
    }); 
    }); 
</script>

來源

2012-05-22 09:15:04

無法加載Base64字符串到畫布

回答

相關問題