как преобразовать изображение в строку base64?

Question

привет Я пытаюсь сделать простое приложение в ионной камере или выбрать файл из галереи или файловой системы и отправить/загрузить на сервер. я нашел один плагин, который захват одного изображения и отправить base64 строку здесь является плагином http://ngcordova.com/docs/plugins/camera/ с помощью этого я могу получить base64 снабжать струной, тетивой и т.п.

$cordovaCamera.getPicture(options).then(function(imageData) { 
     var image = document.getElementById('myImage'); 
     image.src = "data:image/jpeg;base64," + imageData; 
    }, function(err) { 
     // error 
    }); 

что base64 строка I используется для отправки на сервер

Но моя проблема в том, что, когда я использую этот плагин, картинка, плагин для галлия

http://ngcordova.com/docs/plugins/imagePicker/ это отправить мне только изображение url (где находится в памяти). можем ли мы получить строку base64 после выбора изображения из подборщика изображений.

$cordovaImagePicker.getPictures(options) 
    .then(function (results) { 
     for (var i = 0; i < results.length; i++) { 
     console.log('Image URI: ' + results[i]); 
     } 
    }, function(error) { 
     // error getting photos 
    }); 

Другими словами, когда я с помощью камеры я получаю base64 строку, как показано above.But, когда я использую сборщика изображение плагин я получаю изображение url.can я получаю base64 строку .so, что я могу отправить или загрузить на сервер. как преобразовать изображение url в base64 строку?

Answer 1

Попробуйте это 100% рабочий код , Сначала вы должны скачать файл ngCordova.min.js и включить его в свой файл index.html. Следуйте этому коду.

angular.module('starter.controllers', []) 
 

 
.controller('DashCtrl', function($scope,$cordovaCamera) { 
 
\t $scope.imgUrl; 
 
\t $scope.dataImg; 
 
\t $scope.tackPicture = function(){ 
 
\t var options = { 
 
     quality: 50, 
 
     destinationType: Camera.DestinationType.DATA_URL, 
 
     sourceType: Camera.PictureSourceType.CAMERA, 
 
     allowEdit: true, 
 
     encodingType: Camera.EncodingType.JPEG, 
 
     targetWidth: 100, 
 
     targetHeight: 100, 
 
     popoverOptions: CameraPopoverOptions, 
 
     saveToPhotoAlbum: false, 
 
\t correctOrientation:true 
 
    }; 
 
\t $cordovaCamera.getPicture(options).then(function(imageData) { 
 
     //var image = document.getElementById('myImage'); 
 
\t $scope.dataImg = imageData; // <--- this is your Base64 string 
 
     $scope.imgUrl = "data:image/jpeg;base64," + imageData; 
 
    }, function(err) { 
 
     // error 
 
    }); 
 
\t } 
 
}) 
 

 
.controller('ChatsCtrl', function($scope, Chats) { 
 
    // With the new view caching in Ionic, Controllers are only called 
 
    // when they are recreated or on app start, instead of every page change. 
 
    // To listen for when this page is active (for example, to refresh data), 
 
    // listen for the $ionicView.enter event: 
 
    // 
 
    //$scope.$on('$ionicView.enter', function(e) { 
 
    //}); 
 

 
    $scope.chats = Chats.all(); 
 
    $scope.remove = function(chat) { 
 
    Chats.remove(chat); 
 
    }; 
 
}) 
 

 
.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) { 
 
    $scope.chat = Chats.get($stateParams.chatId); 
 
}) 
 

 
.controller('AccountCtrl', function($scope) { 
 
    $scope.settings = { 
 
    enableFriends: true 
 
    }; 
 
});

<ion-view view-title="Dashboard"> 
 
    <ion-content class="padding"> 
 
    <button class="button icon-left ion-ios-camera button-block button-positive" ng-click="tackPicture()"> 
 
    \t \t OPEN CAMERA 
 
    </button> 
 
    <div class="item item-avatar"> 
 
    <img ng-src="{{ imgUrl }}"> 
 
    
 
    <p>{{ dataImg }}</p> 
 
    </div> 
 
    </ion-content> 
 
</ion-view>

Answer 2

Для преобразования изображения в base64 вы можете использовать HTML5 Canvans, как упоминание в

How to convert image into base64 string using javascript

Пожалуйста, обратитесь выше вопрос

Используйте этот код

/** 
* Convert an image 
* to a base64 url 
* @param {String} url   
* @param {Function} callback  
* @param {String} [outputFormat=image/png]   
*/ 
function convertImgToBase64URL(url, callback, outputFormat){ 
    var img = new Image(); 
    img.crossOrigin = 'Anonymous'; 
    img.onload = function(){ 
     var canvas = document.createElement('CANVAS'), 
     ctx = canvas.getContext('2d'), dataURL; 
     canvas.height = this.height; 
     canvas.width = this.width; 
     ctx.drawImage(this, 0, 0); 
     dataURL = canvas.toDataURL(outputFormat); 
     callback(dataURL); 
     canvas = null; 
    }; 
    img.src = url; 
}