5

画像を base64 にエンコードしてサーバーに送信しようとしています。画像を取得すると、表示されるのはすべて空白です。

エンコードに使用しているコードは次のとおりです。

encodeImageUri = function(imageUri) {
        var c = document.createElement('canvas');
        var ctx = c.getContext("2d");
        var img = new Image();
        img.onload = function() {
            c.width = this.width;
            c.height = this.height;
            ctx.drawImage(img, 0, 0);
        };
        img.src = imageUri;
        var dataURL = c.toDataURL("image/jpeg");

        return dataURL.slice(22, dataURL.length);
    }

出典：PhoneGapを使って、iPhoneの写真ライブラリから選んだ写真のbase64画像データを取得する方法

4

3 に答える 3

3

次のコードを使用して、画像を Base64 に変換します。

var Base64 = {
    /**
     * This implementation relies on Cordova 1.5 or above implementations.
     */
    getBase64ImageFromInput : function (input, callback) {
        var imageReader = new FileReader();
        imageReader.onloadend = function (evt) {
            if (callback)
                callback(evt.target.result);
        };
        //Start the asynchronous data read.
        imageReader.readAsDataURL(input);
    },
    formatImageSrcString : function (base64) {
        return (base64.match(/(base64)/))? base64 : "data:image/jpeg;base64," + base64;
    } 
};

以下は、このオブジェクトを使用して、画像をファイル入力から base64 エンコーディングに変換する例です。

var fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.onchange = function () {
    var input = this.files[0];
    if (input) {
        Base64.getBase64ImageFromInput(input, function (imageData) {
            //Process the image string. 
            console.log(imageData);
        });
    } else {
       alert("Please select an image.");
    }
};

お役に立てれば。ご不明な点がございましたら、お知らせください。

于 2013-01-11T22:42:11.253 に答える
2

画像は非同期に読み込まれます。つまり、画像がキャンバスに読み込まれる前return dataURL...に発生します。

この関数が値を返す代わりに、コールバック関数を呼び出します。

encodeImageUri = function(imageUri, callback) {
    var c = document.createElement('canvas');
    var ctx = c.getContext("2d");
    var img = new Image();
    img.onload = function() {
        c.width = this.width;
        c.height = this.height;
        ctx.drawImage(img, 0, 0);

        if(typeof callback === 'function'){
            var dataURL = c.toDataURL("image/jpeg");
            callback(dataURL.slice(22, dataURL.length));
        }
    };
    img.src = imageUri;
}

次のように呼び出します。

encodeImageUri('/path/to/image.png', function(base64){
    // Do something with the b64'd image
});

注: これが機能するには、画像がページと同じドメインにある必要があります。

于 2013-01-11T20:30:42.470 に答える
2

FileReaderのreadAsDataURLメソッドを使用します。

于 2013-01-11T21:38:44.160 に答える