4

私は、processing.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());
}

これまでのところ、すべて正常に機能しています。ここで問題が発生します。画像をレンダリングする準備ができたときに、requestImage（またはさらに言えばloadImage）のコールバックが発生すると思いました。しかし、私がこれを行う場合：

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

何もレンダリングされません。10フレーム待ってからレンダリングすることで問題を回避できますが、それは非常に醜い（そしておそらく信頼できない）解決策のようです。これを行うためのより良い方法はありますか？どんな助けでも大歓迎です！

4

2 に答える 2

1

画像の読み込みに失敗した場合、コールバックは呼び出されません。しかしimported_image.sourceImg、実際のimg要素を参照すると、これが役立つ可能性があります。これを使用して、イメージのロード状態を検出できます。元：imported_image.sourceImg.complete ;imported_image.sourceImg.onerror;

于 2012-04-10T09:28:04.877 に答える
0

実際、これを行うために私が見つけた最善の方法は、描画ループで画像のロードされたプロパティをチェックすることです。それで：

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

コールバックではありませんが、同じ最終結果です。@DouOのsourceImg.completeよりもそのプロパティで運が良かった。

于 2012-07-15T11:24:26.657 に答える