ionic Camera插件的使用(头像上传)

最新推荐文章于 2021-06-04 15:48:46 发布
最新推荐文章于 2021-06-04 15:48:46 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： ionic3 ， Camra 文章标签： Camera ionic3 angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38553776/article/details/78757509
版权
根据官方文档的例子在app.module.ts中添加
import{Camera} from "@ionic-native/camera";

并在providers中添加上Camera,

之后就可以在你需要调用相机的模块的.ts文件中调用

import {Camera, CameraOptions} from "@ionic-native/camera";

并在constructor中添加依赖


在html页面写一个(click)=dian()点击事件然后在.ts文件中调用点击事件

图上的toLocaleString是图片的本地路径 

this.avatar是需要在


类似图上先声明的  然后回到刚刚的html页面  在你想要让图片显示出来的地方加入图片的途径
类似这样子


就这样 大功告成
丐小胖
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ionic项目中Native Camera的使用方法
08-30
使用Ionic项目中的Native Camera需要通过安装ionic-native/core、添加cordova插件、安装node_modules、添加插件到app module、添加Camera使用代码、测试cordova插件等几个步骤。 本文主要介绍了Ionic项目中Native ...
IONIC3 修改拍照插件cordova-plugin-camera-preview 添加水印
qq_23527809的博客
03-06 381
IONIC3 修改插件cordova-plugin-camera-preview 添加水印
ionic4中调用相机(Camera)
yw00yw的博客
07-11 3969
在ionic项目中安装camera插件 官方地址： ionic cordova plugin add cordova-plugin-camera npm install @ionic-native/camera 在对应的模块中导入 tab1.module.ts import { Camera, CameraOptions } from '@ionic-native/camera/ngx'; @...
ionic开发之摄像头（camera）的调用
jacoby_fire的博客
11-29 9848
最近项目中遇到了需要调用摄像头的地方，之前一直没有弄好，因为真机运行出现了问题，今天真机运行解决了，使得我怕不急待想试验一下摄像头能否调取成功。 要在ionic中调用camera功能，分一下几步： 1、确保你的项目中已经有ngCordova的注入，如何注入呢？在命令行中输入 bower install ngCordova 然后在index中引入 <script src="lib
Ionic2中的相册选择和拍照上传——ImgService
梦空间
04-19 1万+
目录目录 前言 Cordova准备 ImgService服务的实现 ImgService服务的使用 示例效果 相册选择器的汉化 参考前言　　在APP中启动相册选择器或者拍照上传图片这些功能是非常常见的。对于Ionic2，我们只能通过cordova插件实现调用原生的功能。下面将简单的封装一个选择相册或拍照上传图片的ImgService服务。具体如下。Cordova准备　　下载安装所需的Cordovar
ionic3 调用本地相册并上传图片
strong90的博客
12-22 1万+
需要的插件(ionic 官网 native中均有): $ ionic cordova plugin add cordova-plugin-file $ npm install --save @ionic-native/file $ ionic cordova plugin add cordova-plugin-file-transfer $ npm install --save @ionic-n...
如何开发Ionic插件--android
02-26
下面是插件管理命令中的添加、删除及列举等基本使用方法：添加(add)一个插件的时候，若指定的是本地的路径，则是将本地路径下的目录文件copy到plugins/下。若是插件名，则会自动连接到网上下载对
ionic 支付宝插件
05-05
本文将详细介绍如何在Ionic项目中集成支付宝支付功能，以及使用`com.yoopoon.cordova.plugin.alipay`插件进行配置和实现。 首先，我们需要理解Ionic和支付宝支付的结合。Ionic允许开发者使用Web技术（如HTML、CSS和...
Ionic编写插件-android版.pdf
09-04
详细描述了Ionic插件编写，安装，调试的整个过程，举例说明了踏过的坑
ionic cordovaCamera拍照上传服务器
KingCruel的专栏
05-02 1363
1、安装： cordova plugin add cordova-plugin-camera 2、html 拍照上传 3、controller appControllers.controller('ManageCameraCtrl', function ($scope,$cordovaCamera,$http) { $sco
ionic2拍照和文件上传
热门推荐
jialiang的博客
01-20 1万+
ionic2 实现拍照，从相册选择图片，选择视频，文件上传，表单处理。 脚本使用typescript。 ionic2，camera，filetransfer
ionic调用本地相机拍照
qq_32163209的博客
01-28 2062
首先创建一个ionic项目，添加相机插件 $ ionic cordova plugin add cordova-plugin-camera $ npm install --save @ionic-native/camera 在app.module中引入插件 然后在对应ts文件中写调用函数 getPictureByCamera() { const option
Ionic3 使用摄像头
编程圈子-谢厂节的博客
03-22 2145
cordova-plugin-camera 相机插件 安装： $ ionic cordova plugin add cordova-plugin-camera $ npm install --save @ionic-native/camera 使用 1. app.module.ts的providers引用插件 import { Camera,CameraOptions...
ionic 照相机 Camera
weixin_30765319的博客
11-16 170
1.官网： 　　https://ionicframework.com/docs/native/camera/#DestinationType 2.引入插件 $ ionic cordova plugin add cordova-plugin-camera $ npm install --save @ionic-native/camera 3.在app.module.ts里面引用 　　im...
Ionic嵌入原生Camera功能失效问题解决
06-15 2331
项目演示代码地址GitHub:IonicMixNative最近由于公司需求,用到了ionic嵌入原生Android项目.关于ionic嵌入原生可以参考下面的文章. 《把 Cordova Webview 嵌入 Android Native App》 好了,现在说问题. 我使用Ionic写的拍照功能,然后将ionic项目嵌入原生的时候,发现原本在ionic项目能运行的拍照功能,却没了.为了防止混淆
IONIC4.X——使用相机拍照
weixin_44686124的博客
06-01 302
下载插件并导入 npm install --save @ionic-native/camera ionic cordova plugin add cordova-plugin-camera module.ts中 import {Camera,CameraOptions} from '@ionic-native/camera/ngx'; ts使用 async changeavatar() { const actionSheet = await this.actionSheetCon.
ionic添加cordova插件-Camera
gzgchzc的博客
12-27 2143
gzgchzc博客最新更新地址：http://blog.gzvtc.cc/ Camera 访问相机设备拍照和录像。注：相机接口只适用于真实的设备，而不是在模拟器中。 cordova plugin add cordova-plugin-camera@2.2 *在添加相机插件时不带版本号会默认添加最新的版本，作者添加最新版本（2.3）时报一个找不到v4包的一个错误，移除再安装2.2的版本就没问
ionic3 摄像快门声静音
wojiamengmeng的博客
12-19 205
android 修改CameraActivity.java文件，设置mCamera.takePicture(null, null, jpegPictureCallback);第一个设置为null。仅android测试 ios ios 快门声暂时没想到处理拍照快门方法，我是把拍照改成截屏 ...
ionic3 html调用摄像头,Ionic系列—调用摄像头拍照和选择图库照片功能的实现
weixin_32757449的博客
06-04 298
1、需求描述最近要做一个功能就是调用摄像头拍照，然后上传照片的功能，或者直接打开图库选择照片然后上传。2、准备①、添加插件$cordovaCameracordova plugin add cordova-plugin-camera②、在controller中添加依赖3、代码实现$scope.takePhoto = function() {var options = {//这些参数可能要配合着使用，...
ionic5使用angular上传相册中的图片拍照上传
最新发布
03-24
可以使用ionic-native的Camera插件来实现上传相册中的图片和拍照上传。具体实现可以参考以下代码： // 导入相关模块 import { Camera, CameraOptions } from '@ionic-native/camera/ngx'; import { File } from '@ionic-native/file/ngx'; import { Transfer, TransferObject } from '@ionic-native/transfer/ngx'; // 初始化相关变量 private fileTransfer: TransferObject; private imageSrc: string; // 构造函数中初始化fileTransfer constructor(private camera: Camera, private file: File, private transfer: Transfer) { this.fileTransfer = this.transfer.create(); } // 上传图片方法 uploadImage() { // 设置相机选项 const options: CameraOptions = { quality: 100, destinationType: this.camera.DestinationType.FILE_URI, sourceType: this.camera.PictureSourceType.PHOTOLIBRARY, encodingType: this.camera.EncodingType.JPEG, mediaType: this.camera.MediaType.PICTURE } // 调用相机插件获取图片 this.camera.getPicture(options).then((imageData) => { // 获取文件名 const fileName = imageData.substring(imageData.lastIndexOf('/') + 1); // 获取文件路径 const path = imageData.substring(0, imageData.lastIndexOf('/') + 1); // 移动文件到临时目录 this.file.moveFile(path, fileName, this.file.cacheDirectory, fileName).then((result) => { // 获取临时文件路径 const filePath = result.nativeURL; // 设置上传参数 const options = { fileKey: 'file', fileName: fileName, chunkedMode: false, mimeType: 'image/jpeg', headers: {} }; // 开始上传 this.fileTransfer.upload(filePath, 'http://example.com/upload.php', options).then((data) => { // 上传成功，返回服务器返回的数据 console.log(data); }, (err) => { // 上传失败，打印错误信息 console.log(err); }); }, (err) => { // 移动文件失败，打印错误信息 console.log(err); }); }, (err) => { // 获取图片失败，打印错误信息 console.log(err); }); }

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值