离子电容相机，生成完整质量的图像并显示它，而无需生成Base64和DataUri [英] Ionic Capacitor Camera, generate full quality image and display it without generating Base64 and DataUri

问题描述

在我的Ionic项目中，我正在使用Capacitor在移动平台中进行部署.

In my Ionic Project, I am using Capacitor for deployment in mobile platforms.

要从设备捕获图像，我正在使用Capacitor Camera，它可以帮助我获取三种格式的图像. 1. Base64. 2. DataUrl. 3. FileUri.

For capturing an image from device, I am using Capacitor Camera which helps me to get the image in three formats. 1. Base64. 2. DataUrl. 3. FileUri.

onCaptureImage() {
    if (!Capacitor.isPluginAvailable('Camera')) {
      this._sharedService.showToastMessage(
        'Unable To Open Camera', 1000);
      return;
    }
    Plugins.Camera.getPhoto({
      quality: 60,
      source: CameraSource.Prompt,
      correctOrientation: true,
      resultType: CameraResultType.DataUrl
    })
      .then(image => {
        const blobImg = this._sharedService.dataURItoBlob(image.dataUrl);
        this.myfiles.push(blobImg);
        this.urls.push(this.sanitizer.bypassSecurityTrustUrl(image.dataUrl));
      })
      .catch(error => {
        return false;
      });
  }

从这个DataUrl中，我用来显示图像并上传该图像，我将其转换为Blob，然后通过FormData发送.

From this DataUrl I am using to display the image and for uploading this image, I am converting it into Blob and then sending it through FormData.

现在质量是60，我希望质量是100.但是当我们从100个质量图像中生成DataUrl时，它会挂起设备.

Right now the quality is 60, I want the quality as 100. But it hangs the device when we generate DataUrl out of 100 quality image.

我只想知道有什么方法可以生成质量为100的FileUri，并且还可以预览图像而无需从中生成Base64或DataUrl.

I just want to know that is there any way that we can generate FileUri with having quality 100 and also can preview the image without generating Base64 or DataUrl out of it.

谢谢.

推荐答案

巨大的base64字符串的大小是应用程序挂起的原因. 看看这个解决方案...

The size of the huge base64 string is what hangs the app. Look at this solution...

使用以下相机设置:

Camera.getPhoto({
    quality: 100,
    resultType: CameraResultType.Uri,
    source: CameraSource.Prompt
  }).then((image) => {
//imgSrc is passed to src of img tag
imgSrc = this.domSanitizer.bypassSecurityTrustResourceUrl(image && (image.webPath));

// image.path is what you will have to send to the uploadPhoto method as uripath
      });

Uri格式将为您提供本地文件路径，可以轻松地将其传递到文件传输插件... image.path 是相机..

The Uri format will give you the local file path which can be easily passed to the filetransfer plugin... image.path is the local file path returned by the camera..

要将文件传输到服务器，您将需要cordova文件传输插件.代码将如下所示.

For transferring the file to a server, you will need the cordova file-transfer plugin..the code will look like this..

import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer/ngx';

constructor(private transfer: FileTransfer)

uploadPhoto(fileName:string, uripath:string):Promise<any>{
return new Promise((resolve,reject) => {
  const fileTransfer: FileTransferObject = this.transfer.create();
  const options: FileUploadOptions = {
    fileKey: 'file',
    fileName: fileName,
    mimeType: 'image/jpg',
    chunkedMode: false,
    params: {
      //any params that you want to attach for the server to use
    },
    headers: {
      //any specific headers go here
    }
  };
  fileTransfer.upload(uripath, <APIEndpointURL>, options)
    .then((result) => {
      // success
    resolve(result);
    }, (err) => {
      // error
      reject(err);
    });
});
}

使用此方法，无论图像质量如何，您的服务器都将肯定会接收文件..我在node.js和php服务器上都使用了此方法.

With this your server will definitely receive the file, irrespective of image quality.. i have used this method on both node.js and php servers.

这篇关于离子电容相机，生成完整质量的图像并显示它，而无需生成Base64和DataUri的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！