Javascript 在JQuery中将图像转换为base64string

我正在开发VS2015 cordova应用程序。我想向另一台服务器发送一个以64为基数的图像字符串。当我从图库中获取图像并将其转换为base64string时，我遇到了一个问题。我成功地得到了Base64字符串，但当我显示它时，我总是得到黑色图像。这是我的密码：

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

---

请注意。

在您尝试获取数据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;
}

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

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

}

---

在您尝试获取数据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;
}

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

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

}

---

这与上下文无关，但可能对您有所帮助。 您可以直接从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>

提交

---

在upload.php文件中获取图像数据并另存为图像。在PHP中使用

$\u文件

数组，在C中使用

HttpContext

保存图像。
Ref:

这在上下文旁边，但可能会对您有所帮助。 您可以直接从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>

提交

---

在upload.php文件中获取图像数据并另存为图像。在PHP中使用

$\u文件

数组，对于C#使用

HttpContext

保存图像。
Ref:

检查base64字符串是否以标识符开头，如果不确定是否要添加它。使用异步回调在

onload

处绘制图像。因此，当您构建

dataUrl

时，图像下方的几行尚未绘制yet@seahorsepip什么是标识符？@Paolo请解释我应该做什么原始图像

类型

jpeg

？检查base64字符串是否以标识符开头，如果不确定，请确保添加标识符。您使用异步回调。因此，当您构建

dataUrl

时，图像下方的几行尚未绘制yet@seahorsepip什么是标识符？@Paolo请解释我应该做什么原始图像

类型

jpeg

？好的，它解决了黑匣子图像，但是我从我的图像中得到了大的base64string，它不能传递给我的web服务。除非压缩图像，否则没有任何减少base64strg？@prime的方法。base64字符串实际上是图像作为文本的二进制表示。非常粗略地说，Base64编码的二进制数据的最终大小等于原始数据大小的1.37倍。因此，如果你有一个1MB的文件，你会得到1.37MB的文本。我不知道你为什么不直接上传图片？我想直接上传图片，但我以前没有这样做过。知道我该如何开始吗？好的，它解决了黑盒图像，但我从图像中得到了大的base64string，无法传递给我的web服务。有没有减少base64strg的想法？@prime除非压缩图像。base64字符串实际上是图像作为文本的二进制表示。非常粗略地说，Base64编码的二进制数据的最终大小等于原始数据大小的1.37倍。因此，如果你有一个1MB的文件，你会得到1.37MB的文本。我不知道你为什么不直接上传图片？我想直接上传图片，但我以前没有这样做过。你知道我该怎么开始吗？