P5.js拖拽加载图片首次失败问题求助

我之前也碰到过一模一样的问题！这本质是图片加载的异步特性在搞鬼，咱们来拆解原因和解决方案：

问题根源 #

你用createImg(file.data).hide()创建图片后，立刻调用image()绘制到画布，但浏览器加载图片需要时间——第一次拖拽时，图片还没完成加载，image()拿到的是未就绪的图片资源，所以画布上显示不出来；第二次拖拽时浏览器缓存了这张图，加载速度极快，赶在image()执行前完成了加载，所以能正常显示。

而你注释掉.hide()后看到图片，是因为createImg()生成的DOM图片元素本身已经加载完成并显示在页面上了，但画布的绘制动作是在图片加载前执行的，所以画布上还是空白，只有DOM元素能看到。

两种解决方案 #

方案1：用loadImage()替代createImg()（推荐） #

loadImage()是P5.js专门为画布加载图片设计的API，它会等待图片完全加载后再执行回调，完美适配画布绘制场景：

修改你的gotFile函数：

function gotFile(file) {
  // 如果是图片文件
  if (file.type === 'image') {
    // 加载图片，完成后再绘制到画布
    loadImage(file.data, function(img) {
      image(img, 0, 0, width, height);
    });
  } else {
    println('Not an image file!');
  }
}

方案2：给createImg()的图片添加加载监听 #

如果一定要用createImg()，可以监听图片的onload事件，确保图片加载完成后再绘制：

function gotFile(file) {
  // 如果是图片文件
  if (file.type === 'image') {
    var img = createImg(file.data);
    img.hide(); // 可以继续保留隐藏DOM元素的逻辑
    // 监听图片加载完成事件，再执行绘制
    img.elt.onload = function() {
      image(img, 0, 0, width, height);
    };
  } else {
    println('Not an image file!');
  }
}

这两种方法都能解决首次拖拽不显示的问题，你可以根据自己的需求选择~

内容的提问来源于stack exchange，提问作者David