Cordova Image Picker轉換爲base64

我無法將圖像轉換爲使用ngCordova imagePicker選擇的base64格式。Cordova Image Picker轉換爲base64

爲了簡單起見，設在科爾多瓦的網站（工作）的代碼是這樣的：

module.controller('ThisCtrl', function($scope, $cordovaImagePicker) { 

    var options = { 
    maximumImagesCount: 10, 
    width: 800, 
    height: 800, 
    quality: 80 
    }; 

    $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字符串。

這裏是試圖這樣的功能：

function convertImgToBase64URL(url, callback, outputFormat){ 

     var canvas = document.createElement('CANVAS'), 
      ctx = canvas.getContext('2d'), 
      img = new Image(); 
     img.crossOrigin = 'Anonymous'; 
     img.onload = function(){ 
      var dataURL; 
      canvas.height = img.height; 
      canvas.width = img.width; 
      ctx.drawImage(img, 0, 0); 
      dataURL = canvas.toDataURL(outputFormat); 
      callback(dataURL); 
      canvas = null; 
     }; 
     img.src = url; 
    };

但如何將它集成到代碼？

我曾經嘗試這樣做（只需要選擇一個圖像）：

$cordovaImagePicker.getPictures(options) 
       .then(function (results) { 
        convertImgToBase64URL(results[0], function(base64Img){ 

         self.chosenImage = base64Img;         
        });       

      }, function(error) { 
       console.log(error); 
      });

但self.chosenImage被設置爲空白。

可能是一個異步問題，但如何最好地解決它？

來源

2015-04-05 James Brunet

有趣的是，ngCordova ImagePicker沒有將圖片轉換爲base64的功能。但是，ngCordova $ cordovaCamera功能確實可以，但僅適用於立即拍攝的照片。

這裏的等效選項是

var options = { 
    quality: 80, 
    destinationType: Camera.DestinationType.DATA_URL, 
    sourceType: Camera.PictureSourceType.CAMERA, 
    allowEdit: true, 
    encodingType: Camera.EncodingType.JPEG, 
    targetWidth: 800, 
    targetHeight: 800, 
    popoverOptions: CameraPopoverOptions, 
    saveToPhotoAlbum: false 
};

來源：http://ngcordova.com/docs/plugins/camera/

來源

2015-05-07 02:53:29

你能使用$ cordovaCamera並更改sourceType的到Camera.PictureSourceType.PHOTOLIBRARY？

document.addEventListener("deviceready", function() { 

    var options = { 
     quality: 50, 
     destinationType: Camera.DestinationType.DATA_URL, 
     sourceType: Camera.PictureSourceType.PHOTOLIBRARY, 
     allowEdit: true, 
     encodingType: Camera.EncodingType.JPEG, 
     targetWidth: 100, 
     targetHeight: 100, 
     popoverOptions: CameraPopoverOptions, 
     saveToPhotoAlbum: false 
    }; 

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

    }, false);

來源

2015-07-01 01:14:18

這工作得很好，國際海事組織，應該是正確的答案 – David 2016-08-19 21:28:31

偉大的，我工作與選擇只有一個圖像？ – 2017-04-18 19:13:25

這是一個古老的問題，但我認爲主要的要求沒有回答，儘管備選方案很好。所以，只需要指出一種遵循建議方法的方法，就可以使用這個Base64 plugin。

安裝它像往常一樣

cordova plugin add https://github.com/hazemhagrass/phonegap-base64

和$cordovaImagePicker.getPictures成功回調

$cordovaImagePicker.getPictures(options) 
     .then(function (results) { 
      for (var i = 0; i < results.length; i++) { 
       console.log('Image URI: ' + results[i]); 
       $scope.imageUri = results[i]; 

       // Encode URI to Base64 
       window.plugins.Base64.encodeFile($scope.imageUri, function(base64){ 
        // Save images in Base64 
        $scope.images.push(base64); 
       }); 
      } 

     }, function(error) { 
      // error getting photos 
     });

來源

2016-03-25 11:40:32 guillermogfer

好的建議..試過但沒有工作..我正在使用cordova v6 – runtimeZero 2016-10-08 21:42:08

如果你只是想傳輸圖像服務中使用它，你有沒有做到這一點。您可以使用fileTransferPlugin。希望這會幫助你。

來源

2017-08-23 06:37:11

Cordova Image Picker轉換爲base64

回答

相關問題