如何将图像中的图像转换为字符串 Base64, 使用 JavaScript?

您可以选择几种方法：

1. 一种方法： FileReader

以大二进制对象的形式加载图像
https://developer.mozilla.org/ ... quest
和使用
https://developer.mozilla.org/ ... eader
转换为
https://developer.mozilla.org/ ... _URIs
:

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
https://developer.mozilla.org/ ... Fetch
:

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. 方法：帆布

将图像下载到图像对象中，将其绘制在一个未填写的画布上并将画布转换回 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/

 }

/

https://gist.github.com/HaNdTriX/7704632
支持的输入格式

:

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. 方法：来自本地文件系统的图像

如果要从用户文件系统转换图像，则需要使用其他方法。
使用
https://developer.mozilla.org/ ... eader
:

function encodeImageFileAsURL/element/ {

 var file = element.files[0];

 var reader = new FileReader//;

 reader.onloadend = function// {

 console.log/'RESULT', reader.result/

 }

 reader.readAsDataURL/file/;

}

<input onchange="encodeImageFileAsURL/this/" type="file"/>

您可以使用它。 HTML5

<canvas>

:

创建画布，将图像下载到其中，然后使用
https://developer.mozilla.org/ ... ement
, 得到一个想法 Base64 /实际上它

data:

URL, 但它包含一个编码图像 Base64/.
</canvas>

此代码片段可以在字符串数据中转换您的行，图像甚至视频文件。 Base64.

<input id="inputFileToLoad" onchange="encodeImageFileAsURL//;" type="file"/>

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

原则上，如果你的形象

<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//;

这就是我所做的：

// 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/

}/

我发现最安全，最可靠的方法是使用

FileReader//

.

示范：
https://codverter.com/src/webe ... 97b68

html

<html>

<head>

<meta charset="utf-8"/>

</head>

<body>

<input id="myinput" onchange="encode//;" type="file"/>

<div id="dummy">

</div>

<div>

<textarea id="txt" style="width:100%;height:500px;">

 </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>

如果你有一个物体 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

}/;

您可以使用
http://www.w3.org/TR/FileAPI/
, 但实际上不受支持。

据我所知，图像可以转换为字符串 Base64 无论是帮助 FileReader//, 要么在元素中保存它 canvas, 然后使用 toDataURL// 获得图像。 我有类似的问题，你可以参考它。

https://coderoad.ru/26212792/

试试这个代码：

要执行文件下载事件，请调用此功能：

$/"#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 在隐藏文件中使用。

uploadProfile/e/ {



 let file = e.target.files[0];

 let reader = new FileReader//;



 reader.onloadend = function// {

 console.log/'RESULT', reader.result/

 }

 reader.readAsDataURL/file/;

}

这就是如何用承诺做的 Javascript.

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//

 }

好吧，如果你用
https://en.wikipedia.org/wiki/Dojo_Toolkit
Dojo , 这为我们提供了一种直接的编码或解码方式 Base64.

试试吧：

用于编码数组字节使用 dojox.encoding.base64:

var str = dojox.encoding.base64.encode/myByteArray/;

用于在编码中解码字符串 Base64:

var bytes = dojox.encoding.base64.decode/str/;