P5 拖放不加载

Question

我一直在尝试使用下面 P5 参考中解释的拖放方法来实现加载 canvas 功能。但是，在第一次将图像拖动到 canvas 时，图像将不会加载。第二次尝试将很好地加载图像。我尝试加载到 canvas.

的每个 'new' 图像都会发生这种情况

注释掉“.hide”时，您可以看到图像数据在第一次尝试时成功加载。我对如何纠正这个问题有点困惑。

感谢任何能给我指出正确方向的人。

index.html

<!DOCTYPE html>
<html>
  <head>    
      <script src="p5.js"></script>
      <script src="p5.dom.js"></script>
    <script src="sketch.js"></script>

  </head>
  <body>
  </body>
</html>

sketch.js

function setup() {
  // create canvas
  var c = createCanvas(710, 400);
  background(100);
  // Add an event for when a file is dropped onto the canvas
  c.drop(gotFile);
}

function draw() {
  fill(255);
  noStroke();
  textSize(24);
  textAlign(CENTER);
  text('Drag an image file onto the canvas.', width/2, height/2);
  noLoop();
}

function gotFile(file) {
  // If it's an image file
  if (file.type === 'image') {
    // Create an image DOM element but don't show it
    var img = createImg(file.data).hide();
    // Draw the image onto the canvas
    image(img, 0, 0, width, height);
  } else {
    println('Not an image file!');
  }
}

Answer 1

我的猜测是这条线在后台处理图像需要一些时间：

 var img = createImg(file.data).hide();

所以当您立即尝试使用 img 时，它并不总是完成处理。

image(img, 0, 0, width, height);

一个解决方法是不立即使用 img。这是一个简单的例子：

var img;

function setup() {
  var c = createCanvas(710, 400);
  c.drop(gotFile);
}

function draw() {
  if(img){
    image(img, 0, 0, width, height);
  }
}

function gotFile(file) {
  if (file.type === 'image') {
    img = createImg(file.data).hide();
  }
}

P5 拖放不加载

P5 Drag and Drop not loading

drag-and-drop

html5-canvas

p5.js