Phonegap插件：如何将Base64string转换为Android中的PNG图像
Android不允许基于Phonegap的应用程序等本机应用程序编写二进制文件。 一个常见的应用是将Base64string转换为图像。 那么，你怎么解决这个问题呢？
解决scheme; 这个插件转换Base64 PNGstring并生成一个图像到SD卡。 我们走吧！
1. Base64解码器
获得这个快速的Base64编码/解码器类称为MiGBase64。 从SourceForge下载它。 在项目的src /文件夹中创build一个名为'util'的文件夹。 将下载的课程放在那里。
2. java
在项目的src /文件夹中创build一个名为'org / apache / cordova'的文件夹。 在其中创build一个名为“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>
参数
- filename ：要生成的文件的名称。 默认情况下与url中的一样。
- 文件夹 ：要生成文件的目录的名称。 默认“SD卡/图片”
-
覆盖 ：如果文件已经存在，请将其replace。 默认为false。
我希望这回答了一些困扰的问题。 快乐的编码！
如果有人想用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 }); }); }
这种解决scheme仅适用于喂一个CLEAN Base64string。 换句话说，应该删除“data：image / png; base64”部分，或者Base64解码器填充失败，写入文件时会导致空指针错误。
另外我注意到图像没有出现在图库中，但它正确地存储在SD卡上。 当我把它下载到我的电脑时，我可以打开它就好了。 不知道这是关于什么。
感谢您的工作！
