是否有任何JavaScript文件呢？否则，我该如何转换？
#1 楼
您可以为其使用HTML5<canvas>：创建画布，将图像加载到其中，然后使用
toDataURL()获取Base64表示形式（实际上，这是一个data: URL，但是它包含Base64编码图片）。评论
与xhr一样，toDataURL是否可以控制完成/失败/总是这样的回调？
– Jeroen
2014年2月4日在22:34
我们可以将2个或更多的画布提取为一个PNG吗？
–techie_28
16年7月11日在11:48
您能做一个jsbin还是至少在这里写一些代码？
– vsync
16年11月4日在15:52
在违反CORS的情况下，此方法将失败。除此之外，此解决方案应解决该问题。
– Revanth Kumar
17年4月4日在19:01
我们都知道将二进制文件转换为base64会占用更多数据，但是如果不使用reader.readAsDataURL，则以这种方式使用canvas获取base64可以进一步增加它的数据，因为使用toDataURL时，您可能还会放松所有图像压缩。除非您希望将每个图像都转换为特定格式。当您使用画布时，您还会松散所有元数据，例如：EXIF，旋转，相机，地理位置等
–无尽
7月20日11:19
#2 楼
您可以选择多种方法：1。方法：FileReader
通过XMLHttpRequest将图像加载为Blob，然后使用FileReader API（readAsDataURL（））将其转换为dataURL：
function toDataURL(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0', function(dataUrl) {
console.log('RESULT:', dataUrl)
})
也可以使用WHATWG fetch API来实现此代码示例：
const toDataURL = url => fetch(url)
.then(response => response.blob())
.then(blob => new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onloadend = () => resolve(reader.result)
reader.onerror = reject
reader.readAsDataURL(blob)
}))
toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0')
.then(dataUrl => {
console.log('RESULT:', dataUrl)
})
这些方法：
浏览器支持不足
对其他文件类型也具有更好的压缩效果
浏览器支持：
http://caniuse.com/#feat=filereader
http://caniuse.com/#feat=fetch
2。方法：Canvas
将图像加载到Image-Object中，将其绘制为无污染的画布，然后将画布转换回dataURL。
function toDataURL(src, callback, outputFormat) {
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function() {
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var dataURL;
canvas.height = this.naturalHeight;
canvas.width = this.naturalWidth;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
};
img.src = src;
if (img.complete || img.complete === undefined) {
img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
img.src = src;
}
}
toDataURL(
'https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0',
function(dataUrl) {
console.log('RESULT:', dataUrl)
}
)
详细
支持的输入格式：
image/png，image/jpeg，image/jpg，image/gif，image/bmp，image/tiff，image/x-icon，image/svg+xml，image/webp，image/xxx 支持的输出格式：<
image/png，image/jpeg，image/webp（镀铬）浏览器支持：
http://caniuse.com/#feat=canvas
Internet Explorer 10（Internet Explorer 10仅适用于相同的原始图像）
3。方法：来自本地文件系统的图像
如果要从用户文件系统转换图像，则需要采用其他方法。
使用FileReader API：
function encodeImageFileAsURL(element) {
var file = element.files[0];
var reader = new FileReader();
reader.onloadend = function() {
console.log('RESULT', reader.result)
}
reader.readAsDataURL(file);
}
<input type="file" onchange="encodeImageFileAsURL(this)" />
评论
对我来说，在chrome中不起作用：跨源资源共享策略已阻止加载来自原始****的图像：请求的资源上不存在“ Access-Control-Allow-Origin”标头。因此，不允许访问来源“ http://fiddle.jshell.net”。
– DickieBoy
2014年8月5日9:19
万一这使其他人不满意，此例程将在返回的字符串中包含“ data：image / jpg; base64”标头，因此您无需附加该标头。
–克里斯·雷（Chris Rae）
15年1月16日在21:02
Warnin2：内容混乱。一路上的某个地方，数据有可能被损坏/更改（即使可能不是很多），至少在我在某些图像上的firefox 35上发生过这种情况，base64与php在同一图像上创建的base64不同图片。
– hanshenrik
2015年3月6日在2:39
是的，这是正确的。由于我们实际上将图像绘制到画布元素（developer.mozilla.org/en-US/docs/Web/API/…），然后将其转换为dataURL（developer.mozilla.org/en- US / docs / Web / API / HTMLCanvasElement / ...）。
– HaNdTriX
15年3月6日在9:12
方法：FileReader（2）比使用Canvas更快地工作。在大照片上测试。希望对某些人有所帮助。
–最大
15/12/24在6:07
#3 楼
该代码片段可以将您的字符串，图像甚至视频文件转换为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>
评论
不仅很棒，而且还绕过了跨域起源问题！有了它，您可以允许用户提供自己的图像或URL中的图像（因为Windows会自己获取图像），在画布上绘制它们，并在仍可以使用.toDataURL（）等的情况下使用它们。非常感谢！
–ElDoRado1239
2014年11月16日16:35
您好，如何将其应用于从远程网址加载的图像而不会遇到跨域问题？谢谢
–guthik
18年7月17日在15:12
有时在Chrome 78.0.3904.97中可以使用，但有时会导致标签页崩溃。
– Dshiz
19年11月11日在5:44
#4 楼
基本上，如果您的图像是<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();
评论
不幸的是，这仅适用于本地图像，如果您尝试使用远程图像（从网络上选择一个）尝试将其写入（firefox）控制台：'SecurityError：操作不安全'。
–user2677034
18年1月23日在21:15
它可能适用于其他图像，但取决于该站点的CORS设置，必须将其指定为
–迈克
18/12/15在11:01
在Firefox上，您可以暂时禁用该安全性。转到“关于：配置”，并将属性“ privacy.file_unique_origin”更改为false
–曼努埃尔·罗密罗（Manuel Romeiro）
2月19日下午13:38
#5 楼
这是我的工作：// Author James Harrington 2014
function base64(file, callback){
var coolFile = {};
function readerOnload(e){
var base64 = btoa(e.target.result);
coolFile.base64 = base64;
callback(coolFile)
};
var reader = new FileReader();
reader.onload = readerOnload;
var file = file[0].files[0];
coolFile.filetype = file.type;
coolFile.size = file.size;
coolFile.filename = file.name;
reader.readAsBinaryString(file);
}
这是您的用法
base64( $('input[type="file"]'), function(data){
console.log(data.base64)
})
评论
什么是btoa？ :)
–亚历山大·米尔斯（Alexander Mills）
17年3月31日在20:08
a = ASCII，b =二进制stackoverflow.com/questions/33854103/…
–詹姆斯·哈灵顿（James Harrington）
17年4月11日在18:55
#6 楼
我发现最安全，最可靠的方法是使用FileReader()。演示：将图像转换为Base64
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input id="myinput" type="file" onchange="encode();" />
<div id="dummy">
</div>
<div>
<textarea style="width:100%;height:500px;" id="txt">
</textarea>
</div>
<script>
function encode() {
var selectedfile = document.getElementById("myinput").files;
if (selectedfile.length > 0) {
var imageFile = selectedfile[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result;
var newImage = document.createElement('img');
newImage.src = srcData;
document.getElementById("dummy").innerHTML = newImage.outerHTML;
document.getElementById("txt").value = document.getElementById("dummy").innerHTML;
}
fileReader.readAsDataURL(imageFile);
}
}
</script>
</body>
</html>
更新-带有@AnniekJ请求的注释的相同代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input id="myinput" type="file" onchange="encode();" />
<div id="dummy">
</div>
<div>
<textarea style="width:100%;height:500px;" id="txt">
</textarea>
</div>
<script>
function encode() {
// Get the file objects that was selected by the user from myinput - a file picker control
var selectedfile = document.getElementById("myinput").files;
// Check that the user actually selected file/s from the "file picker" control
// Note - selectedfile is an array, hence we check it`s length, when length of the array
// is bigger than 0 than it means the array containes file objects
if (selectedfile.length > 0) {
// Set the first file object inside the array to this variable
// Note: if multiple files are selected we can itterate on all of the selectedfile array using a for loop - BUT in order to not make this example complicated we only take the first file object that was selected
var imageFile = selectedfile[0];
// Set a filereader object to asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read.
var fileReader = new FileReader();
// We declare an event of the fileReader class (onload event) and we register an anonimous function that will be executed when the event is raised. it is "trick" we preapare in order for the onload event to be raised after the last line of this code will be executed (fileReader.readAsDataURL(imageFile);) - please read about events in javascript if you are not familiar with "Events"
fileReader.onload = function(fileLoadedEvent) {
// AT THIS STAGE THE EVENT WAS RAISED
// Here we are getting the file contents - basiccaly the base64 mapping
var srcData = fileLoadedEvent.target.result;
// We create an image html element dinamically in order to display the image
var newImage = document.createElement('img');
// We set the source of the image we created
newImage.src = srcData;
// ANOTHER TRICK TO EXTRACT THE BASE64 STRING
// We set the outer html of the new image to the div element
document.getElementById("dummy").innerHTML = newImage.outerHTML;
// Then we take the inner html of the div and we have the base64 string
document.getElementById("txt").value = document.getElementById("dummy").innerHTML;
}
// This line will raise the fileReader.onload event - note we are passing the file object here as an argument to the function of the event
fileReader.readAsDataURL(imageFile);
}
}
</script>
</body>
</html>
评论
嗨，我正在寻找一种将Powerpoint加载项中的图像转换为base64的方法（因为否则我无法将它们添加到幻灯片中）并找到了您的响应。您能否再向我解释一下您在这里做什么？我对此很陌生，所以我并没有真正获得整个FileReader。仅提供一些背景信息：我有一个字符串selectedImages，它是.png的字符串，我想将它们转换为base64文件，然后将它们添加到PowerPoint幻灯片中。
–AnniekJ
11月9日在16:16
@AnniekJ请在每行代码上方看到我的更新答案以及注释
– jonathana
11月9日在16:56
#7 楼
如果您有文件对象，此简单功能将起作用：function getBase64 (file, callback) {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(file);
}
用法示例：
getBase64(fileObjectFromInput, function(base64Data){
console.log("Base64 of file is", base64Data); // Here you can have your code which uses Base64 for its operation, // file to Base64 by oneshubh
});
#8 楼
您可以使用FileAPI，但几乎不受支持。#9 楼
据我所知，可以通过FileReader（）或将其存储在canvas元素中将图像转换为Base64字符串，然后使用toDataURL（）来获取图像。我遇到了类似的问题，可以参考。将图像转换为已加载的画布
#10 楼
尝试以下代码：对于文件上载更改事件，请调用此函数：
$("#fileproof").on('change', function () {
readImage($(this)).done(function (base64Data) { $('#<%=hfimgbs64.ClientID%>').val(base64Data); });
});
function readImage(inputElement) {
var deferred = $.Deferred();
var files = inputElement.get(0).files;
if (files && files[0]) {
var fr = new FileReader();
fr.onload = function (e) {
deferred.resolve(e.target.result);
};
fr.readAsDataURL(files[0]);
} else {
deferred.resolve(undefined);
}
return deferred.promise();
}
将Base64数据存储在隐藏文件中以供使用。 br />
评论
嗨，拉维！我看你比较新。除非原始发布者明确要求使用jQuery，lodash等库解决方案，否则每个人最好使用最低限度的答案，在这种情况下，使用纯JavaScript更好。如果您仍然想使用jQuery做出贡献，请在您的条目中充分说明：)
–卡尔斯·阿尔科利亚
19年3月16日在16:13
#11 楼
uploadProfile(e) {
let file = e.target.files[0];
let reader = new FileReader();
reader.onloadend = function() {
console.log('RESULT', reader.result)
}
reader.readAsDataURL(file);
}
#12 楼
这是使用Javascript Promise的方法。const getBase64 = (file) => new Promise(function (resolve, reject) {
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result)
reader.onerror = (error) => reject('Error: ', error);
})
现在，在事件处理程序中使用它。
const _changeImg = (e) => {
const file = e.target.files[0];
let encoded;
getBase64(file)
.then((result) => {
encoded = result;
})
.catch(e => console.log(e))
}
评论
如果您只想更改图像进行预览，请使用URL.createObjectURL（file）代替
–无尽
7月20日11:11
#13 楼
document.querySelector('input').onchange = e => {
const fr = new FileReader()
fr.onloadend = () => document.write(fr.result)
fr.readAsDataURL(e.target.files[0])
}
<input type="file">
#14 楼
需要利用读取器将blob转换为base64，更喜欢使用async-await语法，因此我选择将读取器逻辑提取到帮助器中，如下所示：//* Convert resBlob to base64
export const blobToData = (blob: Blob) => {
return new Promise((resolve) => {
const reader = new FileReader()
reader.onloadend = () => resolve(reader.result)
reader.readAsDataURL(blob)
})
}
并在主代码中使用await对其进行调用：
//* Convert resBlob to dataUrl and resolve
const resData = await blobToData(resBlob)
#15 楼
好吧，如果您使用的是Dojo Toolkit，它为我们提供了一种直接编码或解码为Base64的方法。请尝试以下操作：
使用dojox编码字节数组。 encoding.base64：
var str = dojox.encoding.base64.encode(myByteArray);
要解码Base64编码的字符串：
var bytes = dojox.encoding.base64.decode(str);
评论
@DownVoter-亲爱的最好指出错误，如果您将某些内容标记为否。以便有人可以改善。就我在JavaScript库中了解dojo而言，如果允许使用dojo，则可以肯定使用这种方法。
– Vikash Pandey
17-10-9在8:52
评论
您的图片来自哪里？stackoverflow.com/questions/934012/get-image-data-in-javascript
JS和jQ：stackoverflow.com/questions/17710147 / ...
idkblogs.com/js/31/Convert-image-file-into-base64-in-javascript