Question

我试图使用Angularjs从字节数组中显示图像。我已经尝试了我在网上找到的每个解决方案，但没有一个能够正常运行。

目前，在我的HTML中，我有：

        <img ng-src="data:image/jpeg;base64,{{company.imgCompanyLogo}}" />

我的控制器代码是：

angular.module('myModule').controller('ContractorCtrl', function ($scope, contractorService, $interval, $window) {

    getcontractorInfo();
    function getcontractorInfo() {
        contractorService.getContractorInfo()
        .success(function (data) {
            $scope.company = data;
        });
    };

我读过的所有内容都说我正在做的事情应该有效。除了图片之外，检索到的所有数据都显示出来，并且我确定了该字段的名称＆＃34; imgCompanyLogo＆＃34;是正确的。我错过了什么？

非常感谢任何帮助！

Answer 1

您需要将数组转换为base64编码的字符串。 This question has information on converting it: ArrayBuffer to base64 encoded string。

使用mobz answer，您可以将该功能添加到范围中：

$scope.arrayBufferToBase64 = function( buffer ) {
    var binary = '';
    var bytes = new Uint8Array( buffer );
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode( bytes[ i ] );
    }
    return window.btoa( binary );
}

从那里，您可以这样做：

<img ng-src="data:image/jpeg;base64,{{arrayBufferToBase64(company.imgCompanyLogo)}}" />

这可能是相当慢的FYI。如果可以，您可以利用画布来提高性能。

Answer 2

将其设为过滤器，以便您可以轻松使用它像

app.filter('bytetobase', function () {
    return function (buffer) {
        var binary = '';
        var bytes = new Uint8Array(buffer);
        var len = bytes.byteLength;
        for (var i = 0; i < len; i++) {
            binary += String.fromCharCode(bytes[i]);
        }
        return window.btoa(binary);
    };
});

只需将img标签中的过滤器调用为

即可

<img ng-src="data:image/JPEG;base64,{{picture | bytetobase}}" alt="..." width="100" height="100">

来自字节数组的图像不显示Angular

2 个答案: