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中，然后在附加到画布的{.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;

Answer 2

实际上，我发现这样做的最好方法是在绘制循环中检查图像的加载属性。所以：

void draw() {
    if(imported_image != null ) {
        if(imported_image.loaded) {
           image(imported_image,0,0,500,500);
        }
    }
}

不是回调，但结果相同。与@ DouO的sourceImg.complete相比，该财产更幸运。

Processing.js中的动态图像加载

2 个答案: