正文 

当前位置： 首页 > 知识 >

如何在 IONIC 3 中从图库中获取或选择图像

     2023-03-13     288

关键词：

【中文标题】如何在 IONIC 3 中从图库中获取或选择图像【英文标题】：How to take or choose image from gallery in IONIC 3 【发布时间】：2018-04-17 13:01:24 【问题描述】：

如何在 IONIC 3 中从图库中获取图像？

我无法使用

从图库中获取图像

https://ionicframework.com/docs/native/camera/

https://ionicframework.com/docs/native/camera-preview/

【问题讨论】：

【参考方案1】：

您可以使用Native camera plugin 来完成。

.ts

 //take Photo
  takePhoto(sourceType:number) 
    const options: CameraOptions = 
      quality: 50,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation: true,
      sourceType:sourceType,
    

    this.camera.getPicture(options).then((imageData) => 
      let base64Image = 'data:image/jpeg;base64,' + imageData;
    , (err) => 
      // Handle error
    );

注意：你只需要像这样调用上述方法：

this.takePhoto(0);//photo library

this.takePhoto(1);//camera

0 为photo library 1 为Camera

用户界面

【讨论】：

值得注意的是，那些sourceType 值可以作为常量使用，这可以使您的代码更具描述性：this.camera.PictureSourceType.CAMERA 和this.camera.PictureSourceType.PHOTOLIBRARY 如何选择多张图片？？ 如何选择多张图片？？ 你可以使用这个：ionicframework.com/docs/native/image-picker@AnkitMaheshwari @Sampath - 不打开图片库（用于选择图片的文件夹），而是一起打开所有图片，这使得滚动和查找所需图片变得非常困难。【参考方案2】：

试试这个：

TakeCamera() 
    const options: CameraOptions = 
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    
    this.camera.getPicture(options).then((imageData) => 
      this.base64Image = 'data:image/jpeg;base64,' + imageData;
      this.photos.push(this.base64Image);
      this.photos.reverse();
    , (err) => 
      console.log(err);
    );

【讨论】：

请使用 Markdown 格式。另外，请用英语解释为什么/如何解决问题。【参考方案3】：

使用图片选择器插件：

getImage()
let options = 
maximumImagesCount:1//select number of image default is 15

this.imagePicker.getPictures(options).then((results) => 
  for (var i = 0; i < results.length; i++) 
      console.log('Image URI: ' + results[i]);
  
, (err) => 
console.log("error: "+err); 
);

参考image picker

【讨论】：

【参考方案4】：

根据投票最多的答案，快速 sn-ps。

定义2个选项类型：

  private optionsCamera: CameraOptions = 
    quality: 100,
    targetWidth: 600,
    sourceType: this.camera.PictureSourceType.CAMERA,
    destinationType: this.camera.DestinationType.DATA_URL,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE
  

  private optionsGallery: CameraOptions = 
    quality: 100,
    sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
    destinationType: this.camera.DestinationType.DATA_URL,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE

当你从相机中调用方法 getPicture

将选项对象替换为适当的情况。

这是相机用的

this.camera.getPicture(this.optionsCamera).then((imageData) => 
  let base64Image = 'data:image/jpeg;base64,' + imageData;
 , (err) => 
  // Handle error
  console.log(err)
 )

这是给画廊的

this.camera.getPicture(this.optionsGallery).then((imageData) => 
  let base64Image = 'data:image/jpeg;base64,' + imageData;
 , (err) => 
  // Handle error
  console.log(err)
 )

【讨论】：

从图库或相机中选择图像的对话框

】从图库或相机中选择图像的对话框【英文标题】：Dialogtopickimagefromgalleryorfromcamera【发布时间】：2012-04-2706:17:28【问题描述】：是否有标准的方式来调用对话框，选择从相机中选择图像或从图库中获取图像（如在内置电话簿或Sk... 查看详情

在 WebView 中从相机或图库上传图像

】在WebView中从相机或图库上传图像【英文标题】：UploadanImagefromcameraorgalleryinWebView【发布时间】：2013-03-2111:40:59【问题描述】：此应用中的WebView会打开一个带有上传按钮的页面。以下是允许打开对话框以从图库或相机上传图像... 查看详情

在颤振插件 image_picker 示例中从图库中选择图像时内存增加

】在颤振插件image_picker示例中从图库中选择图像时内存增加【英文标题】：Memoryincreasewhenpickimagefromgalleryinexampleofflutterpluginimage_picker【发布时间】：2020-01-1321:06:44【问题描述】：我运行flutter的插件image_picker的示例。当我从画廊中... 查看详情

Android：如何在设置图像视图时检测从图库中选择的图像方向（纵向或横向）？

】Android：如何在设置图像视图时检测从图库中选择的图像方向（纵向或横向）？【英文标题】：Android:Howtodetecttheimageorientation(portraitorlandscape)pickedfromgallerywhilesettingonanimageview?【发布时间】：2012-09-2511:09:54【问题描述】：我正在... 查看详情

如何在片段中从相机捕获图像，

】如何在片段中从相机捕获图像，【英文标题】：howtocaptureimagefromcamera,infragment,【发布时间】：2014-01-0509:38:29【问题描述】：我是Android新手，我进行了大量培训，但图像无法从相机加载。以下是我从相机或图库中捕获图像的代... 查看详情

在 Android 4.4 中从图库中选择时裁剪

】在Android4.4中从图库中选择时裁剪【英文标题】：CropwhileselectingfromGalleryinAndroid4.4【发布时间】：2013-12-1311:26:56【问题描述】：从Android4.4开始，当您启动Intent.ACTION_GET_CONTENT类型的Intent时，它不会在Gallery、Dropbox等之间进行选择... 查看详情

如何在ios中从手机中获取所有图像

】如何在ios中从手机中获取所有图像【英文标题】：howtogetallimagesfromphoneinios【发布时间】：2018-01-1809:55:23【问题描述】：我想从手机中获取所有图像。在照片库中创建多个选择。我正在使用以下代码从手机中获取所有图像。它... 查看详情

Xamarin Android - 从图库中选择图像并获取其路径

...图库中选择一张图片，然后上传。目前，我只是想弄清楚如何获取图像的路径。我首先尝试了找到here的配方，但是，它总是返回n 查看详情

当我在 swift 3 中从图库中获取照片时，为啥收藏视图为空？

】当我在swift3中从图库中获取照片时，为啥收藏视图为空？【英文标题】：whycollectionviewinemptywhenIfetchphotosfromgalleryinswift3?当我在swift3中从图库中获取照片时，为什么收藏视图为空？【发布时间】：2017-06-0306:27:24【问题描述】：我... 查看详情

如何在颤动中从 Firebase 存储中获取下载 URL

】如何在颤动中从Firebase存储中获取下载URL【英文标题】：HowtogetDownloadURLfromFirebaseStorageinflutter【发布时间】：2021-08-1114:10:05【问题描述】：以下代码用于将任何图像从图库/相机上传到Firebase存储。我成功地将图像与元数据一起... 查看详情

Python Kivy 从图库中选择图像

...：2021-09-1122:27:48【问题描述】：是否可以在Kivy应用程序中从图库中加载图像？在Internet上，我只发现设备上所有目录的文件选择器。但我需要一个按钮，当您单击它时，它会打开您选择源的菜单。喜欢this。在Kivy上是否有可能？... 查看详情

Phonegap - 从图库中选择图像

...间】：2011-07-1408:41:34【问题描述】：谁能告诉我，或指出如何从Phonegap/Android中的手机图片库中获取图片的方向？有关于访问相机（效果很好）但不选择现有图像的文档。我正在寻找Phonegap/Javascript而不是Java。提前致谢！【问题讨... 查看详情

Android从图库或相机显示选项中选择图像

】Android从图库或相机显示选项中选择图像【英文标题】：Androidchoseimagefromgalleryorcamerashowoptiontogether【发布时间】：2017-04-2702:49:53【问题描述】：在我的onClick方法中，我调用了两个新意图，一个用于使用相机拍照，另一个用于从... 查看详情

如何在 Ionic 2 或 3 应用程序中加载实际图像之前显示占位符图像

】如何在Ionic2或3应用程序中加载实际图像之前显示占位符图像【英文标题】：HowtoshowaplaceholderimagebeforetheactualimageloadsinanIonic2or3app【发布时间】：2018-03-1106:01:53【问题描述】：早安，我正在开发一个Ionic应用程序，我正在从JSON提... 查看详情

如何在 swift 4 中从图像选择器获取照片本地 url

】如何在swift4中从图像选择器获取照片本地url【英文标题】：Howtogetphotolocalurlfromimagepickerinswift4【发布时间】：2019-01-2516:34:52【问题描述】：我想通过podAlamofire(SessionManager)将照片从画廊(iOS)上传到服务器（uploadUrl在代码中通过.get... 查看详情

在 Core Data 中从库中保存和获取多个图像选择

】在CoreData中从库中保存和获取多个图像选择【英文标题】：SavingandfetchingMultipleImageSelectionFromLibraryinCoreData【发布时间】：2015-07-1413:01:06【问题描述】：我正在构建一个项目，我在其中使用ELCImagepickerController进行多项选择，然后... 查看详情

如何在 Swift 中从相机或照片库加载图像 [关闭]

】如何在Swift中从相机或照片库加载图像[关闭]【英文标题】：HowtoloadimagefromcameraorphotolibraryinSwift[closed]【发布时间】：2016-10-0123:20:17【问题描述】：例如，您如何使用相机拍照或从照片库中选择图像以便能够将其显示在imageView中... 查看详情

Android：从图库中获取图像，在回收器适配器中显示它们

...按钮，用于在上传到firebase之前旋转图像。现在我想知道如何 查看详情