Динамическая загрузка изображений в Phanging.js

Question

Я строю что-то, что использует Phancing.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 прикреплен к холсте (<canvas datasrc="/assets/draw.pjs" id="canvas" width="978" height="652">):

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

.

Все пока все работает.Теперь проблема: я бы подумал, что обратный вызов по запросу (или загрузка на этот вопрос) произойдет, когда изображение будет готов рендеринга.Однако, если я сделаю это:

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

.

Ничто не делает.Я могу обойти эту проблему, ожидая 10 кадров, а затем рендеринг, но это похоже на очень уродливое (и, вероятно, ненадежное) решение.Есть ли лучшие способы сделать это? Любая помощь очень ценится!

Answer 1

if the image loading failed, the callback will never call. but imported_image.sourceImg referent to the real img element, may be this will help. you can use it to detect the image load state. ex: imported_image.sourceImg.complete ;imported_image.sourceImg.onerror;

Answer 2

Actually, the best way I've found to do this is checking the loaded property of the image in the draw loop. So:

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

Not a callback, but same end result. Had more luck with that property than @DouO's sourceImg.complete.