Javascript Processing.js中的动态图像加载

Javascript Processing.js中的动态图像加载,javascript,canvas,processing,processing.js,loadimage,Javascript,Canvas,Processing,Processing.js,Loadimage,我正在构建使用processing.js对从用户机器拖到画布元素中的JPEG图像进行操作的东西。目前,它的工作原理如下: canvas.addEventListener("dragenter", dragEnter, false); canvas.addEventListener("dragexit", dragExit, false); canvas.addEventListener("dragover", dragOver, false); canvas.addEventListener("

我正在构建使用processing.js对从用户机器拖到画布元素中的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脚本中(
):

到目前为止一切正常。现在的问题是:我原以为当图像准备好渲染时,requestImage(或loadImage)上的回调会发生。但是,如果我这样做:

void image_loaded_callback() {
    image(imported_image, 0, 0);
}
没有任何东西可以渲染。我可以通过等待10帧然后进行渲染来解决这个问题,但这似乎是一个非常丑陋(而且可能不可靠)的解决方案。有没有更好的方法?
非常感谢任何帮助

如果映像加载失败,回调将永远不会调用。
但是,
imported\u image.sourceImg
referent指向真实的img元素,这可能会有所帮助。您可以使用它来检测图像加载状态。例如:
imported_image.sourceImg.complete;导入的_image.sourceImg.onerror

事实上,我发现最好的方法是在绘图循环中检查图像的loaded属性。因此:

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

不是回调,而是相同的最终结果。与@doou的sourceImg.complete相比,该属性更幸运。

PImage imported\u image。这是什么?JavaScript不是Java,没有静态类型。这部分在Processing.js中。看好极了!假设这将有助于使我当前等待几帧的解决方案更加可靠—至少代码将确切地知道需要等待多少帧。
void draw() {
    if(imported_image != null ) {
        if(imported_image.loaded) {
           image(imported_image,0,0,500,500);
        }
    }
}