PhoneGap Cordova中SignaturePad生成的签名图片下载后秒消失问题排查

嘿，我帮你梳理下这个签名图片消失的问题，大概率是存储路径或者权限的问题，咱们一步步来排查解决：

最常见的原因：用了临时存储目录 #

Cordova里的cordova.file.tempDirectory是系统会自动清理的临时文件夹，你下载的图片存在这里，系统随时可能删掉它，这就是为什么图片刚下载就消失了。

解决：换成持久化存储目录 #

你需要把文件保存到应用私有持久目录或者外部可访问存储：

• 应用私有持久目录（用户看不到，不会被清理）：cordova.file.dataDirectory
• 外部存储（用户能在文件管理器看到，需要权限）：cordova.file.externalDataDirectory

修改你的targetPath代码：

// 错误写法（临时目录）
// var targetPath = cordova.file.tempDirectory + "signature.png";

// 正确写法：应用私有持久目录
var targetPath = cordova.file.dataDirectory + "signature.png";

// 或者外部存储（需配置权限）
// var targetPath = cordova.file.externalDataDirectory + "signature.png";

第二点：检查存储权限 #

如果用外部存储，必须在配置文件里声明权限：

Android 配置（config.xml） #

<platform name="android">
    <config-file parent="/*" target="AndroidManifest.xml">
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
        <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    </config-file>
</platform>

iOS 配置（config.xml） #

<platform name="ios">
    <config-file parent="NSPhotoLibraryAddUsageDescription" target="*-Info.plist">
        <string>需要访问相册来保存签名图片</string>
    </config-file>
</platform>

第三点：优化签名图片的保存方式 #

直接用FileTransfer可能不如用cordova-plugin-file的文件写入API更可靠，尤其是处理Canvas转来的图片：

// 从SignaturePad获取Blob格式的签名图
signaturePad.toBlob(function(blob) {
    // 解析持久化目录
    window.resolveLocalFileSystemURL(cordova.file.dataDirectory, function(dir) {
        // 创建/获取签名文件
        dir.getFile("user_signature.png", {create: true, exclusive: false}, function(fileEntry) {
            // 写入Blob到文件
            fileEntry.createWriter(function(fileWriter) {
                fileWriter.onwriteend = function() {
                    console.log("签名已成功保存到：" + fileEntry.nativeURL);
                    // 这里可以通知用户，或者打开图片
                };
                fileWriter.onerror = function(e) {
                    console.log("写入文件失败：" + e.toString());
                };
                fileWriter.write(blob);
            });
        });
    });
}, "image/png");

第四点：刷新媒体库（Android专属） #

Android系统不会自动扫描新保存的文件，导致你在文件管理器看不到，需要手动触发媒体扫描：

function refreshMediaLibrary(filePath) {
    if (window.cordova && cordova.plugins.MediaScanner) {
        cordova.plugins.MediaScanner.scanFile(filePath, 
            () => console.log("媒体库已刷新，现在能看到图片啦！"),
            (err) => console.log("刷新媒体库失败：" + err)
        );
    }
}

// 在文件保存成功后调用
refreshMediaLibrary(fileEntry.fullPath);

最后：检查FileTransfer的错误回调 #

如果还是有问题，一定要看FileTransfer的错误日志，能帮你定位问题：

fileTransfer.download(
    encodeURI(imageURIsign),
    targetPath,
    (entry) => console.log("下载成功：" + entry.fullPath),
    (error) => {
        console.log("下载错误代码：" + error.code);
        console.log("源地址：" + error.source);
        console.log("目标路径：" + error.target);
    },
    false
);

先试试把存储目录换成持久化的，这应该是最常见的解决方案！

内容的提问来源于stack exchange，提问作者Yesha Shah