javascript - Phonegap 编码图像 base64

标签 javascript image cordova base64

我正在尝试将图像编码为 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);
    }

取自:Using PhoneGap, How to get base64 image data of the photo chosen from photo library in iPhone

最佳答案

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

希望这对您有所帮助。如果您有任何问题,请告诉我。

关于javascript - Phonegap 编码图像 base64,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14286014/

相关文章:

javascript - 调用 Javascript 函数两次

javascript - NextGEN Gallery插件的js如何只在特定页面显示

android - 如何在 Android 上使用 phonegap/cordova 下载和保存文件

javascript - 如何从 NestJS 的模块导入中获取配置?

javascript - 在 php 中使用不同的 mysql 在循环中循环

java - 如何将图像添加到 JTable 单元格?

css - 图像在最小化的 Firefox 窗口中无法正确调整大小

css - 如何在 Webpack 中使用 css 中的图像

Android 打包 : Error generating final archive resources. ap_

javascript - 旋转图像更改属性 phonegap