Question

我尝试以角度显示图像，该图像是从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);   
});

我已成功在浏览器中接收数据。在角度，我的模板看起来像：

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

控制器是：

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

问题在于您正在使用期望base64编码数据的数据网址，但您正在回复原始二进制数据。

试试这个：

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

而不是：

res.end(img, 'binary');

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

显示从API调用返回为二进制数据的图像

1 个答案: