javascript - キャンバスへの画像のURLと保存

Question

URL からキャンバスに画像を読み込んで、保存する画像を表示しようとしています。キャンバスに画像を表示できますが、画像をbase64文字列として表示しようとすると空白になります。これまでのところ、最後の部分で助けが必要なだけです。

var canvas = document.getElementById('myCanvas'),
    context = canvas.getContext('2d'),
    imageObj = new Image();

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

imageObj.src = 'http://3.bp.blogspot.com/-4NP3xwj-ZMI/UXU8RT1k02I/AAAAAAAACEU/88knXDu2MeQ/s72-c/music3g1.JPG';

var dataURL = canvas.toDataURL();
document.getElementById('canvasImg').src = dataURL;

Answer 1

さて、知っておくべきことがいくつかあります。

1. HTML が存在するドメイン外のソースからキャンバスに画像を描画すると、キャンバスにフラグがdirty立てられます。これにより、.toDataURL()機能を使用できなくなります。これは主にセキュリティの問題です。

2. var dataURL = canvas.toDataURL(); document.getElementById('canvasImg').src = dataURL;イメージが実際にキャンバスに描画される前に呼び出されます。データ URL を取得し、画像の onload 関数内で src を設定する必要があります。