przekonwertować obraz do base64 w angularjs

Odpowiedz od

https://stackoverflow.com/a/24880314/625189
https://stackoverflow.com/a/24880314/625189Polecam, abyś użył

https://github.com/ninjatronic/angular-base64
https://github.com/ninjatronic/angular-base64
.
Po wykonaniu instrukcji korzystania z tej biblioteki możesz po prostu
połączenie:

var imageData=$base64.encode(image);

Nie zapomnij wstrzyknąć do swojego modułu:

.module('myApp', ['base64'])

Możesz użyć niestandardowej dyrektywy kątowej, aby przekonwertować obraz base64.
directive.js

myApp.directive('imgUpload', ['$rootScope',function (rootScope) {

 return {

 restrict: 'A',

 link: function (scope, elem, attrs) {

 var canvas = document.createElement("canvas");

 var extensions = 'jpeg ,jpg, png, gif';

 elem.on('change', function () {

 reader.readAsDataURL(elem[0].files[0]);

 var filename = elem[0].files[0].name; var extensionlist = filename.split('.');

 var extension =extensionlist[extensionlist.length - 1];

 if(extensions.indexOf(extension) == -1){

 alert("File extension , Only 'jpeg', 'jpg', 'png', 'gif', 'bmp' are allowed.");  }else{

 scope.file = elem[0].files[0];

 scope.imageName = filename;

 }

 }); var reader = new FileReader();

 reader.onload = function (e) { scope.image = e.target.resu<

 scope.$apply(); }

 }

 }

}]);

Html:

<div class="input-group">

 <input id="image" class="hidden" type="file" img-upload ng-model="imageName" name="imageName">

 <img ng-src="{{image}}" height="100" width="100" ng-show="image"/>

 <label for="image" class="btn btn-success btn-xs pull-center" name="upload" Value="">Upload Photo</label>

Teraz musisz dodać kod do kontrolera, który działa w celu przechowywania obrazu lub pliku w bazie danych.

Jeśli dane obrazu są już base64, spróbuj

<img alt="{{p.alt}}" data-ng-src="{{'data:image/png;base64,'+p.Photo}}" class="photo"/>

Kod do załadowania obrazu w wersji 64-bitowej w Angularjs
Kod HTML

<div class="col-md-8">

 <img ng-src="data:image/png;base64,{{model.Logo}}" id="photo-id"/>

 <input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this)" id="photo-upload"/>

Kod kątowy:

$scope.uploadFile = function (input) {

 if (input.files && input.files[0]) {

 var reader = new FileReader();

 reader.readAsDataURL(input.files[0]);

 reader.onload = function (e) { $('#photo-id').attr('src', e.target.result); 

 var canvas = document.createElement("canvas");

 var imageElement = document.createElement("img"); imageElement.setAttribute = $('<img>', { src: e.target.result });

 var context = canvas.getContext("2d");

 imageElement.setAttribute.load(function()

 {

 debugger;

 canvas.width = this.width;

 canvas.height = this.height;

 context.drawImage(this, 0, 0);

 var base64Image = canvas.toDataURL("image/png"); var data = base64Image.replace(/^data:image\/\w+;base64,/, ""); $scope.model.Logo = data;

 }); }

 }

 }

Aby uzyskać więcej informacji, kliknij tutaj:

http://vikasbishtangular.blogs ... .html
http://vikasbishtangular.blogs ... .html