如何使用JavaScript将图片转换为Base64字符串？
如何使用JavaScript将图片转换为Base64字符串？
提问于 2011-05-27 17:26:07
我需要将图像转换为Base64字符串，以便可以将图像发送到服务器。
有没有用于此的JavaScript文件？否则，我如何转换它呢？
回答 14
Stack Overflow用户
回答已采纳
发布于 2011-05-27 17:36:12
您可以对其使用HTML5 <canvas>：
创建一个canvas，将您的图像加载到其中，然后使用toDataURL()获取Base64表示(实际上，它是一个base64编码的data:地址，但它包含base64编码的图像)。
Stack Overflow用户
发布于 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>
Stack Overflow用户
发布于 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();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6150289
复制相关文章
相似问题