Phonegap 图片 base64 编码

Question

我将尝试将一张图片编码为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图像数据

- danielrvt-sgb

Answer 1

我使用以下代码将图像转换为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.");
    }
};

希望这能够帮助您。如果您有任何问题，请告知我。

- Zorayr

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

注意：为了使此方法有效，图片需要与您的页面在同一域中。

- gen_Eric

---

@danielrvt-sgb：图片是否与您的页面在同一个域名下？您确定那个字符串是错误的吗？ - gen_Eric

该图像是使用手机相机拍摄并存储在SD卡中的。我在此页面http://www.freeformatter.com/base64-encoder.html中测试了该字符串，但返回了一张空白图片。 - danielrvt-sgb

我对 PhoneGap 一无所知，但是我知道 浏览器 不喜欢你试图将文件从文件系统加载到页面中。 - gen_Eric

Answer 3

使用FileReader的readAsDataURL方法。

- Simon MacDonald

---

如果没有关于创建FileEntry对象实例的文档，如何使用readAsDataUrl？ - danielrvt-sgb

将您的imageURI传递给window.resloveLocalFileSystemURI，该方法将FileEntry对象作为成功回调函数的参数。然后，您就能够使用FileReader来读取该FileEntry。 - Simon MacDonald

我明白resolveLocalFileSystemURI未定义。 - danielrvt-sgb

那是因为我打字不好;) 应该是 window.resolveLocalFileSystemURI()。 - Simon MacDonald