將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

可以使用XMLHttpRequest.responseType屬性來獲取一個blob從AJAX請求，而不是試圖手動解析字符串後面。我無法弄清楚如何使用您正在使用的ajaxSubmit方法設置屬性，但使用XMLHttpRequest和FormData手動執行並不困難。這是一個更新的功能，可以進行轉換：

$('#btnDoIt').click(function() { 
    var form = document.getElementById('theForm'); 

    var request = new XMLHttpRequest(); 
    request.open('GET', form.action, /* async = */ true); 

    request.responseType = 'blob'; // Get a Blob back in the response property 

    request.onload = function() { 
     var blob = request.response; 
     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(img, 0, 0, context.canvas.width, context.canvas.height); 
     }; 
     img.onerror = function(error) { 
      console.error(error); 
     }; 
     img.src = url; 
    }; 
    request.send(new FormData(form)); 
});