HTML5 Canvas toDataURL 返回空白

Question

我想上傳圖像文件，將它們繪制到畫布中，進行更改並將其保存在數據庫中。 我嘗試測試畫布圖像 ( Pic ) 返回的 base64 值，它是空白的。 但是，當我將畫布 ( Pic ) 附加到文檔時，我看到了結果。 我在這里做錯了什么？

function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object                
  for (var i = 0, f; f = files[i]; i++) {

    if (!f.type.match('image.*')) {
      continue;
    }
    // read contents of files asynchronously
    var reader = new FileReader();

    // Closure to capture the file information.
    reader.onload = (function(theFile) {
      return function(e) {

        var canvas = document.createElement("canvas");

        var datauri = event.target.result,
          ctx = canvas.getContext("2d"),
          img = new Image();

        img.onload = function() {

          canvas.width = width;
          canvas.height = height;
          ctx.drawImage(img, 0, 0, width, height);
        };
        img.src = datauri;
        var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

        document.body.appendChild(canvas); //picture gets uploaded                    

        // Generate the image data

        var Pic = canvas.toDataURL("image/png");

        console.log(Pic); // => returns base64 value which when tested equivalent to blank                              
        Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")

        // Sending image to Server
        $.ajax({
          // …
        });

      };
    })(f);
    reader.readAsDataURL(f);
  }
}

Answer 1

我的直覺是var imageData = …中的所有內容都應該進入img.onload函數。

這意味着，在相關部分，代碼變為：

img.onload = function() {
  canvas.width = width;
  canvas.height = height;
  ctx.drawImage(img, 0, 0, width, height);

  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

  document.body.appendChild(canvas); //picture gets uploaded                    

  // Generate the image data

  var Pic = canvas.toDataURL("image/png");

  console.log(Pic); // => returns base64 value which when tested equivalent to blank                              
  Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")

  // Sending image to Server
  $.ajax({
    // …
  });
};
img.src = datauri;

原因是這條線

ctx.drawImage(img, 0, 0, width, height);

加載圖像后正確執行。 但不幸的是，當這一行被執行時，你不會等待加載：

var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

以及所有后續行。

需要加載圖像才能在畫布上繪制它。 畫布需要包含加載的圖像才能調用getImageData 。

Answer 2

我找到了一個更好的解決方案來獲取base64代碼

而不是這一行：

var Pic = canvas.toDataURL("image/png");

用這個：

var Pic = canvas.toDataURL("image/png").split(',')[1];