获取数据：image/png;base64,{{image}} net::ERR_INVALID_URL答案

【问题标题】：GET data:image/png;base64,{{image}} net::ERR_INVALID_URL获取数据：image/png;base64,{{image}} net::ERR_INVALID_URL
【发布时间】：2016-03-14 21:53:29
【问题描述】：

我想使用 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

有人可以帮忙吗？

【问题讨论】：

你真的应该使用ngSrc。不确定这是否会解决您的具体问题。

标签： javascript angularjs html ionic-framework

【解决方案1】：

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

你应该做的是：

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

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

【讨论】：

【解决方案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);

【讨论】：