2014-07-18 158 views
1

我正在創建一個允許用戶拍照的應用程序。拍攝的照片繪製到畫布上,並在畫布上完成圖像編輯後用當前日期和其他用戶特定信息進行標記,我可以將圖像作爲DataUri獲取,但應用程序需要將圖像保存到手機本地文件系統並獲取設備文件系統上保存位置的路徑。以下是該得到dataURI代碼:使用Phonegap將Canvas圖像保存爲手機文件系統中的圖像?

var canvas = $('#myCanvas')[0]; 
    var context = canvas.getContext('2d'); 
    var imageObj = new Image(); 
    var scale = 0.2; 
    var imgWidth, imgHeight; 
    imageObj.src = "data:image/jpeg;base64," + imageData; 
    imageObj.onload = function() { 

     var mpImg = new MegaPixImage(imageObj); 

     if (z.globals.deviceType == "iPhone") { 

      imgWidth = imageObj.width, 
       imgHeight = imageObj.height; 
      mpImg.render(document.getElementById('canvas'), { width: imgWidth * scale, height: imgHeight * scale }); 

     } else { 

      canvas.width = 670; 
      canvas.height = 500; 
      context.drawImage(imageObj, 0, 0, 670, 500); 

     } 

     var dateTaken = new Date(); 

     context.fillStyle = "#FFFFFF"; 

     context.fillText(toString(dateTaken), 0, 30); 

     largeImg.src = canvas.toDataURL(); 

是否有使用PhoneGap的保存dataURI到設備的文件系統,並獲得文件路徑回來的方式。

我嘗試了canvas2ImagePlugin.js,但它將圖像保存爲圖庫,但不返回文件路徑。

任何建議,將不勝感激。

+0

你想將其保存爲圖像文件或64位編碼的PNG URL文件? –

回答

2

的確,canvas2ImagePlugin返回保存文件的URI。

這是傳遞給成功回調的參數,在文檔中稱爲「msg」。

window.canvas2ImagePlugin.saveImageDataToLibrary(
     function(msg){ 
      console.log("Imaged saved to URI : "+msg); 
     }, 
     function(err){ 
      console.log(err); 
     }, 
     document.getElementById('myCanvas') 
    ); 

它返回是這樣的:

Imaged saved to URI :/storage/sdcard1/Pictures/c2i_1862014144659.png

+0

只是一個簡短的說明,我的答案是不幸的只適用於Android。對於IOS,插件只是在msg參數中返回'Image saved':( – QuickFix

+0

,所以經過一年後,你是否找到IOS的解決方案?你介意在這裏分享解決方案嗎? – ggDeGreat

+1

這個問題在這裏討論:https:/ /github.com/devgeeks/Canvas2ImagePlugin/issues/38 – QuickFix

相關問題