ExpressJSで画像を処理し、Angular JSでDOMのimgタグに表示する

私はExpressJSをプライベートな方法で使用したいと思っています。私は静的に提供することでこれが不可能だと考えました。したがって、私は有効なアクセス許可を持つ要求（以下の 'validateTokens（req）'呼び出しを参照）でそれらを提供します。しかし、私のAngularJSアプリでそれらを受け取ったとき、私はDOMに表示することができません。ここでExpressJSで画像を処理し、Angular JSでDOMのimgタグに表示する

は私のサーバーの関連するコードです：ここでは

expressServer.get('/image', function (req, res){ 
    if (validateTokens(req)) { 
     var filePath = path.join(__dirname, "./testImage.jpg"); 
     res.sendFile(filePath); 
    } 
});

は私のクライアントの関連するコードです：ここでは

var app = angular.module("app", []); 
app.controller("indexController", function($http, $scope, $window){ 
    $http({ 
     method: 'GET', 
     url: '/image' 
    }).then(function successCallback(response) { 
     var blob = new Blob([response.data], {type : 'image/jpeg'}); 
     $scope.imageData = $window.URL.createObjectURL(blob); 
    }, function errorCallback(response) { 
    }); 
});

は私のDOMのテンプレートです：

<!DOCTYPE html> 
<html ng-app="app"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Node Testing</title> 
     <script src="angular.min.js"></script> 
     <script src="app.js"></script> 
    </head> 
    <body ng-controller="indexController as indexCtrl"> 
     <img data-ng-src="{{imageData}}" alt="Image to be shown" /> 
    </body> 
</html>

出典

2016-05-29 Jonathan Ginsburg

使用している方法sendFileの画像を送信するためには、目的のダウンロードを目的としています。

ブラウザがダウンロードを開始するために必要なヘッダーをすべて設定します。あなたは何ができるか

API Reference for sendFile

検証した後では、あなたの角度jsのコードから次に画像のsrcプロパティとして設定することができますbase64でエンコードされた画像

var fs = require("fs"); 
fs.readFile("testimage.jpg", function(err, buffer){ 
    var base64Image = new Buffer(buffer, 'binary').toString('base64'); 
    res.send('data:image/jpeg;base64,' + base64Image); 
});

を送信

$http({ 
    method: 'GET', 
    url: '/image' 
}).then(function successCallback(response) { 
    $scope.imageData = response.data; 
}, function errorCallback(response) { 
});

出典

2016-05-29 20:21:17 eltonkamami

ドゥ私は応答や何かを解読する必要がありますか？それはまだ動作していないためです。 –

@ JonathanGinsburgは、返信に連結するために私の答えを更新しました。文字列 ''data：image/jpeg; base64、' ' – eltonkamami

ありがとう！デコードは私のために働いた、チェック：http://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript。 –

ExpressJSで画像を処理し、Angular JSでDOMのimgタグに表示する

答えて

関連する問題