Angular 离子电容照相机，生成全质量图像并显示，无需生成Base64和DataUri

在我的Ionic项目中，我使用电容器部署在移动平台上

为了从设备上捕获图像，我使用电容相机，它可以帮助我获得三种格式的图像。 1.Base64。 2.数据URL。 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

发送它

现在质量是60，我希望质量是100。但当我们从100张高质量图像中生成

DataUrl

时，它会挂起设备

我只是想知道有没有什么方法可以生成质量为100的

FileUri

，也可以预览图像而不生成

Base64

或

DataUrl

---

谢谢。

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

使用摄像机设置，如下所示：

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格式将为您提供本地文件路径，可以轻松地将其传递给filetransfer插件image.path是相机返回的本地文件路径

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

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);
    });
});
}

从'@ionic native/file transfer/ngx'导入{FileTransfer，FileUploadOptions，FileTransferObject}；
构造函数（私有传输：FileTransfer）
上传照片（文件名：string，uripath:string）：承诺{
返回新承诺（（解决、拒绝）=>{
const fileTransfer:FileTransferObject=this.transfer.create（）；
常量选项：文件上载选项={
fileKey:'文件'，
fileName:fileName，
mimeType:'image/jpg'，
chunkedMode:false，
参数：{
//要附加以供服务器使用的任何参数
},
标题：{
//这里有任何特定的标题吗
}
};
fileTransfer.upload（路径、选项）
。然后（（结果）=>{
//成功
决心（结果）；
}，（错误）=>{
//错误
拒绝（错误）；
});
});
}

这样，无论图像质量如何，您的服务器都肯定会收到该文件。。我在node.js和php服务器上都使用过这种方法