javascript - Processing.js 中的动态图像加载

Question

我正在构建使用 processing.js 对从用户机器拖到 Canvas 元素中的 JPEG 图像进行操作的东西。目前，它是这样工作的:

canvas.addEventListener("dragenter", dragEnter, false);
canvas.addEventListener("dragexit", dragExit, false);
canvas.addEventListener("dragover", dragOver, false);
canvas.addEventListener("drop", drop, false);
...
function drop(evt) {
...
    var files = evt.dataTransfer.files;
    handleFiles(files);
}
function handleFiles(files) {
    var file = files[0];
    reader = new FileReader();
    reader.onloadend = handleReaderLoadEnd;
    reader.readAsDataURL(file);
}
function handleReaderLoadEnd(evt) {
    var p=Processing.getInstanceById('canvas');
    p.setImage( evt.target.result );
}

...在 JS 中，然后在附加到 Canvas 的 .pjs 脚本中(<canvas datasrc="/assets/draw.pjs" id="canvas" width="978" height="652">):

PImage imported_image;
void setImage(s) {
    imported_image = requestImage(s , "" , image_loaded_callback());
}

目前一切正常。现在的问题是:我原以为 requestImage 上的回调(或 loadImage 就此而言)会在图像准备好呈现时发生。但是，如果我这样做:

void image_loaded_callback() {
    image(imported_image, 0, 0);
}

没有渲染。我可以通过等待 10 帧然后渲染来解决这个问题，但这似乎是一个非常丑陋(并且可能不可靠)的解决方案。有没有更好的方法来做到这一点？非常感谢任何帮助!

Answer 1

如果图片加载失败，回调永远不会调用。但是 imported_image.sourceImg 引用真实的 img 元素，这可能会有所帮助。您可以使用它来检测图像加载状态。例如:imported_image.sourceImg.complete ;imported_image.sourceImg.onerror;