canvas - jquery.form ajax 呼び出しの結果をまたはタグ

Question

マルチパート POST を介して大きな CSV ファイルを受け取り、png を返すスクリプトがあります。ajax 経由でフォームを送信し、その png を現在の Web ページに表示したいと考えています。私はそれを行う方法を理解できないようです。

this questionとthis questionに基づいて、動作しない 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;
    });
});