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图像数据

Answer 1

图像是异步加载的，这意味着您的加载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
});

注意：为此，图像需要与您的页面位于同一域中。