在JQuery中将图像转换为base64string

我正在开发VS2015 cordova应用程序。我想要将图像的基本64字符串发送到另一台服务器。当我从图库中获取图像并将其转换为base64string时，出现问题。我获得了base64string成功，但是当我抛弃它时，我总是会得到黑色的图像。这里是我的代码：在JQuery中将图像转换为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; 
}

请指教。

来源

2016-02-13 prime

如果不确定添加它，检查base64字符串是否以标识符开头。 – seahorsepip

您使用异步回调在'onload'上绘制图像。所以当你建立'dataUrl'时，图像下面几行还没有绘制出来 – Paolo

@seahorsepip标识符是什么？ – prime

当您尝试获取数据网址时，图像未加载。

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

}

来源

2016-02-13 22:47:59 powerc9000

我试过这个，但是basestrg有未定义的值 – prime

@prime我的代码有错误，我编辑了我的帖子。 – powerc9000

好吧，它解决了黑盒子图像，但我从我的图像得到大的base64string，无法传递给我的网络服务任何想法，以减少这base64strg？ – prime

这是上下文旁边，但可以帮助你。你可以直接从你的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中使用$_FILES数组，而C＃使用HttpContext来保存图像。
Ref：Using form input to access camera and immediately upload photos using web app

来源

2016-02-14 19:18:52 Avijit

在JQuery中将图像转换为base64string

回答

相关问题