Как я могу использовать $ .ajax, чтобы установить для изображения src динамические данные изображения / png? - PullRequest
2 голосов
/ 12 августа 2011

Изображения генерируются динамически с несколькими пользовательскими параметрами ввода.Я могу успешно создать изображение с помощью GET , записав в Response.OutputStream

$('#myImage').attr('src', 'Images/GetImage?param1=value1&param2=value2');

Есть несколько дополнительных параметров.Но как я могу сделать это с POST ?Я подумал, что мог бы использовать $.ajax и base64 для кодирования Image, но это не совсем работает.

$.ajax({
    url: 'Images/GetImage64',
    type: 'POST',
    data: { param1: 'value1', param2: 'value2' },
    success: function (data) {
        //$('#myImage').attr('src', data); 
        $('#myImage').attr('src', 'data:image/png;base64, ' + data);
    }
});

Инструменты разработчика Chrome показывают ajax (XHR) POST для / Images / GetImage64 стекст / простой ответ.Контент выглядит как PNG, сгенерированный на сервере.Тем не менее, другой «Другой» запрос сделан с URL ниже, и я понятия не имею, что происходит

data:image/png:base64, [binary]

На сервере я возвращаю ImageResult : ActionResult, который переопределяет ExecuteResult и ответс закодированным в base64 изображением.

public override void ExecuteResult(ControllerContext context)
{
    context.HttpContext.Response.Clear();
    context.HttpContext.Response.ContentType = "text/plain";
    context.HttpContext.Response.BinaryWrite(GetBase64Image(Image));
}

1 Ответ

1 голос
/ 13 августа 2011

Может быть, вина JQuery. Попробуйте заставить jQuery обработать результат как простой текст с помощью dataType: 'text':

$.ajax({
    url: 'Images/GetImage64',
    type: 'POST',
    dataType: 'text',
    data: { param1: 'value1', param2: 'value2' },
    success: function (data) {
        $('#myImage').attr('src', 'data:image/png;base64,' + data);
    }
});

Редактировать: Не важно, не так ли.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...