jquery.form ajax 호출 결과를 <canvas> 또는 <img> 태그로 바꾸기

Question

다중 파트 POST를 통해 큰 CSV 파일을 가져와 png를 반환하는 스크립트가 있습니다. 나는 submit the form via ajax에 있고 현재 웹 페이지에 그 png를 표시하고 싶습니다. 나는 그것을하는 방법을 알아낼 수없는 것.

this question 및 this question에 기초하여, 나는 nonworking jsfiddle을 함께 나타냈다. 반환 된 문자열을 Uint8Array으로 변환하거나 변환하지 않고 시도했습니다. Image.onerror 이벤트에서 더 유용한 정보를 얻는 방법을 모르겠습니다. 다음과 같이

내 기능은 같습니다

$('#btnDoIt').click(function() { 
    $("#theForm").ajaxSubmit(function(data) { 
     var imageData = new Uint8Array(data.length); 
     for(var i=0, j=data.length; i<j; ++i){ 
      imageData[i]=data.charCodeAt(i); 
     } 
     var blob = new Blob([imageData], {type: "image/jpeg"}); 
     var url = URL.createObjectURL(blob); 

     var img = new Image(); 
     var context = document.getElementById('myCanvas').getContext("2d"); 
     img.onload = function() { 
      /// draw image to canvas 
      context.drawImage(url, 1,1); 
     } 
     img.onerror = function(error) { 
      console.error(error); 
     }; 
     img.src = url; 
    }); 
}); 

Answer 1

당신은 다시 대신 수동으로 문자열을 구문 분석하는 노력의 AJAX 요청에서 덩어리를 얻기 위해 XMLHttpRequest.responseType 속성을 사용할 수 있습니다. 사용중인 ajaxSubmit 메서드로 속성을 설정하는 방법을 알 수 없었지만 XMLHttpRequest 및 FormData을 사용하여 수동으로 수행하는 것이 어렵지 않습니다. 다음은 변환을 수행하는 업데이트 된 함수입니다.