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?

3 Solutions collect form web for “Phonegap Plugin: Cómo convertir Base64 String a una imagen PNG en Android”

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!

  • Cómo utilizar los complementos phonegap en nuestro proyecto android
  • Obtener la fuerza de la conexión en Phonegap
  • notificaciones push de Google Chrome android
  • Phonegap Build CLI-5.2.0 Descargar y cerrar desde dentro de la aplicación Web
  • Concatenar y minify los archivos del plugin cordova / phonegap
  • Cómo cargar e importar un archivo CSS / JS desde el teléfono en el teléfono?
  • Anclaje inverso de Android sobre usb (no raíz)
  • Android - PhoneGap Native Controls
  • Soporte de Chromecast en PhoneGap / Córdoba
  • Cordova default config.xml URI no está registrado
  • La generación de Gradle falló cuando el soporte de importación-v4-22.0.0
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.