我需要将图像转换为Base64字符串,以便可以将图像发送到服务器。
有没有用于此的JavaScript文件?否则,我如何转换它呢?
发布于 2011-05-27 17:36:12
您可以对其使用HTML5 <canvas>
:
创建一个canvas,将您的图像加载到其中,然后使用toDataURL()
获取Base64表示(实际上,它是一个base64编码的data:
地址,但它包含base64编码的图像)。
发布于 2014-05-15 13:20:48
这段代码可以将你的字符串、图像甚至视频文件转换成Base64字符串数据。
<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
<div id="imgTest"></div>
<script type='text/javascript'>
function encodeImageFileAsURL() {
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0) {
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result; // <--- data: base64
var newImage = document.createElement('img');
newImage.src = srcData;
document.getElementById("imgTest").innerHTML = newImage.outerHTML;
alert("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
console.log("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
}
fileReader.readAsDataURL(fileToLoad);
}
}
</script>
发布于 2017-07-23 22:46:32
基本上,如果你的图像是
<img id='Img1' src='someurl'>
然后,您可以将其转换为
var c = document.createElement('canvas');
var img = document.getElementById('Img1');
c.height = img.naturalHeight;
c.width = img.naturalWidth;
var ctx = c.getContext('2d');
ctx.drawImage(img, 0, 0, c.width, c.height);
var base64String = c.toDataURL();
https://stackoverflow.com/questions/6150289
复制相似问题