我在使用ngCordova imagePicker选择的图像转换成base64格式时遇到了问题。
为了简化问题,Cordova网站提供的代码(有效的)如下:
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
});
});
结果数组返回一个形如file///...的结果数组,但是如何从这里转换呢?我想要一个函数,你可以传入一个值(文件),返回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 被设置为空白。
可能是异步问题,但最好的解决方法是什么?