Phonegap插件：如何將Base64字符串轉換爲Android中的PNG圖像

Question

Android不允許基於Phonegap的應用程序等本機應用程序編寫二進制文件。一個常見的應用是將Base64字符串轉換爲圖像。那麼，你如何解決這個問題呢？

Answer 1

該解決方案;這個插件可以轉換Base64 PNG字符串並將圖像生成到SD卡。我們走吧！

1. Base64編碼解碼器

獲取稱爲MiGBase64此極快的Base64編碼/解碼器類。從SourceForge下載它。在項目的src /文件夾中創建一個名爲'util'的文件夾。將下載的課程放在那裏。

2. java的

創建一個名爲 '組織/阿帕奇/科爾多瓦' 你的項目的src /文件夾中的文件夾。 使用以下源代碼在其中創建一個名爲「Base64ToPNG.java」的Java文件。

package org.apache.cordova; 

/** 
* A phonegap plugin that converts a Base64 String to a PNG file. 
* 
* @author mcaesar 
* @lincese MIT. 
*/ 

import java.io.File; 
import java.io.FileOutputStream; 
import java.io.IOException; 

import org.apache.cordova.api.Plugin; 
import org.apache.cordova.api.PluginResult; 
import org.json.JSONArray; 

import android.os.Environment; 
import java.io.*; 
import org.json.JSONException; 
import org.json.JSONObject; 
import util.Base64; 

public class Base64ToPNG extends Plugin { 

    @Override 
    public PluginResult execute(String action, JSONArray args, String callbackId) { 

     if (!action.equals("saveImage")) { 
      return new PluginResult(PluginResult.Status.INVALID_ACTION); 
     } 

     try { 

      String b64String = ""; 
      if (b64String.startsWith("data:image")) { 
       b64String = args.getString(0).substring(21); 
      } else { 
       b64String = args.getString(0); 
      } 
      JSONObject params = args.getJSONObject(1); 

      //Optional parameter 
      String filename = params.has("filename") 
        ? params.getString("filename") 
        : "b64Image_" + System.currentTimeMillis() + ".png"; 

      String folder = params.has("folder") 
        ? params.getString("folder") 
        : Environment.getExternalStorageDirectory() + "/Pictures"; 

      Boolean overwrite = params.has("overwrite") 
        ? params.getBoolean("overwrite") 
        : false; 

      return this.saveImage(b64String, filename, folder, overwrite, callbackId); 

     } catch (JSONException e) { 

      e.printStackTrace(); 
      return new PluginResult(PluginResult.Status.JSON_EXCEPTION, e.getMessage()); 

     } catch (InterruptedException e) { 
      e.printStackTrace(); 
      return new PluginResult(PluginResult.Status.ERROR, e.getMessage()); 
     } 

    } 

    private PluginResult saveImage(String b64String, String fileName, String dirName, Boolean overwrite, String callbackId) throws InterruptedException, JSONException { 

     try { 

      //Directory and File 
      File dir = new File(dirName); 
      if (!dir.exists()) { 
       dir.mkdirs(); 
      } 
      File file = new File(dirName, fileName); 

      //Avoid overwriting a file 
      if (!overwrite && file.exists()) { 
       return new PluginResult(PluginResult.Status.OK, "File already exists!"); 
      } 

      //Decode Base64 back to Binary format 
      byte[] decodedBytes = Base64.decode(b64String.getBytes()); 

      //Save Binary file to phone 
      file.createNewFile(); 
      FileOutputStream fOut = new FileOutputStream(file); 
      fOut.write(decodedBytes); 
      fOut.close(); 


      return new PluginResult(PluginResult.Status.OK, "Saved successfully!"); 

     } catch (FileNotFoundException e) { 
      return new PluginResult(PluginResult.Status.ERROR, "File not Found!"); 
     } catch (IOException e) { 
      return new PluginResult(PluginResult.Status.ERROR, e.getMessage()); 
     } 

    } 
} 

3. JavaScript的

寫JavaScript作爲Base64ToPNG.js到項目的WWW文件夾。不要忘記在你的HTML文件中包含對它的引用。

/**Works on all versions prior and including Cordova 1.6.1 
* by mcaesar 
* MIT license 
* 
*/ 

(function() { 
    /* This increases plugin compatibility */ 
    var cordovaRef = window.PhoneGap || window.Cordova || window.cordova; // old to new fallbacks 

    /** 
    * The Java to JavaScript Gateway 'magic' class 
    */ 
    function Base64ToPNG() { } 

    /** 
    * Save the base64 String as a PNG file to the user's Photo Library 
    */ 
    Base64ToPNG.prototype.saveImage = function(b64String, params, win, fail) { 
     cordovaRef.exec(win, fail, "Base64ToPNG", "saveImage", [b64String, params]); 
    }; 

    cordovaRef.addConstructor(function() { 
     if (!window.plugins) { 
      window.plugins = {}; 
     } 
     if (!window.plugins.base64ToPNG) { 
      window.plugins.base64ToPNG = new Base64ToPNG(); 
     } 
    }); 

})(); 

4. plugins.xml文件

添加以下RES/XML/plugins.xml文件

<plugin name="Base64ToPNG" value="org.apache.cordova.Base64ToPNG"/> 

5.最後，HTML實施例和參數

<button onclick="test();">No optional params required, Cowboy.</button> </br> 
<button onclick="test2();">Make PNG with some parameters</button> 

<script src="Base64ToPNG.js" type="text/javascript"></script> 

<script type="text/javascript"> 

//May have a mime-type definition or not 
var myBase64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="//a red dot 


function test(){ 

    //Illustrates how to use plugin with no optional parameters. Just the base64 Image. 
    window.plugins.base64ToPNG.saveImage(myBase64, {}, 
     function(result) { 
      alert(result); 
     }, function(error) { 
      alert(error); 
     }); 
} 

//No mimetype definition example 
var myOtherBase64 = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" 

function test2(){ 

    //Shows how to use optional parameters 
    window.plugins.base64ToPNG.saveImage(myBase64, {filename:"dot.png", overwrite: true}, 
     function(result) { 
      alert(result); 
     }, function(error) { 
      alert(error); 
    }); 

} 
</script> 

個參數

1. 名：名稱的文件的產生。默認情況下與url中的相同。
2. 文件夾：要生成文件的目錄的名稱。默認「sdcard /圖片」

3. 覆蓋：如果文件已經存在，請將其替換。默認爲false。

   我希望這可以解答一些困擾的問題。快樂的編碼！

Answer 2

該解決方案僅適用於餵它CLEAN Base64字符串。 換句話說，應該刪除「data：image/png; base64」部分或者Base64解碼器填充失敗，寫入文件時會導致空指針錯誤。

另外我注意到圖像沒有出現在圖庫中，但它正確存儲在SD卡上。當我將它下載到我的PC時，我可以打開它。 不確定這是關於什麼。

感謝您的工作！

Answer 3

佛有人想用kineticjs使用，下面的工作一種享受：

function saveCanvas() { 
    $('#save').bind($bind, function(){ 
     stage.toDataURL({ 
     callback: function(dataUrl){ 
      window.plugins.base64ToPNG.saveImage(dataUrl.substr(22,dataUrl.length), {}, 
       function(result) { 
        alert(result); 
       }, function(error) { 
        alert(error); 
       } 
      ); 
     }, 
      mimeType: 'image/png', 
      quality: 0.5 
     }); 
    }); 
}