ionic呼叫照相機或者從相簿中選擇圖片進行上傳
阿新 • • 發佈:2018-11-27
開發App的時候會經常用到拍照上傳留作憑證,或者從相簿中選擇。
相關外掛:
相機:cordova-plugin-camera 2.4.1
相簿:cordova-plugin-image-picker 1.1.1
檔案:cordova-plugin-file
許可權:cordova-plugin-android-permissions 1.0.0
安裝許可權外掛主要是因為Android8.0以上的版本有許可權限制。
1 安裝外掛
cordova plugin add cordova-plugin-camera
cordova plugin add cordova-plugin-image-picker
cordova plugin add cordova-plugin-file
cordova pluign add cordova-plugin-android-permissions
2 相關許可權程式碼:
function checkPermissions() { const permissions = cordova.plugins.permissions, permissionList = [permissions.CAMERA, permissions.WRITE_EXTERNAL_STORAGE, permissions.INSTALL_LOCATION_PROVIDER]; function errorCallbacks() { console.warn("permissions is not turned on"); } function checkPermissionCallbacks(status) { if(!status.hasPermission) { permissions.requestPermissions( permissionList, status => { if(!status.hasPermission) errorCallbacks(); }, errorCallbacks); } } permissions.hasPermission(permissionList, checkPermissionCallbacks, null); } checkPermissions()
2 相關html程式碼
<button ng-click="useCamera()">呼叫攝像機</button>
<img src="" id="myImage"/>
<button class="button button-full button-calm" ng-click="takePhoto1(str,data)">從相簿選擇</button>
<img src="{{mess}}" alt="">
3 相關controller 程式碼
拍照上傳
$scope.useCamera=function(){ var options = { quality: 50, //照片質量 destinationType: Camera.DestinationType.DATA_URL, //base64編碼影象 sourceType: Camera.PictureSourceType.CAMERA, //影象來源 allowEdit: true, //是否允許編輯 encodingType: Camera.EncodingType.JPEG, //儲存的圖片格式 targetWidth: 100, //最大寬度 targetHeight: 100, //最大高度 popoverOptions: CameraPopoverOptions, saveToPhotoAlbum: true //是否儲存到相簿 }; $cordovaCamera.getPicture(options).then(function(imageData) { var image = document.getElementById('myImage'); image.src = "data:image/jpeg;base64," + imageData; }, function(err) { // error }); }
從相簿中選擇
$scope.takePhoto1 = function(){//開啟相簿
var options = {
maximumImagesCount: 3,
width: 200,
height: 200,
quality: 100
};
$cordovaImagePicker.getPictures(options)
.then(function (results) {
// for (var i = 0; i < results.length; i++) {
// var sss = $scope.getImageToBase64(results[i]);
// alert($scope.getImageToBase64(results[i]));
// $scope.img_src.push(sss);
// }
convertImgToBase64URL(results[0], function(base64Img){
self.chosenImage = base64Img;
$scope.mess = self.chosenImage
});
}, function(error) {
$scope.data.push(error);
});
};
轉化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;
};