来自 ms-appdata:///local 的 img 未使用 Winjs/cordova 显示

Question

我正在使用 Visual Studio 和 cordova 工具构建一个小型应用程序。该应用程序显示一系列问题，对于每个问题，用户可以拍摄多张照片并在其中绘图。

该应用程序针对 Windows 8.1，但将来会针对 android，因此我尝试不使用本机 windows 功能。

在应用程序中有一个叠加层，用户可以在其中使用 cordova-pluggin-camera 拍照。然后将拍摄的照片显示在 img 元素中，然后将其复制到要绘制的 canvas 元素，当用户将照片（带有用户绘图）保存到 ms-appdata://local/XXX .png 图像已正确保存，我已经检查了文件系统，它在那里并且是一个有效的 png 文件。

这是我用来编写的代码，使用cordova-plugin-file (v 4.1.1-dev) 将图像写入文件：

window.resolveLocalFileSystemURL(store, function (dir) {

                console.log("got main dir", dir);
                //gravar imagem para ficheiro          
                dir.getFile(fileAnotacao, { create: true }, function (file) {
                    console.log("got the file", file);

                    setTimeout(function () {

                        if (apagou) { //apagou a referencia, criar nova e criar ficheiro
                            dir.getFile(fileAnotacao, { create: true }, function (file) {
                                writeLog(decodedData, file);
                            });
                        } else
                            //grava ficheiro
                            writeLog(decodedData, file);
                    }, 1500);

                    //1º apaga ficheiro se existir
                    file.remove(function () {
                        console.log('File removed.');
                        apagou = true;
                    }, fail);
                });
            });

writelog函数是这样的：

 function writeLog(str, lob) {
    if (!lob) return;

    lob.createWriter(function (fileWriter) {

        fileWriter.seek(fileWriter.length);

        fileWriter.write(str);
        console.log("ok, in theory i worked");
    }, fail);
}

将文件保存到磁盘后，我用两个文件的路径更新命名空间。原件名为 "original" ，绘制的名为 "anotacao".

之后，我使用连接到 Winjs Flipview 组件的文件名更新了第二个命名空间。我使用第二个命名空间，因为我只想显示来自原始命名空间的一个子部分的图像，即来自一个问题。

function AtualizarFotos() {

    var id = document.getElementById("id_val_foto").innerHTML;

    //atualizar namespaces com as fotos
    var idq = id.split("_");
    //quest is used to fectch the correct question, so it knows what photos to show
    var quest = GetPergunta(idq[1]);
    if (quest) {
        if (FotosNP.ftList) {

            FotosNP.ftList.splice(0, FotosNP.ftList.length);
            quest.Fotos.forEach(function additem(value, index, array) {
                FotosNP.ftList.push(value);
            });
     //updates a counter
            document.getElementById("contaFotos").innerHTML = FotosNP.ftList.length;
        }
    }

在 HTML 中，我有一个模板和一个连接到 FotosNP 命名空间的 fliview。如果将 "original" 放在绑定字段中，则翻转视图可以正常工作。如果我将 "anotacao" 放在绑定字段中，即使我关闭并打开叠加层，图像也不会加载。

两张照片保存到同一个文件夹：ms-appdata:///local/。

我已经使用 DOM 检查器检查了 HTML 并且 src 属性是正确的。我试过使用 Javascript 控制台并在图像标签上显示绘制的照片，但它也没有显示。

我试过在更新 Flipview 命名空间之前设置超时，因为我认为这可能是写入磁盘的某种延迟。

我尝试了不同的组件，还使用了普通的 img 元素，但它没有显示照片。

photo not shown error

如果我关闭并再次运行应用程序，并加载已保存的带照片的问题，照片会正确显示。

我在写入文件时做错了什么？请帮忙。

Answer 1

经过几天的努力，终于寻求帮助，我发现确实是延迟，由写入功能引起的。

我解决了将命名空间更新放在文件编写器的 onwriteend 事件上的问题。

fileWriter.onwriteend= function (evt){
    console.log("ok, in theory i worked");
    quest.Fotos.push({ 
        id: idFoto, 
        original: app.lastCapture, 
        anotacao: store + fileAnotacao 
    });
    AtualizarFotos();
}

我已经尝试过设置超时，但时间一定不够。有了这个我会有些滞后，但至少它有效。

来自 ms-appdata:///local 的 img 未使用 Winjs/cordova 显示

img from ms-appdata:///local not showing using Winjs/cordova

javascript

cordova

cordova-plugins

winjs

cordova-plugin-file