0

私は現在、自分のウェブサーバー (nodejs http-server) からの画像を ng-flow に取り込もうとしていますが、このスレッドを見つけました:

json から ng-flow.js を使用して画像ファイルを作成する

Aidas からの回答でわかるように、データを blob に追加してから addFile(blob) を使用する必要があると彼は言います。

しかし... $resource を使用して次のような URL を取得すると:

http://localhost:8080/3c6397ff-cbb4-4a1c-98b3-5304e02c1bd4.jpg

$resource から値を取得し、それを blob に追加すると、画像が欠落しています - ng-flow では、blob は 15kb であり、実際の画像の 700kb ではありません。

写真がbase64でフォーマットされている可能性があることを読みましたが、私のGoogle開発コンソールは次のように述べています:

content-length:780831
content-type:image/jpeg; charset=utf-8

Google dev コンソールで応答データを見ると、疑問符がたくさんあります (推測した文字を表示できません)。

addFile(blob) 関数を使用して ng-flow に追加できるように、応答を正しくフォーマットするにはどうすればよいですか?

4

3 に答える 3

3

json から ng-flow.js を使用して画像ファイルを生成する でcvjensen ソリューションと penner のソリューションを組み合わせて何かを行いました

コントローラ：

まず、db から画像を読み取り、$scope.project.images に保存します。

$scope.project.images : [ 
        {
            "image_type" : "image/jpeg",
            "src" : "/images/uploaded/flow-122256-fontiosojpg.1",
            "alt" : "fontioso.jpg",
            "_id" : ObjectId("5608ef37f7672d8b1fcab111")
        }
    ]

それで：

Flow.prototype.addExistingFile = function (file, event) {
  var f = new Flow.FlowFile(this, file);
  this.files.push(f);
};

angular.forEach($scope.project.images, function(value, key) {
    getBase64Images.get(value.src) //src contains the full path to img
        .success(function(data) {
             var blob = new Blob([data.data], {type: value.image_type});
              blob.name = value.alt;
              blob.image_url = value.src;
              blob.alt_text = value.alt;
              $scope.uploader.flow.addExistingFile(blob);
        })
        .error(function(error){
            console.log(error);
    });

});

サービス：

.factory("getBase64Images", ['$http', function ($http) {
    return {
        get: function (url) {
            return $http.get(
                url, { 
                responseType: 'arraybuffer',
                transformResponse: function(data) {
                  console.log(data);
                  return { data: data };
                }
            }
          );
        }
    };
  }]);
于 2015-09-28T11:11:26.790 に答える
1

私はこのようにしてしまった..

私の $resource 関数は次のようになります。

ENV.imagesEndpoint = ' http://localhost:8080/

id = イメージ名 / ID

getimages: $resource(ENV.imagesEndpoint + id, {}, {
    get: { 
      method: 'GET',  
      isArray: false,
      responseType: 'arraybuffer',
      transformResponse: function(data) {
        // Stores the ArrayBuffer object in a property called "data"
        return { data: data };
      }
      //headers: {'Content-Type': 'image/jpeg;charset=utf-8;base64'}
    }
  })

私のコントローラーは次のようになります：

angular.forEach($scope.images, function(imageid) {
        filefactory(imageid).getimages.get().$promise.then(function(value) {
          $timeout(function() {
              var blob = new Blob([value.data], {type: 'image/jpeg'});
              blob.name = 'file.jpg';
              $scope.obj.flow.addFile(blob);
          });
        });
      });
于 2015-02-04T10:06:19.970 に答える
0

ここで提供するソリューションは、次の投稿に基づいています。

JavaScript で base64 文字列から Blob を作成する

同様のケースに直面しましたが、画像は Base64 を使用してサーバーに保存されます。Web ページが読み込まれ、画像がデータベースから取得されると、そのような画像をflow.files配列に戻す必要があります。画像は Base64 文字列を使用してデータベースに保存されます。そのため、ページの読み込み中に、Base64 文字列を Blob に変換し、ファイルをflow.files配列に戻すしか方法がありませんでした。

これにより、ページがデータベースからロードされた後、フロー コントローラーが正しく機能するようになりました。

手順は次のとおりです。

  1. ディレクティブを追加し、 jQuery を使用してドキュメント準備完了イベントでデータベースから読み込まれた Base64 文字列を持つload-photo入力要素に追加します。additional_image1

  2. $scope.loadPhotoディレクティブを追加して要素にアクセスし、写真をロードする準備が整ったドキュメントでスコープ関数を呼び出します。

  3. 写真の読み込み機能で、Base64 を Blob に変換し、ファイルをフロー コントロールに追加します。

  4. 期待どおりに機能しなかったため、スコープ変数$scope.imageStringB64と入力要素additional_image1が手動で同期されていることを確認してください。ng-modelこれは、angular 以外の jQuery コードがデータベースから入力要素を読み込んでおり、それらが動的にバインドされていないことがわかったためです。

JavaScript コード:

app.directive('loadPhoto', function () {
    return function (scope, element, attrs) {
        //This directive 'load-photo' is required to access the DOM element inside the scope
        //This will get the Base64 string of the image which is stored in the input element
        angular.element(document).ready(function () {
            scope.loadPhoto(element[0]);
        })
    }
})

app.controller('photosController', ['$scope', '$http', '$timeout',
    function ($scope, $http, $timeout) {
        ...
        var BLANK_IMG_URL = "//:0";
        $scope.removeFile = function () {
            //debugger;
            $scope.$flow.cancel();
            $scope.imageStringB64 = '';
            $scope.imageString = BLANK_IMG_URL;
        }
        $scope.loadPhoto = function (elem) {
            //Load photo from Database
            //The photo Base64 is stored in the input element 'elem'
            var blobImage;
            var tmpBase64;
            tmpBase64 = angular.element(elem).val(); 
            if (tmpBase64) {
                //Convert Base64 to Blob object
                blobImage = b64toBlob(tmpBase64, 'image/png');
                blobImage.name = "image.png";
                //Add the Blob object to flow files.
                $scope.$flow.addFile(blobImage);
            }
        }
        ...
}]);

HTML コード:

                    <div class="photo-wrapper"  ng-controller="photosController" 
                        flow-init
                        flow-file-added="!isAppraiserSigned() && !!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]"
                        flow-files-submitted="$flow.upload()">
                        <h4 class='photo-title'>Photo 1</h4>
                        <div class="property-photo drag-drop-photo" ng-hide="$flow.files.length" flow-drop
                            flow-drag-enter="isAppraiserSigned()?style={}:style={border:'4px solid green'}" flow-drag-leave="style={}" ng-style="style">
                            <div class='drag-drop-lbl'>Drop file here</div>
                        </div>
                        <div class="property-photo" flow-drop ng-show="$flow.files.length" 
                            flow-drag-enter="isAppraiserSigned()?style={}:style={border:'4px solid green'}" flow-drag-leave="style={}" ng-style="style">
                            <img id="additional_image1_section" style="max-height:100%" flow-img="$flow.files[0]" />
                            <input id="additional_image1" name = "additional_image1" ng-hide="true" type="text" ng-model="imageStringB64" load-photo/>                      
                        </div>
                        <div>
                            <a href="#" class="btn" ng-hide="$flow.files.length" flow-btn flow-attrs="{accept:'image/*'}"><%=selectImageLbl%></a>
                            <a href="#" class="btn" ng-show="$flow.files.length" flow-btn flow-attrs="{accept:'image/*'}">Change</a>
                            <a href="#" class="btn btn-danger" ng-show="$flow.files.length"
                               ng-click="removeFile()">
                              Remove
                            </a>
                        </div>
                        <div class='photo-description'>
                            <label class='description-lbl' for='additional_image_describe1'><%=descriptionLbl%></label>
                            <input class='description' id='additional_image_describe1' name='additional_image_describe1' type="text" />
                        </div>
                    </div>

Base64 イメージを blob に変換してから Base64 に戻すその他のオプションについては、次のコード サンプルを参照してください。

fiddle.jshell.ne

于 2016-09-27T19:15:54.430 に答える