将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)); 
});