ホームページ > 記事 > ウェブフロントエンド > イオンローカルフォトアルバム、写真撮影、トリミング、アップロードスキルの共有
インターネット上の既存のイオン画像アップロードブログは断片的すぎたり、機能が不完全だったり、不要なプラグインが導入されていたりします。今回は、このプロジェクトを機会に、ionic の画像選択、トリミング、アップロードを統合しました。複数の画像をアップロードするには、ionic をクリックして複数の画像を選択してアップロードしてください。この記事では、イオンローカルフォトアルバム、写真の撮影、トリミング、アップロード(単一の写真の完全版)を主に紹介します。これが必要な友人が参考になれば幸いです。
プラグインのインストール
cordova plugin add cordova-plugin-camera //用于通过相机、相册选择图片并完成裁剪 cordova plugin add cordova-plugin-file-transfer //用于上传图片到服务器
関数をサービスとしてカプセル化
angular.module('starter.services', []) //文件上传 .factory('UploadFile', function(Toast) { return { /** * 上传文件到服务器 * * @param fileUrl 文件路径 * @param server 服务器接口 */ uploadFile: function(fileUrl, server) { document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { var options = new FileUploadOptions(); options.fileKey = "BeanYon"; options.fileName = fileUrl.substr(fileUrl.lastIndexOf('/') + 1); options.mimeType = "image/jpeg"; options.chunkedMode = false; var params = {account: localStorage.account}; options.params = params; var ft = new FileTransfer(); ft.upload(fileUrl, encodeURI(server), success, err, options); } function success(r){ Toast.show("设置头像成功"); } function err(error){ Toast.show("上传头像失败,请确保网络正常后再试"); } } } }) //配置单张图片选择 .factory('SelectPicture', function(UploadFile, Toast) { return { /** * 从相机或图库选择一张图片 * * @param type 选择类型,0 拍照,1 相册 * @param width 目标宽度 * @param height 目标高度 * @param scope $scope对象 */ chooseSinglePicture: function(type, width, height, scope) { document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { var options = {//相机配置 targetWidth: width, targetHeight: height, quality: 100, allowEdit: true } if(type == 1){//图片源设置为相册 options.sourceType = 2; } navigator.camera.getPicture( function(res){ scope.avatar_src = res; scope.$apply(); localStorage.avatar = res; UploadFile.uploadFile(res, "我的服务器地址");//传递自己的服务器接口地址 }, function(res){ Toast.show("选择头像失败"); }, options ); } }, /** * 从图库选择多张图片 */ choosePictures: function() { window.imagePicker.getPictures(function(res){ alert(res+",success"); }, function(res){ alert(res+",failed"); }, { maximumImagesCount: 10, width: 80, height: 80, quality: 80 }); } } });
サービスを呼び出す
angular.module('starter.controllers', []) .controller('MyCtrl', function($scope, $state, $ionicActionSheet, UploadFile,Toast, SelectPicture) { $scope.avatar_src = "img/default_avatar.jpg"; /** *选择头像 */ $scope.selectAvatar = function(){ // 显示操作表 $ionicActionSheet.show({ buttons: [ { text: '<p style="font-size: 18px;">拍照<p>' }, { text: '<p style="font-size: 18px;">从相册选择<p>' }, ], buttonClicked: function(index) { //设置头像 SelectPicture.chooseSinglePicture(index, 120, 120, $scope); return true; } }); } })
関連するおすすめ:
ionic が複数の写真をアップロードしましたサンプルコードの共有
ionic3とAngular4はインターフェースリクエストとローカルjsonファイル読み取りを実装します
ionicを使用してアドレス帳インターフェース切り替えのサンプルコードを実装します
以上がイオンローカルフォトアルバム、写真撮影、トリミング、アップロードスキルの共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。