양식 제출시 캔버스 업데이트 및 저장

Question

양식을 제출하기 전에 실행되는 다음 코드가 있습니다.

이미지를 변경 한 다음 이미지를 저장하기 전에 캔버스를 다시 그려야합니다.

나는이 문제가 의도 한대로 작동하지 않는다는 것입니다

가

내가 불을 지르고에서 단계별 경우 올바른 이미지가 저장됩니다 (대신 이전 이미지 src 속성으로 이미지를 저장) 그것은 내가 구원 받기 전에 지체가 필요하다고 생각하게 만듭니다 ....

어떻게해야합니까?

너무 추첨 방식의 온로드가 있음을

$('#WindowForm').submit(function() { 
      if (isInternal) 
      { 
       imgsrc = $(".externalColor.selected-color").find('img').attr("src"); 
       draw(); 

       var canvas = document.getElementById('myCanvas'); 

       context.drawImage(can, 0, 0) 

       var dataURL = canvas.toDataURL(); 
       $("#ImageData").val(dataURL); 
       return true; 
      } 

     }); 

참고 :

var img = new Image(); 
img.src = imgsrc;  
img.onload = function() { 
        pattern = context.createPattern(img, "repeat"); 
        context.fillStyle = pattern; 
        DrawContext(context); 


       }; 

Answer 1

문제는 당신이 당신의 draw() 기능에로드 할 이미지를 기다려야 할 가능성이 높다. 가장 좋은 방법은 함수에 콜백 매개 변수를 포함시키는 것입니다. 따라서 콜백 매개 변수가 끝나면 저장할 수 있습니다.

function draw(callback){ 
    //... 
    img.onload = (function(callback){ 
     return function(){ 
      //...create your pattern... 
      callback.call(); 
     }; 
    })(callback); 
} 

draw(function(){ /* ...save image... */ }); 

또한 setTimeout(function(){ /*...save image...*/ }, 1); 같은 것을 사용할 수 있지만이 최선의 해결책이 아닙니다.

Answer 2

나는 이런 식으로 접근하는 것 :

$('form').on(
    'submit', 
    function(evt) { 

     var form = $(this); 

     evt.preventDefault(); // prevent the form submission 

     // ...do stuff... 

     // delay the submission 
     window.setTimeout(
      function() { 

       form.off('submit'); // remove this event handler 
       form.submit(); // manually submit the form 

      }, 
      500 // or whatever 
     ); 

    } 
); 

이 기본적으로 모든 정렬 될 때까지, 다음 수동으로 제출 제출되는 양식을 중지합니다. 이것을 @ Evilzebra의 대답과 결합하여 생성 된 이미지에 대한 onload 이벤트에 타임 아웃 기능을 적용 할 수 있지만 기본 원칙은 동일합니다 (제출을 방지 한 다음 준비가되면 수동 제출).

N.B. 수동 제출 전에 이벤트 처리기의 바인딩을 해제해야합니다. 그렇지 않으면 제출 이벤트가 다시 실행되고 루프로 계속 실행됩니다!

Answer 3

코드를 살펴보면 내가하는 일이 무엇인지 이해하고 있다고 생각하며 왜 작동하지 않는지 이해합니다. 먼저 예제 코드에 몇 가지 오류가 있다고 생각합니다. imgsrc은 img.src이되어야한다고 생각할 것입니다. 비동기 호출로 새 이미지를로드해야하는데,이 기능은 나머지 기능을 수행 한 후에야 수행 될 것입니다. 이를 해결하는 빠르고 쉬운 방법은 img.onload이 이미지를 저장해야하는지 여부를 알 수있는 플래그를 만드는 것입니다. 아래 예에서 나는 isInternal을 키 오프

$('#WindowForm').submit(function (e) { 
    if (isInternal) 
    { 
     e.preventDefault(); 
     imgsrc = $(".externalColor.selected-color").find('img').attr("src"); 
     // this will then cause the img.onload to fire 
    }; 
}); 

function pleaseSubmitMe(){ 
    draw(); 
    var canvas = document.getElementById('myCanvas'); 

    context.drawImage(can, 0, 0) 
    var dataURL = canvas.toDataURL(); 
    $("#ImageData").val(dataURL); 
    // alright now that thats done, lets submit this bad boy 
    isInternal= false; // we need to set this to false so we actually try submitting 
    $('#WindowForm').submit(); 
} 

img.onload = function() { 
    pattern = context.createPattern(img, "repeat"); 
    context.fillStyle = pattern; 
    DrawContext(context); 
    // if I'm Internal lets send this image to be submitted 
    if(isInternal){ 
     pleaseSubmitMe(); 
    } 
};