如何在angularjs中上传已经在<img src>中的图像

Posted 2023-02-22

【中文标题】如何在angularjs中上传已经在<img src>中的图像

【英文标题】：How to upload image which is already in <img src> in angularjs

【发布时间】：2016-02-26 13:21:37

【问题描述】：

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

plunker link

【参考方案1】：

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

演示

plnkr

行动计划：

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

采取的步骤：

创建了一个工厂来使用画布和承诺将 URL 转换为 Base64。 修改了fileInput 指令，以便在图像load 事件上，它将img 转换为Base64 并在scope 上分配imgData 属性。 使用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"
);