Immagine dinamica caricamento in lavorazione.js
-
15-11-2019 - |
Domanda
Sto costruendo qualcosa che utilizza l'elaborazione.js per operare su immagini JPEG trascinate da una macchina per utenti in un elemento tela.Attualmente, funziona come così:
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 );
}
.
... in JS, quindi nello script .pjs collegato alla tela (<canvas datasrc="/assets/draw.pjs" id="canvas" width="978" height="652">
):
PImage imported_image;
void setImage(s) {
imported_image = requestImage(s , "" , image_loaded_callback());
}
.
Tutto funziona finora.Ora il problema: avrei pensato che il callback su richiesta (o caricamento per quella materia) accadrebbe quando l'immagine è pronta a rendere.Tuttavia, se lo faccio:
void image_loaded_callback() {
image(imported_image, 0, 0);
}
.
Niente rende.Posso girare il problema aspettando 10 fotogrammi e poi rendering, ma sembra una soluzione molto brutta (e probabilmente inaffidabile).Ci sono modi migliori per farlo? Qualsiasi aiuto molto apprezzato!
Soluzione
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;
Altri suggerimenti
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.