Process.js의 동적 이미지 로딩

StackOverflow https://stackoverflow.com/questions/9525621

문제

저는 사용자 컴퓨터에서 캔버스 요소로 드래그한 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에서 캔버스에 연결된 .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프레임을 기다린 다음 렌더링하여 문제를 해결할 수 있지만 이는 매우 추악한(아마도 신뢰할 수 없는) 솔루션처럼 보입니다.이를 수행하는 더 좋은 방법이 있습니까?도움을 주시면 감사하겠습니다!

도움이 되었습니까?

해결책

이미지 로딩이 실패하면 콜백이 호출되지 않습니다.하지만 imported_image.sourceImg 실제 img 요소를 참조하면 이것이 도움이 될 수 있습니다.이를 사용하여 이미지 로드 상태를 감지할 수 있습니다.전: imported_image.sourceImg.complete ;imported_image.sourceImg.onerror;

다른 팁

실제로 제가 찾은 가장 좋은 방법은 그리기 루프에서 이미지의 로드된 속성을 확인하는 것입니다.그래서:

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

콜백은 아니지만 최종 결과는 동일합니다.@DouO의 sourceImg.complete보다 해당 속성에 더 많은 행운이 있었습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top