Есть ли способ загрузить изображение в Javascript с данными, полученными через HTTP POST?

Question

Есть ли способы использовать AJAX для запроса файла изображения через HTTP POST, а затем создать новое изображение с этими данными в HTML?Поскольку вы не можете сделать это с тегом IMG, возможно ли это сделать с помощью объекта Image javascript?

Answer 1

Да, это возможно.

Когда ваш серверный скрипт открывает файлы изображений и кодирует их в виде строки base64, почти все браузеры (кроме IE7 и ниже) могут справиться с этим.Например:

jQuery('<img>', {
    src: 'data:image/jpeg;base64,' + someBase64EncodedString
}).appendTo(document.body);

Реальный пример этого можно найти здесь: https://github.com/jAndreas/Supply

Answer 2

Если он возвращает данные изображения в кодировке base64, вы, вероятно, можете сделать это, используя URI данных и, возможно, Canvas.

Некоторый "псевдо" код (с использованием PHP и JS + jQuery) для демонстрациичто вы могли бы сделать.

Сервер:

$image = new Imagick($imagePath);
echo 'data:image/png;base64,' . base64_encode($image);

Клиент:

$.ajax({
   method: "post",
   url: "/foo/bar.php",
   success: function (data) {
      $("<img />").attr("src", data).appendTo("#myContainer");
   }
});

Answer 3

Попробуйте посмотреть здесь: http://emilsblog.lerch.org/2009/07/javascript-hacks-using-xhr-to-load.html

Answer 4

Возможно, вы захотите проверить, как встраивать закодированные в base64 данные в виде изображения.

Вот статья, которая проведет вас через нее.

http://danielmclaren.com/node/90