Question

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

plunker link

Answer 1

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

演示

plnkr

行动计划：

将img/URL转换为Base64格式。
将Base64数据作为属性添加到scope。

采取的措施：

创建了一个工厂，使用canvas和promises将URL转换为Base64。
修改了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;
}]);

控制器

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

如何上传angularjs中<img src=""/>中已有的图像

1 个答案:

演示

指令

厂

控制器