如何在javascript中接收二进制图像？答案

【问题标题】：How to receive a binary image in javascript?如何在javascript中接收二进制图像？
【发布时间】：2016-12-30 18:48:42
【问题描述】：

我不知道我是否遗漏了什么，但我无法在 javascript 中接收图像（二进制）。我可以在 iPhone 和 Android 上做同样的事情（当然，用另一个角色），但如果我使用的是 javascript，则不能。

场景：

服务器端

我有一个存储图像的服务器。

代码：(test1.php)

$image_url = 'http://weburbanist.com/wp-content/uploads/2011/11/lorem-ipsum.jpg';


$bin = file_get_contents($image_url);

echo $bin;

客户端（Javascript）

我通过 URL GET/POST 向服务器请求图像，但我无法使用 AJAX 请求在 Javascript 中接收它。我想把它存储在一个 .

代码：

var activeXhr = new XMLHttpRequest();

activeXhr.open('GET', 'test1.php', true);

activeXhr.onreadystatechange = function()
{
    if(activeXhr.readyState == 4){
       var bin_img = activeXhr.responseText;
       var dataURL="data:image/jpeg;base64,"+bin_img;

       $('#test_img').attr('src',dataURL);
    }
};
activeXhr.send(null);

问题：

我无法转换以 BASE64 或使用 btoa 接收的数据（返回空）

问题：

如何在 JAVASCRIPT 中接收原始图像？

【问题讨论】：

How to display binary data as image - extjs 4的可能重复
我强烈鼓励大家使用 Stack Overflow 来获得帮助，但在此之前，最好通过基本的 Google 搜索进行一些“尽职调查”。如果您在 Google 中仅搜索 javascript binary image，您的第一个结果将是一个现有的 SO 帖子来回答您的问题。
为什么不直接做<img src="http://weburbanist..."？
我对php一无所知，但似乎有专门用于处理发送到浏览器的图像的方法：php.net/manual/en/function.imagecreatefromjpeg.php，php.net/manual/en/function.imagejpeg.php

标签： javascript image

【解决方案1】：

既然您已经在使用 jQuery，为什么不使用它的 Ajax 功能来处理请求呢？

这也短得多：

$.get('test1.php').done(function (r) {
  // r is your raw image data;
});

在 php 中设置 'Content-Type' 标头是否合适：

<?php 

$image_url = 'http://weburbanist.com/wp-content/uploads/2011/11/lorem-ipsum.jpg';

$bin = file_get_contents($image_url);

header('Content-Type: image/jpeg');

die($bin); // use die/exit for safer output

您是否考虑过像这样从 php 提供 Base64 数据：

die(base64_encode( $bin ));

【讨论】：