1

重複の可能性：
データURLからキャンバスに画像を描画する

これはJavaScriptコードです...

var imageObj = new Image();
var context = this.canvas.getContext("2d"); 
imageObj.onload = function() {
     context.drawImage(imageObj, 69, 50);
};
imageObj.src = "blackhat.jpg"

上記のコードは、画像オブジェクトのソースをサーバーのベースディレクトリ内の画像ファイルの場所に設定しています。私の質問は：-

画像オブジェクトのソースをbase64でエンコードされた文字列またはDataURI文字列に設定するにはどうすればよいですか？

例：datauri string = 

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAYAAADL1t+KAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADs.....................

エンコードされた文字列をそのまま設定した場合：-

imageObj.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAYAAADL1t+KAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADs....................."

動作しません。

4

1 に答える 1

0

代わりにBlobコンストラクターの使用を検討してください。そうすれば、AJAXを介して画像を読み込むのが簡単になり、画像をインラインにする必要がなくなります。これがここで問題になる可能性があります（大きすぎる可能性がありますか？）。また、base64でエンコードする必要はありません。

于 2012-09-30T20:22:44.060 に答える