获取数据:image/png;base64,{{image}}时出现net::ERR_INVALID_URL错误

Question

我希望能够使用Angular.js（用于ionic-framework）将从服务器获取的图像数据转换，我已经使用了以下代码：

$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}}">

但是这个错误总是显示：

GET data:image/png;base64,{{image}} net::ERR_INVALID_URL

有人可以帮忙吗？

- Redturbo

---

你应该真正使用ngSrc。虽然不确定这是否能解决你的具体问题。 - Matthew Green

Answer 1

尽管有些晚了，但对于未来的读者仍然有帮助：

你需要做的是：

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

这意味着当数据被加载并由AngularJS处理时，浏览器将尝试访问它，因此您将不再收到该错误。

- Pritam Banerjee

Answer 2

对于图像的base64编码，一种可行的方法是使用Canvas和toDataURL()方法，但您需要将图像数据从服务器加载到一个Image实例（通过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);

- beaver