来自Cordova相机的Javascript文件对象的CreateObjectUrl

CreateObjectUrl of Javascript file object from Cordova camera

本文关键字：对象 CreateObjectUrl 文件 Javascript 相机 来自 Cordova      更新时间：2023-09-26

在我们的应用程序中，用户可以附加图像，它们将保存在本地以供以后上传。我们需要能够显示附加图像的缩略图。

对于 Android，我们使用 File_Uri 从 Cordova 相机插件中检索图像，并将 javascript File 对象存储在本地数据库中。但是，当我尝试使用窗口显示该图像的缩略图时。URL.createObjectURL(( 在该 File 对象上，它失败并显示"类型错误"。

当使用用户附加到文件输入的文件时，这在桌面浏览器上工作正常，但由于某种原因，Cordova在Android上提供给我们的文件不起作用。

我知道我可以将其更改为使用 FileReader，并且它确实以这种方式工作，但这需要更改与我们的 Windows 和 Web html5 应用程序共享的一堆其他代码(此处未显示(，因此我们希望尽可能避免更改方法。

以下是代码的精简版本：

navigator.camera.getPicture(function (fileUrl) {
    window.resolveLocalFileSystemURL(fileUrl, function (fileEntry) {
        fileEntry.file(function (file) {
            // Save File
            // ...
            // Get DataUrl of image
            dataUrl = window.URL.createObjectURL(file);
        });
    });
}, function (error) {
    alert(error);
}, {
    quality: 40,
    destinationType: Camera.DestinationType.FILE_URI,
    sourceType: Camera.PictureSourceType.CAMERA,
    encodingType: Camera.EncodingType.JPEG,
    saveToPhotoAlbum: false
});

从相机和相册检索的图像失败。我在这里做错了什么吗？调试器显示文件对象是 Javascript File 对象(这是我们想要的(，但由于某种原因它无法创建对象 url。

PhoneGap 文件插件(许多其他插件的依赖项，包括相机(用自己的实现替换了本机File实现。此替换不是 Blob 的实例(不继承自(，因此 createObjectURL 方法失败，正如您发现的那样。

您可以使用File的localURL字段来获取适合<img>标签的内容，但在您的情况下，这将有点循环。在调用resolveLocalFileSystemURL之前，我会设置您的缩略图： 

navigator.camera.getPicture(function (fileUrl) {
    // just grab this here
    dataUrl = fileUrl;
    window.resolveLocalFileSystemURL(fileUrl, function (fileEntry) {
        fileEntry.file(function (file) {
            // Do your other work here
            // ...
        });
    });
}, function (error) {
alert(error);
}, {
    quality: 40,
    destinationType: Camera.DestinationType.FILE_URI,
    sourceType: Camera.PictureSourceType.CAMERA,
    encodingType: Camera.EncodingType.JPEG,
    saveToPhotoAlbum: false    
});

我认为window.URL是特定于Firefox的。试试window.webkitURL

相关文章：