Question

我一直在尝试使用下面P5参考中介绍的拖放方法来实现加载画布功能。但是，在将图像拖动到画布的第一个实例上，图像将不会加载。第二次尝试将加载图像。这种情况发生在我尝试加载到画布上的每个“新”图像中。

在评论'.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拖放没有加载

1 个答案: