HTML5 Canvas toDataURL返回空白

  • Z时代
  • 2024-01-10
  • 分类：问答

我想上传图像文件，将它们绘制到画布中，进行更改并将其保存在数据库中。我尝试测试画布图像（Pic）返回的base64值，该值为空白。但是，当我将canvas（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);
  }
}

回答：

我的直觉说，所有内容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。

以上是 HTML5 Canvas toDataURL返回空白 的全部内容， 来源链接： utcz.com/qa/430899.html

回到顶部