本文为原创文章,转载请标明出处

目录

  1. 安装插件
  2. 导入 app.module.ts
  3. 创建 provider
  4. 更多
  5. 效果图

1. 安装插件

终端运行:

ionic cordova plugin add cordova-plugin-camera
npm install --save @ionic-native/camera ionic cordova plugin add cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="your usage message"
npm install --save @ionic-native/image-picker

2. 导入 app.module.ts

...
import {Camera} from "@ionic-native/camera";
import {ImagePicker} from "@ionic-native/image-picker";
... @NgModule({
...
providers: [
...
Camera,
ImagePicker,
...
]
...
})
...

3. 创建 provider

终端运行:

ionic g page edit

edit.html

<ion-header>

  <ion-navbar>
<ion-title>编辑</ion-title> <ion-buttons end>
<button ion-button>保存</button>
</ion-buttons>
</ion-navbar> </ion-header> <ion-content>
<div class="header-image" tappable [ngStyle]="{'background-image': 'url('+avatar+')'}" (click)="presentActionSheet()"></div>
</ion-content>

edit.scss

page-edit {
.header-image {
width: 100px;
height: 100px;
border-radius: 50%;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
background-size: cover;
}
}

edit.ts

import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams, ActionSheetController, AlertController} from 'ionic-angular'; import {ImagePicker, ImagePickerOptions} from "@ionic-native/image-picker";
import {Camera, CameraOptions} from "@ionic-native/camera"; @IonicPage()
@Component({
selector: 'page-edit',
templateUrl: 'edit.html',
})
export class EditPage { avatar: string = ""; constructor(public navCtrl: NavController, public navParams: NavParams, public actionSheetCtrl: ActionSheetController, public alertCtrl: AlertController, public imagePicker: ImagePicker, public camera: Camera) {
} presentActionSheet() {
let actionSheet = this.actionSheetCtrl.create({
buttons: [{
text: '拍照',
role: 'takePhoto',
handler: () => {
this.takePhoto();
}
}, {
text: '从相册选择',
role: 'chooseFromAlbum',
handler: () => {
this.chooseFromAlbum();
}
}, {
text: '取消',
role: 'cancel',
handler: () => {
console.log("cancel");
}
}]
}); actionSheet.present().then(value => {
return value;
});
}
takePhoto() {
const options: CameraOptions = {
quality: 100,
allowEdit: true,
targetWidth: 200,
targetHeight: 200,
saveToPhotoAlbum: true,
}; this.camera.getPicture(options).then(image => {
console.log('Image URI: ' + image);
this.avatar = image.slice(7);
}, error => {
console.log('Error: ' + error);
});
} chooseFromAlbum() {
const options: ImagePickerOptions = {
maximumImagesCount: 1,
width: 200,
height: 200
};
this.imagePicker.getPictures(options).then(images => {
if (images.length > 1) {
this.presentAlert();
} else if (images.length === 1) {
console.log('Image URI: ' + images[0]);
this.avatar = images[0].slice(7);
}
}, error => {
console.log('Error: ' + error);
});
} presentAlert() {
let alert = this.alertCtrl.create({title: "上传失败", message: "只能选择一张图片作为头像哦", buttons: ["确定"]});
alert.present().then(value => {
return value;
});
} }

4. 更多

Ionic Native - Camera

GitHub - cordova-plugin-camera

Ionic Native - Image Picker

GitHub - ImagePicker

5. 效果图

iOS:

Android:

如有不当之处,请予指正,谢谢~

Ionic3学习笔记(十二)拍照上传图片以及从相册选择图片上传的更多相关文章

  1. HTML5 Plus 拍照或者相册选择图片上传

    HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传,利用HTML5 Plus的Camera.Gallery.IO.Storage和Uploader来实现手机APP拍照或者从相册 ...

  2. python3.4学习笔记(十二) python正则表达式的使用,使用pyspider匹配输出带.html结尾的URL

    python3.4学习笔记(十二) python正则表达式的使用,使用pyspider匹配输出带.html结尾的URL实战例子:使用pyspider匹配输出带.html结尾的URL:@config(a ...

  3. Go语言学习笔记十二: 范围(Range)

    Go语言学习笔记十二: 范围(Range) rang这个关键字主要用来遍历数组,切片,通道或Map.在数组和切片中返回索引值,在Map中返回key. 这个特别像python的方式.不过写法上比较怪异使 ...

  4. springmvc上传图片并显示--支持多图片上传

    实现上传图片功能在Springmvc中很好实现.现在我将会展现完整例子. 开始需要在pom.xml加入几个jar,分别是: <dependency> <groupId>comm ...

  5. android拍照选择图片上传服务器自定义控件

    做android项目的时候总免不了遇到图片上传功能,虽然就是调用android系统的拍照和相册选择功能,但是总面部了把一大推代码写在activity里,看上去一大推代码头都昏了.不如把这些功能都集成一 ...

  6. H5拍照、选择图片上传组件核心

    背景 前段时间项目重构,改成SSR的项目,但之前用的图片选择上传组件不支持SSR(server-side-render).遂进行了调研,发现很多的工具.但有的太大,有的使用麻烦,有的不满足使用需求.决 ...

  7. java jvm学习笔记十二(访问控制器的栈校验机制)

    欢迎装载请说明出处:http://blog.csdn.net/yfqnihao 本节源码:http://download.csdn.net/detail/yfqnihao/4863854 这一节,我们 ...

  8. (C/C++学习笔记) 十二. 指针

    十二. 指针 ● 基本概念 位系统下为4字节(8位十六进制数),在64位系统下为8字节(16位十六进制数) 进制表示的, 内存地址不占用内存空间 指针本身是一种数据类型, 它可以指向int, char ...

  9. Python学习笔记(十二)—Python3中pip包管理工具的安装【转】

    本文转载自:https://blog.csdn.net/sinat_14849739/article/details/79101529 版权声明:本文为博主原创文章,未经博主允许不得转载. https ...

随机推荐

  1. ZJNU 1125 - A == B ?——中级

    处理后再判断即可,处理过程注意考虑全面. /* Written By. StelaYuri */ #include<iostream> #include<string> usi ...

  2. C语言 指针理解

    1.指针 指针全称是指针变量,其实质是C语言的一种变量.这种变量比较特殊,通常他的值会被赋值为某个变量的地址值(p = &a),然后我们可以使用 *p 这样的方式去间接访问p所指向的那个变量. ...

  3. C++随机迷宫生成[转载]

    原文:http://tieba.baidu.com/p/2596809144 #include<iostream.h> #include"time.h" #includ ...

  4. 控制台输出<迷你DVD管理>

    使用顺序.选择.循环.跳转语句 数组 功能实现菜单显示和切换 输入的数字不符合要求直接退出程序 用户可以选择新增.查看. 删除.借出.归还.退出 思路分析 使用switch语句实现菜单选择 使用do- ...

  5. Qt OpenCV 在界面显示图片 通过Lable方式 和GraphicsView 方式

    1. 通过lable方式打开图片. 代码如下: void MainWindow::on_pushButton_clicked() { Mat srcImage,gray_image,srcImage1 ...

  6. 【转】浅述WinForm多线程编程与Control.Invoke的应用

    环境:VS2008.C#3.0 在WinForm开发中,我们通常不希望当窗体上点了某个按钮执行某个业务的时候,窗体就被卡死了,直到该业务执行完毕后才缓过来.一个最直接的方法便是使用多线程.多线程编程的 ...

  7. ZJNU 1129 - The sum problem——中级

    枚举区间可能的长度len,将m减去1~len构成的序列和后如果结果是len的倍数,则可以构成答案区间. /* Written By. StelaYuri */ #include<stdio.h& ...

  8. Opencv笔记(十一)——图像模糊(平滑)

    学习目标: 使用自定义的滤波器对图像进行卷积(2D 卷积) 学习使用不同的低通滤波器对图像进行模糊 一.2D卷积 卷积不是很了解的可以看我上一篇博客,与语音信号一样,我们也可以对 2D 图像实施低通滤 ...

  9. Opencv笔记(六)——把滑动条当调色板

    学习目标: 学会把滑动条绑定到 OpenCV 的窗口. 学习函数:cv2.getTrackbarPos(), cv2.creatTrackbar()等. 简单演示: 通过调节滑动条来设定画板颜色.我们 ...

  10. Jupyter_Notebook

    TA-lib指标库地址 http://github.com/xingbuxing/TA-Lib-in-chinese 1.Jupter是基于网页端写代码,属于一种交互式的编程,除了在上面写代码之外还可 ...