android - 在 Phonegap 中将 Canvas 保存到设备

Question

我已经对此进行了大量研究和测试，但我经常遇到兼容性/清晰度问题。我希望有人对此有明确的解决方案。

我的 PhoneGap Build (3.1) 应用程序从 S3 中提取图像，通过 html Canvas 向它们添加覆盖文本，然后需要在点击操作时将其保存到用户的手机中。

这里有一些相关的细节:

• 最好将它们保存到相册 (android) 或照片应用程序 (iOS) 可检测到的位置。
• 我需要它在 Android 2.3 及 iOS 6-7 中运行。
• 我在 AWS 上还有一个带有叠加文本的图像合成版本。我很乐意从合成图像的 URL 或直接从 Canvas 将图像下载到设备。

这是我的一些障碍:

• 尝试执行“canvas.toDataURL()”时，我不断收到“受污染的 Canvas ”安全错误，即使我在 S3 的 CORS 权限上为已用存储桶设置了通配符。
• “下载”属性似乎是 unsupported in most mobile browsers .
• 我很乐意使用 Phonegap's "FileTransfer.download()" method ，但我一直无法弄清楚在哪里可以充分获取每台设备上的正确文件路径以用于图库/照片应用

是否有一种有效的方法可以跨平台完成这项工作？

Answer 1

尽管我不想回答自己的问题，但我发现名为“Canvas2Image”的 PhoneGap 插件实际上非常适合此问题:https://github.com/devgeeks/Canvas2ImagePlugin

它在 phonegap 插件目录中的描述非常模糊，但它很容易将图像保存到适当的目录。它需要一个成功回调、一个错误回调和 Canvas 元素作为参数。它也适用于 iOS 和 Android，由于 phonegap 插件目录描述，我不清楚这一点。

window.canvas2ImagePlugin.saveImageDataToLibrary(
    function(msg){
        Ext.Msg.alert('Success!', 'The image was saved to the photos gallery on your device.');
    },
    function(err){
        Ext.Msg.alert('Aww, Schucks!', 'There was a problem saving the image to your device.');
    },
    document.querySelector('canvas')
);

注意:我不建议在 Sencha Touch 中使用 document.querySelector...它只是一个明确的引用。

投机注:我没有进一步研究它，但如果您需要随后链接到或打开保存的图像，这似乎不是一个很好的选择。