javascript - 显示从 API 调用中以二进制数据形式返回的图像

Question

我正在尝试以 Angular 显示图像，该图像是从 Node API 接收回来的，以响应 GET 请求。 Node 模型是:

    var stream = canvas.pngStream();

    stream.on('data', function(chunk){
        array.push(chunk);
    });

    stream.on('end', function(){
      callback(Buffer.concat(array));
    });    

路由器和回调是:

router.get('/canvas', function(req, res) {

    var callback = function(img){

        console.log('img is ');
        console.log(img);

         res.writeHead(200, {'Content-Type': 'image/png' });
         res.end(img, 'binary');
    };

    canvas.getCanvas(callback);   
});

我已成功在浏览器中接收回数据。在 Angular 上，我的模板如下所示:

<img ng-src="data:image/png;base64, {{avatarImage}}"/>

Controller 是:

function getFile () {
    // body...

    FilesService.getCanvas($stateParams.id)
    .success(function(data){

        console.log('result! and data is ');
        console.log(data);

        $scope.avatarImage = data;

    })
    .error(function(err){
        console.log('err is ');
        console.log(err);
    })
}

Angular 正在接收图像，因为在控制台中我看到:

result! and data is 
�PNG
IHDR��<q�bKGD��������IDATx����Ue���²n���.�(H�h���3LSq��엥       �eM���3��4Ō�X:�HkV3mG'��I%+���$�b�����B��|

但是我在浏览器中只看到一个损坏的图像图标。然后 Angular 向以下位置发出另一个 GET 请求:

data:image/png;base64, %EF%BF%BDPNG%1A%00%00%00IHDR%00%00%00%EF....

有什么想法可以显示以二进制形式返回的图像吗？

Answer 1

问题在于您使用的数据 URL 需要 Base64 编码的数据，但您却使用原始二进制数据进行响应。

试试这个:

res.end(img.toString('base64'));

而不是这个:

res.end(img, 'binary');

此外，您可能需要删除 img 标记中逗号后面和 {{avatarImage}} 之前的空格。