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

我需要将我的图像转换为字符串 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/;

要回复问题请先登录注册