詳解ionic本地相冊(cè)、拍照、裁剪、上傳(單圖完全版)
網(wǎng)絡(luò)上已有的ionic圖片選擇上傳博客碎片化過(guò)于嚴(yán)重,功能殘缺或者引入了一些不必要的插件。這次以項(xiàng)目為契機(jī),把ionic的圖片選擇、裁剪、上傳整合一下,多圖上傳請(qǐng)戳ionic選擇多張圖片上傳
插件安裝
cordova plugin add cordova-plugin-camera //用于通過(guò)相機(jī)、相冊(cè)選擇圖片并完成裁剪 cordova plugin add cordova-plugin-file-transfer //用于上傳圖片到服務(wù)器
將功能封裝為服務(wù)
angular.module('starter.services', [])
//文件上傳
.factory('UploadFile', function(Toast) {
return {
/**
* 上傳文件到服務(wù)器
*
* @param fileUrl 文件路徑
* @param server 服務(wù)器接口
*/
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("設(shè)置頭像成功");
}
function err(error){
Toast.show("上傳頭像失敗,請(qǐng)確保網(wǎng)絡(luò)正常后再試");
}
}
}
})
//配置單張圖片選擇
.factory('SelectPicture', function(UploadFile, Toast) {
return {
/**
* 從相機(jī)或圖庫(kù)選擇一張圖片
*
* @param type 選擇類型,0 拍照,1 相冊(cè)
* @param width 目標(biāo)寬度
* @param height 目標(biāo)高度
* @param scope $scope對(duì)象
*/
chooseSinglePicture: function(type, width, height, scope) {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var options = {//相機(jī)配置
targetWidth: width,
targetHeight: height,
quality: 100,
allowEdit: true
}
if(type == 1){//圖片源設(shè)置為相冊(cè)
options.sourceType = 2;
}
navigator.camera.getPicture(
function(res){
scope.avatar_src = res;
scope.$apply();
localStorage.avatar = res;
UploadFile.uploadFile(res, "我的服務(wù)器地址");//傳遞自己的服務(wù)器接口地址
}, function(res){
Toast.show("選擇頭像失敗");
}, options
);
}
},
/**
* 從圖庫(kù)選擇多張圖片
*/
choosePictures: function() {
window.imagePicker.getPictures(function(res){
alert(res+",success");
}, function(res){
alert(res+",failed");
}, {
maximumImagesCount: 10,
width: 80,
height: 80,
quality: 80
});
}
}
});
調(diào)用服務(wù)
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;">從相冊(cè)選擇<p>' },
],
buttonClicked: function(index) {
//設(shè)置頭像
SelectPicture.chooseSinglePicture(index, 120, 120, $scope);
return true;
}
});
}
})
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS與BootStrap模仿百度分頁(yè)的示例代碼
分頁(yè)在很多時(shí)候都能用到,這篇文章主要介紹了AngularJS與BootStrap模仿百度分頁(yè)的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
Angular依賴注入系統(tǒng)里Injection token PLATFORM_ID使用場(chǎng)景詳解
這篇文章主要為大家介紹了Angular依賴注入系統(tǒng)里Injection token PLATFORM_ID使用場(chǎng)景詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
在AngularJS中如何使用谷歌地圖把當(dāng)前位置顯示出來(lái)
這篇文章給的大家介紹在AngularJS中如何使用谷歌地圖把當(dāng)前位置顯示出來(lái),本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,對(duì)angularjs 谷歌地圖相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
AngularJS基礎(chǔ) ng-model-options 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-model-options 指令,這里對(duì)ng-model-options指令的基本資料進(jìn)行整理,有需要的小伙伴可以參考下2016-08-08
angularjs實(shí)現(xiàn)table增加tr的方法
下面小編就為大家分享一篇angularjs實(shí)現(xiàn)table增加tr的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
AngularJs 最新驗(yàn)證手機(jī)號(hào)碼的實(shí)例,成功測(cè)試通過(guò)
下面小編就為大家分享一篇AngularJs 最新驗(yàn)證手機(jī)號(hào)碼的實(shí)例,成功測(cè)試通過(guò),具有很好的參考價(jià)值。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
AngularJS使用Filter自定義過(guò)濾器控制ng-repeat去除重復(fù)功能示例
這篇文章主要介紹了AngularJS使用Filter自定義過(guò)濾器控制ng-repeat去除重復(fù)功能,結(jié)合實(shí)例形式分析了AngularJS自定義過(guò)濾器的定義及數(shù)組過(guò)濾相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
AngularJS 過(guò)濾器的簡(jiǎn)單實(shí)例
本文主要介紹AngularJS 過(guò)濾器,這里提供詳細(xì)了AngularJS 過(guò)濾器詳細(xì)資料,并提供簡(jiǎn)單實(shí)例,有需要的朋友可以參考下2016-07-07

