angularjs - 如何在 angularjs 中上传 中已有的图像

Question

我有一个现有图像，显示在 <img ng-src=''> 中我想在单击提交按钮时上传(与其他 json 对象一起发布)它。该图像已存在，因此我不需要使用 <input type ="file"> 。但我的代码不起作用。谁能帮助我如何实现这一目标。非常感谢你。

plunker link

Answer 1

已经有一段时间了，但我只是想展示我如何实现类似的功能

演示

plnkr

行动计划:

• 转换 img/URL至Base64格式。
• 添加 Base64数据作为 scope 的属性.

采取的步骤:

• 创建了一个工厂来将 URL 转换为 Base64使用 Canvas 和 promise 。
• 已修改fileInput指令，例如在图像 load 上事件，它将转换 img至Base64并分配 imgData属性 scope .
• 使用imgData属性，附加 Base64编码字符串为formData

指令

link: function(scope, ele, attrs) {
  ele.bind('load', function(e) {
    var imgSrc = e.target.src;
    urlToBase64.getData(imgSrc).then(function(data) {
      scope.imgData = data;
    });
    scope.$apply();
  });
}

工厂

myApp.factory('urlToBase64', ['$q', function($q) {

  var obj = {};
  // function to convert URL to Base64 representation
  function URLtoBase64(url, callback) {
    var defer = $q.defer();

    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function() {
      var canvas = document.createElement('CANVAS');
      var ctx = canvas.getContext('2d');
      canvas.height = this.height;
      canvas.width = this.width;
      ctx.drawImage(this, 0, 0);
      try {
        defer.resolve(canvas.toDataURL());
      } catch (e) {
        defer.reject(e);
      }
      canvas = null;
    };
    img.src = url;

    return defer.promise;
  }

  obj.getData = URLtoBase64;
  return obj;
}]);

Controller

var fd = new FormData();
// imgData is coming from fileInput directive
fd.append('file', $scope.imgData);
fd.append('formdata', JSON.stringify($scope.dataform));
var reqObject = {
  url: 'admin/managecuisineAdd',
  method: 'POST',
  data: fd,
  transformRequest: angular.identity,
  headers: {
    'Content-type': undefined
  }
};
$http(reqObject).then(function(data) {
  $scope.status = data;
  $scope.itemlist.push(data)
  $scope.message = "New Dish Added Successfully"
});