Phonegap Plugin: Cómo convertir Base64 String a una imagen PNG en Android

Android no permite que aplicaciones nativas como las aplicaciones basadas en Phonegap escriban archivos binarios. Una aplicación común es la conversión de cadenas Base64 a imágenes. Entonces, ¿cómo vas sobre este problema?

La solución; Este complemento que convierte una cadena PNG Base64 y genera una imagen en la tarjeta sdCard. ¡Vamonos!

1. El descodificador Base64

Obtenga esta clase de codificación / decodificador de Base64 en llamas llamada MiGBase64. Descárgalo desde SourceForge . Cree una carpeta llamada 'util' dentro de su proyecto src / carpeta. Coloque allí la clase descargada.

2. El java

Cree una carpeta llamada 'org / apache / cordova' en la carpeta src / del proyecto. Cree en él un archivo Java llamado "Base64ToPNG.java" con el siguiente código fuente.

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. El Javascript

Escriba este JavaScript como Base64ToPNG.js en la carpeta www de su proyecto. No se olvide de incluir una referencia a ella en sus archivos 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. El archivo plugins.xml

Agregue lo siguiente al archivo res / xml / plugins.xml

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

5. Finalmente, ejemplos HTML y los parámetros

 <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> 

Parámetros

  1. Filename : Nombre del archivo que se generará. Por defecto igual que el de url.
  2. Folder : Nombre del directorio para generar el archivo. Por defecto "sdcard / Imágenes"
  3. Sobrescribir : Si el archivo ya existe, reemplácelo. Por defecto false.

    Espero que esto responda a algunas preguntas molestas. Codificación feliz!

Para cualquiera que quiera usar esto con kineticjs, lo siguiente funciona como un regalo:

 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 }); }); } 

Esta solución sólo funciona cuando se alimenta una cadena CLEAN Base64. En otras palabras, la parte "data: image / png; base64" debe ser eliminada o el relleno del decodificador Base64 falla, causando un error nullpointer al escribir el archivo.

También me di cuenta de que la imagen no se muestra en la Galería, sino que se almacena correctamente en la tarjeta SD. Cuando lo descargo a mi PC puedo abrirlo muy bien. No estoy seguro de qué se trata.

¡Gracias por el trabajo!

  • SMS en hebreo en Android
  • Extracción de mensajes de WhatsApp desde una aplicación Phonegap
  • Pasar y devolver los valores de javascript y android y utilizarlos como plugin de brecha de teléfono
  • PhoneGap - Detecta el tipo de dispositivo en la brecha telefónica
  • Cordova error (ERROR construyendo una de las plataformas)
  • Abrir una actividad de un CordovaPlugin
  • Plugin de geolocalización de Phonegap no agrega para android
  • Phonegap: cómo comprobar si el gps está habilitado
  • Notificación push de Pubnub no funciona para la aplicación móvil de plataforma cruzada
  • ¿Cuál es la diferencia entre un plugin PhoneGap y addJavascriptInterface?
  • Incorporación Cordova WebView, Receptor no está registrado
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.