Carregamento dinâmico de imagens em Processing.js
-
15-11-2019 - |
Pergunta
Estou construindo algo que usa o process.js para operar em imagens JPEG arrastadas da máquina do usuário para um elemento de tela.Atualmente funciona assim:
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 );
}
...em JS, depois no script .pjs anexado ao canvas (<canvas datasrc="/assets/draw.pjs" id="canvas" width="978" height="652">
):
PImage imported_image;
void setImage(s) {
imported_image = requestImage(s , "" , image_loaded_callback());
}
Tudo funcionando bem até agora.Agora o problema:Eu teria pensado que o retorno de chamada em requestImage (ou loadImage, nesse caso) aconteceria quando a imagem estivesse pronta para renderização.No entanto, se eu fizer isso:
void image_loaded_callback() {
image(imported_image, 0, 0);
}
nada é renderizado.Posso contornar o problema esperando 10 quadros e depois renderizando, mas isso parece uma solução muito feia (e provavelmente não confiável).Existem maneiras melhores de fazer isso?Qualquer ajuda muito apreciada!
Solução
se o carregamento da imagem falhar, o retorno de chamada nunca será chamado.mas imported_image.sourceImg
referente ao elemento img real, pode ser que isso ajude.você pode usá-lo para detectar o estado de carregamento da imagem.ex: imported_image.sourceImg.complete ;imported_image.sourceImg.onerror;
Outras dicas
Na verdade, a melhor maneira que encontrei de fazer isso é verificar a propriedade carregada da imagem no loop de desenho.Então:
void draw() {
if(imported_image != null ) {
if(imported_image.loaded) {
image(imported_image,0,0,500,500);
}
}
}
Não é um retorno de chamada, mas o mesmo resultado final.Tive mais sorte com essa propriedade do que sourceImg.complete do @DouO.