document.querySelector(“输入”)。Onchange = e => { const fr = new FileReader() Fr.onloadend = () => document.write(fr.result) fr.readAsDataURL (e.target.files [0]) ｝ < input type = " file " >

如果你有一个文件对象，这个简单的函数将工作:

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

这个代码片段可以将你的字符串、图像甚至视频文件转换为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>

你也可以简单地提取以64为基数的URL的一部分:

var Base64URL = canvas.toDataURL('image/webp')
var Base64 = Base64URL.split(",")[1] //Returns the base64 part

有多种方法可供选择:

1. 方法:FileReader

通过XMLHttpRequest加载图像为blob，并使用FileReader API (readAsDataURL())将其转换为dataURL:

函数toDataURL(url，回调){ var xhr = new XMLHttpRequest(); xhr。Onload = function() { var reader = new FileReader(); 读者。Onloadend = function() { 回调(reader.result); ｝ reader.readAsDataURL (xhr.response); }; xhr。打开(‘得到’,url); xhr。responseType = 'blob'; xhr.send (); ｝ toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0'，函数(dataUrl) { dataUrl console.log('结果:') })

这个代码示例也可以使用WHATWG获取API来实现:

const toDataURL => .then(response => response.blob()) .then(blob => new Promise((resolve, reject) => { const reader = new FileReader() 读者。Onloadend = () => resolve(reader.result) 读者。Onerror =拒绝 reader.readAsDataURL (blob) })) toDataURL(“https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0”) .then(dataUrl => { dataUrl console.log('结果:') })

这些方法:

有更好的压缩 也适用于其他文件类型

浏览器支持:

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

详细

支持的输入格式:

图像/PNG， 图像/JPEG， 图像/JPG， 图像/gif， 图像/BMP， 图像/tiff， 图像/x-icon， 图像/SVG+XML， 图像/WebP， 图像/XXX

支持的输出格式:

图像/PNG， 图像/JPEG， 图像/WebP（Chrome）

浏览器支持:

http://caniuse.com/#feat=canvas Internet Explorer 10 (Internet Explorer 10只能处理相同来源的图像)

3.方法:来自本地文件系统的映像

如果您想从用户文件系统转换映像，则需要采用不同的方法。 使用FileReader API:

函数encodeImageFileAsURL(element) { Var file = element.files[0]; var reader = new FileReader(); 读者。Onloadend = function() { console.log(“结果”,reader.result) ｝ reader.readAsDataURL(文件); ｝ <input type="file" onchange="encodeImageFileAsURL(this)"/>

据我所知，图像可以通过FileReader()转换为Base64字符串，也可以将其存储在canvas元素中，然后使用toDataURL()获取图像。我也遇到过类似的问题你可以参考这个。

将图像转换为已经加载的画布