Динамическая загрузка изображений в Processing.js - PullRequest
Новая
       47

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

4 голосов
/ 02 марта 2012

Я создаю что-то, что использует processing.js для работы с изображениями JPEG, перетаскиваемыми с компьютера пользователя в элемент canvas.В настоящее время это работает так: 

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 кадров, а затем рендеринг, но это кажется очень уродливым (и, вероятно, ненадежным) решением.Есть ли лучшие способы сделать это?Любая помощь высоко ценится!

Ответы [ 2 ]

1 голос
/ 10 апреля 2012

если загрузка изображения не удалась, обратный вызов никогда не будет вызывать.но imported_image.sourceImg по отношению к реальному элементу img, возможно, это поможет.Вы можете использовать его для определения состояния загрузки изображения.например: imported_image.sourceImg.complete ;imported_image.sourceImg.onerror;

0 голосов
/ 15 июля 2012

На самом деле, лучший способ, который я нашел, это проверить загруженное свойство изображения в цикле рисования.Итак: 

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

Не обратный вызов, но тот же конечный результат.Ему повезло больше с этим свойством, чем с sourceImg.complete @ DouO.

...