在 img 标签 cordova 中显示带有 cdvfile://* 的图像答案

【问题标题】：Display images with cdvfile://* in img tag cordova在 img 标签 cordova 中显示带有 cdvfile://* 的图像
【发布时间】：2019-02-05 03:28:15
【问题描述】：

我正在使用 cordova-plugin-camera 通过以下选项拍照：

quality: 100,
destinationType: Camera.DestinationType.NATIVE_URI,
sourceType: srcType,
encodingType: Camera.EncodingType.JPEG,
mediaType: Camera.MediaType.PICTURE,
allowEdit: false,
saveToPhotoAlbum: true,
correctOrientation: true

这是有效的，我得到一个这样的 URL/路径：

assets-library://asset/asset.JPG?id=FBA79210-5E65-4C9B-BF19-9F1169B777C0&ext=JPG

然后，我想将此路径转换为 cdvfile:// 以在标签中显示图像。

window.resolveLocalFileSystemURL(imageURI, function(fileEntry) {
        const url = fileEntry.toInternalURL()
})

这也有效，我得到：

cdvfile://localhost/assets-library/asset/asset.JPG?id=FBA79210-5E65-4C9B-BF19-9F1169B777C0&ext=JPG

但是图像没有被渲染。我试图在我的 config.xml 中添加 <access origin="cdvfile:*" /> 但这也不起作用。如何获得有效的路径/url 来显示图像？

最好的祝愿，乔里

【问题讨论】：

运气好吗？我还尝试使用 readAsDataURL（文件插件）加载 DATA_URL，但路径或文件参数没有成功。

标签： ios cordova cordova-plugins phonegap cordova-plugin-camera

【解决方案1】：

我遇到了同样的问题，并设法用不同的方法解决了它。获得cdvfile url 后，我使用Photo Library plugin 通过getPhoto 方法获取blob 文件，该方法传递id 存在于cdvfile url 中，并且我得到了img 源与base64data如下：

photoLibrary.getPhoto('FBA79210-5E65-4C9B-BF19-9F1169B777C0').then((blob)=>{

   var reader = new FileReader();
   reader.readAsDataURL(blob); 
   reader.onloadend = function() {
      var base64data = reader.result;                
      img.src = base64data;
   }
});

更新您还可以使用getThumbnail 函数来改善页面加载，具体取决于您的应用应该处理的照片的质量、大小和数量。

【讨论】：