Используйте jQuery load с пользовательским http-файлом ashx обработчика, чтобы показать png

Question

У меня есть собственный обработчик (ImageHandler.ashx), который отлично работает при просмотре. Он находит ZIP-файл на сервере, распаковывает его и сохраняет растровое изображение в OutputStream. Когда я пытаюсь использовать загрузку jQuery с помощью ashx, мой png-контент возвращается в виде закодированных искаженных символов вместо отображения изображения.

Bitmap convertedImg = new Bitmap(zInStream);
convertedImg.Save(context.Response.OutputStream, ImageFormat.Png);

Answer 1

Это потому, что вы запрашиваете у сервера изображение, а не HTML-код, который показывает изображение.

Вместо использования метода load просто создайте элемент изображения с URL-адресом обработчика в качестве источника:

$('#SomeElement').append($('<img/>', { src: 'ImageHandler.ashx', alt: 'An image' }));

Примечание. Если zip-файл содержит изображение PNG, вам не нужно распаковывать его в объект Bitmap, а затем снова упаковать в формат PNG, вы можете просто отправить содержимое потока zip напрямую поток ответов.

Answer 2

Убедитесь, что вы указали тип содержимого в своем ответе "image/png", например:

context.Response.ContentType = "image/png";
Bitmap convertedImg = new Bitmap(zInStream);
convertedImg.Save(context.Response.OutputStream, ImageFormat.Png);

Это гарантирует, что браузер будет обрабатывать возвращенный контент как изображение PNG вместо text / html.

Редактировать
Кроме того, я не рекомендую выполнять интенсивную распаковку процессора при каждой загрузке изображения. Было бы намного быстрее (и лучше для вашего сервера), если бы вы разархивировали его только один раз, а затем ссылались на разархивированную версию.