3

10 の異なる画像で構成されるキャンバス コンポジションがあります。これらの画像は、座標のリストを含む xml ファイルからデータを取得し、キャンバスに配置されるときに各画像のマスクを作成します。

次に、キャンバスを画像として保存しようとします

var image = new Image();
image.src = canvas.toDataURL("image/png");

ただし、画像は完全に空白になり、エラーはありません。表示される画像を調べると、src は次のとおりです。

   data:image/png;base64,iVBORw0KGgoAAAANS...ICxjqAABQ+0HCBAgQIBAWMQ4CcQAAAAAElFTkSuQmCC (shortened)

ファイルが異なるドメインからプルされたときのセキュリティの問題、汚染されたキャンバスなどについてすべて読みましたが、エラーは発生せず、使用するものはすべてローカルでホストされています（http://localhost）

これをデバッグする方法についてのアイデアはありますか?

編集:これをブラウザに画像として表示することにもっと興味があり、後で保存することを心配しています。しかし、それをローカルストレージに「保存」してから表示することができれば、それでうまくいきません。

4

2 に答える 2

2

キャンバスが描画された後に toDataUrl を呼び出していますか? 新しい画像を DOM にアタッチする場所はどこでも、適切な幅/高さ/不透明度で表示されますか?

于 2012-11-06T18:52:19.790 に答える
0

画像のアップロードを処理する関数はありますか?

https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Example.3a.c2.a0Showing_thumbnails_of_user-selected_images

function FileUpload(img, file) {
  var reader = new FileReader();  
  this.ctrl = createThrobber(img);
  var xhr = new XMLHttpRequest();
  this.xhr = xhr;

  var self = this;
  this.xhr.upload.addEventListener("progress", function(e) {
        if (e.lengthComputable) {
          var percentage = Math.round((e.loaded * 100) / e.total);
          self.ctrl.update(percentage);
        }
      }, false);

  xhr.upload.addEventListener("load", function(e){
          self.ctrl.update(100);
          var canvas = self.ctrl.ctx.canvas;
          canvas.parentNode.removeChild(canvas);
      }, false);
  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
  reader.onload = function(evt) {
    xhr.sendAsBinary(evt.target.result);
  };
  reader.readAsBinaryString(file);
}

于 2012-11-06T18:05:49.930 に答える