2014-03-24 56 views
0

我已經做了大量的研究和測試,但是我正在和左邊的兼容性/清晰度問題。我希望有人對此有明確的解決方案。保存畫布到設備在Phonegap

我的PhoneGap Build(3.1)應用程序從S3中提取圖像,通過html畫布向他們添加覆蓋文本,然後需要通過點擊操作保存到用戶的手機。

這裏有一些相關的細節:

  • 優選它們將被保存到由畫廊(Android)或照片應用(iOS)檢測的位置。
  • 我需要它在Android 2.3以上和iOS 6-7中工作。
  • 我也有位於AWS上的疊加文本的圖像的合成版本。我很樂意將圖像從合成圖像的URL或從畫布直接下載到設備。

下面是我的一些障礙:

  • 我不斷收到「污點畫布」安全錯誤嘗試做「canvas.toDataURL()」的時候,即使我設置S3的CORS權限通配符爲使用的桶。
  • 「下載」屬性似乎是unsupported in most mobile browsers
  • 我會很高興的使用Phonegap's "FileTransfer.download()" method,但我一直沒能找出在那裏我會充分掌握每個設備上正確的文件路徑爲畫廊/照片應用程序

使用是否有一個有效如何讓這個跨平臺完成?

回答

1

雖然我不喜歡回答我的問題了,我發現PhoneGap的插件叫做「Canvas2Image」實際上是爲這個完美的: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') 
); 

注:我不建議在煎茶觸摸使用document.querySelector ......它只是一個明確的參考。

推測性注意:我沒有進一步研究它,但是如果您需要後續鏈接或打開保存的圖像,這可能不是一個好選擇。