BlackBerry 10 Cordova / PhoneGap 3.1 FileTransfer图像下载未在设备上显示

时间:2013-10-17 08:02:51

标签: cordova phonegap-plugins blackberry-10

我正在使用filefile-transfer插件并将一些图像文件下载到模拟器。但是,当我尝试使用下载的图像时,它们不会出现。 <img>标记为空,就好像src属性错误一样。

我注意到下载到手机的文件几乎是从服务器发回的响应的两倍,这可能就是为什么我无法在模拟器上本地查看图像的原因?或者我错过了其他什么?

Example code用于下载测试图像并进行查看:

requestFileSystem(LocalFileSystem.PERSISTENT, 7 * 1024 * 1024, function(fs) {
    var ft = new FileTransfer(),
        localPath = fs.root.toURL() +'/bblogo.png';

    ft.download('http://developer.blackberry.com/webroot/img/common/bblogo-black.png', localPath, function(entry) {
        console.log('download success!');
        console.log(entry);
        entry.file(function(file) {console.log(file.size)});
            document.getElementById('test-image').src = localPath;
    }, function(e) { console.log('download error'); console.log(e); })
});

在我的计算机上的模拟器中,这会报告:

  

下载成功!
  对象
  的 4412

有问题的文件在我的电脑上 2818 字节。

  

$ wget http://developer.blackberry.com/webroot/img/common/bblogo-black.png
  $ wc -c bblogo-black.png
      2818 bblogo-black.png

我修改了FileTransfer插件的本地副本并查看了XHR响应长度,它与文件的大小相对应。在磁盘上为iOS报告的下载文件与我计算机上的大小相同。

我已经使用我的测试代码创建了GitHub repository,以防有人想尝试一下。请注意,它不适用于iOS,因为localPath设置为fs.root.toURL()而不是fs.root.fullPath

更新

我认为我应该尝试看看我是否可以在我的计算机和模拟器中上传大小相同的文件然后查看我是否可以查看该文件。我失败了,我仍然无法在设备上查看该文件。

所以我Base64编码了一个10x10像素的粉红色png然后尝试在手机上创建该文件。而且文件大小也略有不同。在我的计算机上,该文件是 942 字节,并且设备上报告的文件大小为 942 。在iOS上测试它会创建文件,之后也可以查看它。但不是黑莓手机。

查看其他人的示例我应该将文件保存到blackberry.io.shared,但我根本无法访问全局变量blackberry。查看the documentation我猜测该路径应该是/accounts/1000/shared,但尝试使用accounts访问fs.root.getDirectory时,accounts不存在就会失败。

尝试使用Base64Binary

将base64编码文件添加到设备的代码
var imageBase64 = 'iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxRDZDMEZFNTJGMkExMUUzQTA1NDgxOUY4RTYwN0MzNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxRDZDMEZFNjJGMkExMUUzQTA1NDgxOUY4RTYwN0MzNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjFENkMwRkUzMkYyQTExRTNBMDU0ODE5RjhFNjA3QzM2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjFENkMwRkU0MkYyQTExRTNBMDU0ODE5RjhFNjA3QzM2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+9WDqKgAAAAZQTFRF/wDwAAAAx8UEpAAAAA5JREFUeNpiYKAnAAgwAABuAAEcD8SQAAAAAElFTkSuQmCC';

requestFileSystem(LocalFileSystem.PERSISTENT, 7 * 1024 * 1024, function(fs) {
    var ft = new FileTransfer(),
        localPath = fs.root.toURL() +'hot-pink.png';

    fs.root.getFile('hot-pink.png', {create: true}, function(entry) {
        entry.createWriter(function(writer) {
            writer.onwriteend = function(e) {
                console.log('writeend');
                console.log(e.target);
            }
            writer.onerror = function(e) {
                console.log('write error');
                console.log(e.target.error);
            }

            writer.write(Base64Binary.decodeArrayBuffer(imageBase64))
        }, function(error) {
            console.log('error creating writer');
            console.log(error);
        })
    }, function(error) {
        console.log('error getting file');
        console.log(error);
    })
})


requestFileSystem(LocalFileSystem.PERSISTENT, 7 * 1024 * 1024, function(fs) {
    console.log(fs.root.toURL());
    var path = fs.root.toURL() + '/hot-pink.png';
    console.log(path);
    resolveLocalFileSystemURI(path, function(entry) {
        console.log('success accessing '+ path);
        console.log(entry);
        console.log(entry.toURL())
        entry.file(function(file) {
            console.log('success accessing file');
            console.log(file.size);
        }, function(error) {
            console.log('error accessing file');
            console.log(e);
        })
    }, function(error) {
        console.log('error accessing '+ path);
        console.log(error);
    })
}, function(error) {
    console.log('error accessing filesystem');
    console.log(error);
});

更新2

我注意到上面的代码没有正确处理Base64,现在通过将Base64Binary添加到全局命名空间来纠正它。执行此操作后,添加到BlackBerry和iOS的文件大小相同。在iOS上,如果我使用报告的toURL但不在BlackBerry上,则可以显示该文件。

1 个答案:

答案 0 :(得分:0)

您是否尝试过使用此次通话

window.webkitRequestFileSystem(window.PERSISTENT, 5*1024*1024, onSuccess, null);

而不是Cordova / Phonegap的电话

window.requestFileSystem(LocalFileSystem.PERSISTENT, 5*1024*1024, onSuccess, null);