Javascript 使用jpeg/jpg作为blob填充ng流

我目前正在尝试使用来自我的Web服务器（nodejs http服务器）的图像填充ng flow，我发现了以下线程：

正如您在Aidas的回答中所看到的，他说您需要将数据添加到blob，然后使用addFile（blob）

但是。。。当我使用$resource获取url时，如：

然后从$resource获取值，并将其添加到图像丢失的blob中-在ng flow中，它表示blob为15kb-而不是图像实际的700kb

我已经读到图片可以是base64格式的，但是我的google开发控制台说：

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

如果我看一下Googledev控制台中的响应数据，就会发现有很多问号（我猜它无法显示字符）

---

如何正确格式化响应，以便使用addFile（blob）函数将其添加到ng流中？

我最后就是这样做的

我的$resource函数如下所示：

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);
          });
        });
      });

ENV.imagesEndpoint=

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);
          });
        });
      });

---

我最后就这样做了

我的$resource函数如下所示：

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);
          });
        });
      });

ENV.imagesEndpoint=

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);
          });
        });
      });

---

我做了一些结合了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")
        }
    ]

然后：

服务：

.factory("getBase64Images", ['$http', function ($http) {
    return {
        get: function (url) {
            return $http.get(
                url, { 
                responseType: 'arraybuffer',
                transformResponse: function(data) {
                  console.log(data);
                  return { data: data };
                }
            }
          );
        }
    };
  }]);

---

我做了一些结合了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")
        }
    ]

然后：

服务：

.factory("getBase64Images", ['$http', function ($http) {
    return {
        get: function (url) {
            return $http.get(
                url, { 
                responseType: 'arraybuffer',
                transformResponse: function(data) {
                  console.log(data);
                  return { data: data };
                }
            }
          );
        }
    };
  }]);

---

我将在这里提供的解决方案基于以下帖子：

我也遇到过类似的情况，但图像是使用Base64存储在服务器上的。当加载网页并从数据库检索图像时，这些图像必须添加回

flow.files

数组。图像使用Base64字符串保存在数据库中。因此，在页面加载期间，我唯一的方法是将Base64字符串转换为Blob，并将文件添加回

flow.files

数组

这使流量控制器能够在从数据库加载页面后正常工作

以下是步骤：

添加指令

load photo

，并将其添加到输入元素

additional_image1

，该元素使用jQuery在文档就绪事件上从数据库加载Base64字符串

添加一条指令以访问元素，并在准备加载照片的文档上调用scope函数

$scope.loadPhoto

在load photo函数中，将Base64转换为Blob并将文件添加到流控件中

确保范围变量

$scope.imageStringB64

和输入元素

额外的\u 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>

照片1
把文件放在这里

有关将Base64图像转换为blob并返回Base64的更多选项，请参阅此代码示例：

---

我将在此处提供的解决方案基于此处的帖子：

我也遇到过类似的情况，但图像是使用Base64存储在服务器上的。当加载网页并从数据库检索图像时，这些图像必须添加回

flow.files

数组。图像使用Base64字符串保存在数据库中。因此，在页面加载期间，我唯一的方法是将Base64字符串转换为Blob，并将文件添加回

flow.files

数组

这使流量控制器能够在从数据库加载页面后正常工作

以下是步骤：

添加指令

load photo

，并将其添加到输入元素

additional_image1

，该元素使用jQuery在文档就绪事件上从数据库加载Base64字符串

添加一条指令以访问元素，并在准备加载照片的文档上调用scope函数

$scope.loadPhoto

在load photo函数中，将Base64转换为Blob并将文件添加到流控件中

确保范围变量

$scope.imageStringB64

和输入元素

额外的\u 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>

照片1
把文件放在这里

有关将Base64图像转换为blob并返回Base64的更多选项，请参阅此代码示例：