Question

我想转换使用Angular.js从服务器获取的图像数据（用于离子框架），我使用此代码：

$http.post(link, {
          token: token,
          reservationCode: reservationCode
          }).success(function (res){
            $scope.image = btoa(unescape(encodeURIComponent(res)));

        }).error(function (data) {
          return false;
        });

在我的html中使用此代码：

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

但是这个错误总是显示：

获取数据：image / png; base64，{{image}} net :: ERR_INVALID_URL

任何人都可以提供帮助吗？

Answer 1

虽然答案很晚，但对未来的读者会有所帮助：

你应该做的是：

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

这意味着只有在加载数据时浏览器才会尝试访问它，并且AngularJS会对其进行处理，因此您不会再出现该错误。

Answer 2

base64编码图像的工作方法是使用 Canvas 和toDataURL()方法，但您需要将图像数据从服务器加载到图像 istance（通过src属性）。这是一个例子：

function getBase64() {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext("2d");
    var img = new Image();
    img.onload = function () {
        ctx.drawImage(img, 0, 0);
        // pay attention: image here contains complete base 64 data url, no need for "data:image/png;base64," header...
        $scope.image = canvas.toDataURL();
        if (!$scope.$$phase) $scope.$apply();
    };
    img.src = "http://.../myImagepng";
}

最好您可以在服务器端对base64进行编码，然后将响应返回给已编码的客户端。例如在PHP中：

$pathToImg = 'myfolder/myimage.png';
$type = pathinfo($pathToImg, PATHINFO_EXTENSION);
$data = file_get_contents($pathToImg);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);

获取数据：image / png; base64，{{image}} net :: ERR_INVALID_URL

2 个答案: