如何使用 phonegap 读取和显示本地联系人列表照片答案

【问题标题】：How to read and display native contact list photo using phonegap如何使用 phonegap 读取和显示本地联系人列表照片
【发布时间】：2014-01-10 23:01:49
【问题描述】：

我正在Phonegap 上构建。非常漂亮，因为我发现了如何建立一个联系人列表。我有完成教程，现在想添加它以更好地学习电话间隙。

我想做的是在商品详情页面。联系人照片返回“/var/”的 url 文件夹/45/xfgjqr4j59144x8gzq4gdrpw0000gn/T/photo_004.jpg”。我的问题是我如何才能真正显示它？我假设 / var 目录不能通过 img 标签访问（因为图像不是显示），但我假设该文件可通过 Phonegap 访问 API。我进一步假设它以某种方式通过 File API。那是我的思路详细到哪里，我不能再进一步了。

谁能帮助我重回正轨？任何人都有一个如何做的例子显示联系人列表中的图像？

【问题讨论】：

我不是PG用户，但是<img src= "/var/ folders/45/xfgjqr4j59144x8gzq4gdrpw0000gn/T/photo_004.jpg">有效吗？只是出于好奇而询问。
您使用的是哪个版本的 PG？ 2.x 还是 3.x？
PG 3.x 版本，我正在使用。

标签： cordova

【解决方案1】：

在PhoneGap API File documentation 上查看此链接。您可以将该文件读取为 base64 字符串，并将其嵌入 HTML img 标签中：

<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

可能是这样，以PhoneGap 2.5为例：

function loadImage(imgId, fileName){
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,
        function(fileSystem){
            fileSystem.root.getFile(fileName, null,
                function(fileEntry) {
                    fileEntry.file(
                        function(file){
                            var reader = new FileReader();
                            reader.onloadend = function(evt) {
                                var image = document.getElementById(imgId);
                                image.src = "data:image/png;base64," + evt.target.result; //You must specify the image format: png, gif, ...
                             };
                             reader.readAsDataURL(file);
                        }
                        , fail);
                }
                , fail);
        }
        , fail);
}

function fail(evt) {
    console.log(evt.target.error.code);
}

然后，使用id="contact1" 为img 节点加载图像：

loadImage("contact1", "/var/folders/45/xfgjqr4j59144x8gzq4gdrpw0000gn/T/photo_004.jpg");

这只是一个模糊的想法，我还没有测试过。

【讨论】：