Помещение результатов ajax-вызова jquery.form в тег ‹canvas› или ‹img›

У меня есть скрипт, который принимает большой CSV-файл через составной POST и возвращает png. Я хочу отправить форму через ajax и отобразить этот png на текущей веб-странице. Я не могу понять, как это сделать.

На основе этого вопроса и этот вопрос, я собрал воедино неработающий 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;
    });
});

canvas jqueryform
person Justin Dearing    schedule 15.02.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать свойство XMLHttpRequest.responseType, чтобы получить большой двоичный объект из запроса 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));
});
person nkron    schedule 16.02.2014