0

PhoneGap を使用して iPhone 用のアプリケーションを開発しており、JavaScript でコーディングしています。私がしていることは、Web から画像をダウンロードし、それを Base64 にエンコードして、以下を使用してデータベースに保存することです。

dataURL = canvas.toDataURL("image/png");

保存された画像は次の形式です。

data:image/jpeg;base64,ENCODING...

ここで、ユーザーがオフラインのときに、データベースから画像を取得して HTML5 キャンバス アイテムに表示する必要があります。そのための次のコードがあります。

var canvas = document.getElementById("draw_area");
var context = canvas.getContext('2d');
var myImage = new Image();
myImage.src = dataURL;

myImage.onload = function (){
    context.drawImage (myImage, 0, 0);        
};

しかし、srcがデータベースから取得した正確なbase64エンコーディングであることを確認しても、空のキャンバスが表示されます。デコードしてから画像を表示するなど、最初に何か他のことをする必要がありますか? はいの場合、どのように実装しますか?

4

3 に答える 3

1

これは、次のように簡単に実行できます。

<img id="company_logo"/>
<script type="text/javascript" > 
document.getElementById("company_logo").src="data:image/png;base64,"+base64String;
</script>
于 2012-08-06T12:16:39.693 に答える
-1

あなたのコードをベースとして使用して、私はq'n'dサンプルを一緒にハッキングしました。これは機能しましたが、最初にWebサーバー上にあり（「file：/// ...」がない）、同じドメイン内にある場合にのみ機能します。そうでない場合は、を呼び出すときにセキュリティエラーがスローcontext.toDataURL()されます。このSO投稿
を参照してください。

したがって、最初にスクリプトをtry ... catchでラップして、エラーがスローされるかどうかを確認する必要があります。

編集：これがハッキングされたバージョンです（サーバーに配置し、その横に「green.png」を配置します）：

<html>
<body>
<img id="image" src="green.png"/>
<canvas id="draw1" style="width:100px;height:100px;border:1px solid red"></canvas>
<canvas id="draw2" style="width:100px;height:100px;border:1px solid green"></canvas>
<script type="text/javascript">
var image = document.getElementById("image");
var canvas1 = document.getElementById("draw1");

canvas1.getContext("2d").drawImage(image,0,0);

var canvas2 = document.getElementById("draw2");

var dataUrl = canvas1.toDataURL();

var myImage = new Image();

myImage.src = dataUrl;

canvas2.getContext('2d').drawImage(myImage, 0, 0);            


</script>
</body>
</html>
于 2011-07-27T18:33:22.587 に答える