Question

我已就此进行了大量研究和测试，但左右兼容性/清晰度问题。我希望有人有一个明确的解决方案。

我的PhoneGap Build（3.1）应用程序从S3中提取图像，通过html画布向其添加叠加文本，然后需要在点击操作时保存到用户的手机中。

以下是一些相关细节：

最好将它们保存到Gallery（Android）或照片应用程序（iOS）可检测的位置。
我需要它在Android 2.3和iOS 6-7中工作。
我还有一个合成版本的图片，其中覆盖文字位于AWS上。我很乐意将图像从合成图像的URL或直接从画布下载到设备。

以下是我的一些障碍：

我一直在＆＃34;污染帆布＆＃34;尝试执行＆＃34; canvas.toDataURL（）＆＃34;时出现安全错误，即使我在S3的已使用存储桶的CORS权限上设置了通配符。
＆＃34;下载＆＃34;属性似乎是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 ......这只是一个明确的参考。

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

将画布保存到Phonegap中的设备

1 个答案: