Titanium - 将远程图像保存到文件系统

Question

我正在用钛构建一个应用程序，我想在手机中保存用户的个人资料图片。在我的登录功能中，在 API 响应之后，我尝试这样做：

Ti.App.Properties.setString("user_picture_name", res.profil_picture);
var image_to_save = Ti.UI.createImageView({image:img_url}).toImage();
var picture = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, res.profil_picture); //As name, the same as the one in DB
picture.write(image_to_save);

在我想要显示图像的视图中：

var f = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory,Ti.App.Properties.getString("user_picture_name") );

var image = Ti.UI.createImageView({
    image:f.read(),
    width:200,
    height:100,
    top:20
});
main_container.add(image);

但是图像没有出现。有人可以帮我吗？

非常感谢:)

Answer 1

您的代码有 2 个问题：

1 - 您不能使用 toImage() 方法，除非您的图像视图呈现在 UI 堆栈上或只是在显示上。相反，您应该使用 toBlob() 方法。

2 - 点号。 1 也不会以您使用的方式工作，因为您不能直接使用 toBlob() 方法，直到或除非来自 url 的图像完全加载，这意味着直到它显示在图像视图上。要检查图像何时加载，请使用 Ti.UI.ImageView onload event

但是，还有另一种更好的方法来执行此类任务。

由于您从登录 API 响应中获得了图像 url，因此您可以使用此 url 从 http 客户端调用中获取图像，如下所示：

function fetchImage() {
    var xhr = Ti.Network.createHTTPClient({
        onerror : function() {
            alert('Error fetching profile image');
        },

        onload : function() {
            // this.responseData holds the binary data fetched from url
            var image_to_save = this.responseData;

            //As name, the same as the one in DB
            var picture = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, res.profil_picture);
            picture.write(image_to_save);

            Ti.App.Properties.setString("user_picture_name", res.profil_picture);

            image_to_save = null;
        }
    });

    xhr.open("GET", img_url);
    xhr.send();
}

Answer 2

你不需要手动缓存远程图片，因为

远程图像会自动缓存在 iOS 平台上，因为 版本 3.1.0，在 Android 平台上。

[see docs here & credit to Fokke Zandbergen]

只需在您的 UI 中使用远程图像 url，第一次访问 Titanium 会为您下载并缓存它；下一次访问相同的图像 url 实际上将在本地设备上自动缓存的版本上（没有代码是最好的代码）

Hth.