在JQuery中将图像转换为base64string

I am working on VS2015 cordova app .I want to send an base 64 string of an image to another server . I have a problem when i get image from gallery and corverting it into base64string . I got the base64string successfully but when i dispalayed it I always get black image . here is my code :

我正在研究VS2015 cordova应用程序。我想将一个基本的64字符串的图像发送到另一台服务器。当我从图库中获取图像并将其转换为base64string时,我遇到了问题。我成功地获得了base64string,但是当我取消它时,我总是得到黑色图像。这是我的代码:

   function onPhotoURISuccess(imageURI) {
     var largeImage = document.getElementById('smallImage');
    largeImage.style.display = 'block';
    largeImage.src = imageURI;
    basestrg = encodeImageUri(imageURI);

}

function getPhoto(source) {
           navigator.camera.getPicture(onPhotoURISuccess, onFail, {
        destinationType: Camera.DestinationType.NATIVE_URI, mediaType: Camera.MediaType.Photo,
        sourceType: source
    });
}
function encodeImageUri(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;
}

Please advice .

请指教。

2 个解决方案

#1

This is beside the context but may help you. You can upload the image directly from your html5 form.

这不是背景,但可能对您有所帮助。您可以直接从html5表单上传图像。

<form enctype="multipart/form-data" action="upload.php" method="post">    
    <input name="userImage" type="file" accept="image/*;capture=camera">    
    <button type="submit">Submit</button>
</form>

Get the image data in upload.php file and save as image. In PHP use $_FILES array and for C# use HttpContext to save the image.
Ref: Using form input to access camera and immediately upload photos using web app

获取upload.php文件中的图像数据并另存为图像。在PHP中使用$ _FILES数组和C#使用HttpContext来保存图像。参考:使用表单输入访问相机并使用Web应用程序立即上传照片

#2

Your image isn't loaded by the time you try to get the data url.

尝试获取数据网址时,您的图片未加载。

function encodeImageUri(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);
        var dataURL = c.toDataURL("image/jpeg");
        callback(dataURL);
    };
    img.src = imageUri;
}

Then change the other function to pass a callback

然后更改另一个函数以传递回调

function onPhotoURISuccess(imageURI) {
    var largeImage = document.getElementById('smallImage');
    largeImage.style.display = 'block';
    largeImage.src = imageURI;
    encodeImageUri(imageURI, function(datauri){
      basestrg = datauri;
      //Now send the string to the server here.
    });

}

#1