Processing.js中的動態圖像加載

我正在構建一些使用processing.js處理從用戶計算機拖動到canvas元素中的JPEG圖像的東西。目前，它的工作原理是這樣：Processing.js中的動態圖像加載

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，那麼在連接到畫布（<canvas datasrc="/assets/draw.pjs" id="canvas" width="978" height="652">）的.pjs腳本：

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幀然後渲染來解決問題，但這似乎是一個非常醜陋（也許不可靠）的解決方案。有沒有更好的方法來做到這一點？任何幫助非常感謝！

來源

2012-03-01 BaronVonKaneHoffen

''PImage imported_image;''。這是什麼？ JavaScript不是Java，沒有靜態類型。 – 2012-03-03 15:25:58

這部分在Processing.js中。請參閱http://processingjs.org/reference/PImage/ – BaronVonKaneHoffen 2012-03-04 19:50:12

如果圖片加載失敗，回調將永遠不會調用。但imported_image.sourceImg指向真正的img元素，可能會有所幫助。您可以使用它來檢測圖像加載狀態。例如：imported_image.sourceImg.complete ;imported_image.sourceImg.onerror;

來源

2012-04-10 09:28:04 DouO

非常棒！假設這將有助於使我當前的解決方案等待幾幀更可靠 - 至少代碼將確切知道需要等待多少幀。 – BaronVonKaneHoffen 2012-05-18 12:02:39

實際上，我發現這樣做的最好方法是在繪製循環中檢查圖像的加載屬性。所以：

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

不是回調，而是相同的最終結果。比@ DouO的sourceImg.complete有更多的財產運氣。

來源

2012-07-15 11:24:26 BaronVonKaneHoffen

Processing.js中的動態圖像加載

回答

相關問題