11

Android では、Phonegap ベースのアプリなどのネイティブ アプリによるバイナリ ファイルの書き込みは許可されていません。一般的なアプリケーションは、Base64 文字列を画像に変換することです。では、この問題をどのように解決しますか？

4

3 に答える 3

24

ソリューション; Base64 PNG 文字列を変換し、画像を sdCard に生成するこのプラグイン。さあ行こう！

1. Base64 デコーダー

MiGBase64 と呼ばれるこの非常に高速な Base64 エンコード/デコーダー クラスを入手してください。SourceForgeからダウンロードしてください。プロジェクトの src/ フォルダー内に「util」というフォルダーを作成します。ダウンロードしたクラスをそこに配置します。

2.ジャバ

プロジェクトの src/ フォルダー内に「org/apache/cordova」というフォルダーを作成します。その中に、次のソース コードを含む「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. filename : 生成するファイルの名前。デフォルトでは、url のものと同じです。
  2. folder : ファイルを生成するディレクトリの名前。デフォルトでは「sdcard/Pictures」

  3. overwrite : ファイルが既に存在する場合は、それを置き換えます。デフォルトでは false です。

    これがいくつかの厄介な質問に答えてくれることを願っています。ハッピーコーディング！

于 2012-07-09T01:03:37.317 に答える
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
        });
    });
}
于 2012-11-29T11:22:25.197 に答える
2

このソリューションは、CLEAN Base64 文字列をフィードする場合にのみ機能します。つまり、「data:image/png;base64」の部分を削除する必要があります。そうしないと、Base64 デコーダーのフィルが失敗し、ファイルの書き込み時に nullpointer エラーが発生します。

また、画像がギャラリーに表示されないことに気付きましたが、SD カードには正しく保存されています。PCにダウンロードすると、問題なく開くことができます。それが何についてなのかわからない。

仕事をありがとう！

于 2012-07-29T12:20:37.353 に答える