如何使用javascript将图像转换为base64字符串

How to convert image into base64 string using javascript

我需要将我的图像转换为base64字符串，以便将图像发送到服务器。有没有这个JS文件…？否则如何转换

有多种方法可供选择：

1。方法：文件阅读器

通过xmlhttprequest将图像加载为blob，并使用filereader api将其转换为dataurl:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

此代码示例也可以使用whatwg fetch API实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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://canius.com/feat=filereader
http://canius.com/feat=获取

2。方法：画布

将图像加载到图像对象中，将其绘制到未污染的画布上，然后将画布转换回DataURL。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

详细地

支持的输入格式：

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://canius.com/feat=画布
IE10 (IE10 just works with same origin images)

三。方法：来自本地文件系统的图像

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

1
2
3
4
5
6
7
8

function encodeImageFileAsURL(element) {
var file = element.files[0];
var reader = new FileReader();
reader.onloadend = function() {
console.log('RESULT', reader.result)
}
reader.readAsDataURL(file);
}

1	<input type="file" onchange="encodeImageFileAsURL(this)" />

相关讨论

+1用于img.crossOrigin = 'Anonymous';。
不是我在IE11工作的
你确定你在使用IE11吗？我刚在IE11中测试过，对我来说效果很好。但我也在IE10中测试了它，因为IE10不支持图像的CORS，所以我得到了一个安全错误。您可能需要通过自己的域代理您的图像，以便在IE10中工作。
在铬合金上效果很好
当我尝试使用它时，GIF图像仍然会以base64的形式显示：data:image/png；base64…………他们应该说image/gif。我尝试通过获取图像格式来传递outputformat var变量中的image/gif，但它仍然显示数据：image/png…为什么会这样？
不支持将GIF格式作为输出格式。更多信息@developer.mozilla.org/en-us/docs/web/api/&hellip；(我更新了我的答案以澄清这一点)
如果没有jquery作为回调，有没有办法做到这一点？
此函数与jquery无关。这是一个异步操作，因此您需要回调或某种承诺。
我不在Chrome工作：Image from origin **** has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.
你用的是什么版本的Chrome？你试过上面的小提琴了吗？
@它取决于托管图像的服务器的配置。jsFiddle与image upload.wikimedia.org/wikipedia/commons/4/4a/&hellip；一起工作，因为它的服务器允许fiddle.jshell.net访问。更多信息，请访问stackoverflow.com/questions/10636611/&hellip；
@我试过小提琴。这就是我得到的错误，可能是服务器更改了配置。
啊，这个变化无常的发展世界，现在似乎开始运转了。
为了防止这种情况使其他任何人绊倒，这个例程在返回的字符串中包含了"data:image/jpg；base64"，所以您不需要附加它。
@Chris R感谢您指出这一点。我承认这个函数名并不像它本应具有的那样具有描述性。
此外，如果您尝试在iOS上创建一个非常大的画布(例如，在我的例子中，从相机创建一个画布)，这看起来工作正常，但返回"data:，"。您可以通过将画布的宽度和高度更改为较小的值(例如100)，并将read调用修改为ctx.drawimage(img，0，0，100，100)。
这是无损的吗？比如，和php的base64编码(file-get-contents($url))一样？或者画布转换会弄乱它？
这个脚本不会按照HTTP301移动器永久的位置运行：new/location.jpg；应该修复它或添加一个警告。这就是(可能)上面的代码示例对人们不起作用的原因，他们不更改URL，并且该URL现在重定向到upload.wikimedia.org/wikipedia/commons/4/4a/&hellip；
Warnin2：内容有问题。在这个过程中的某个地方，数据有可能被破坏/更改(尽管可能不会太多)，至少在某些图片上的firefox 35上会发生这种情况，base64与php在同一个图片上创建的base64不同。
是的，没错。一些数据可能会丢失，因为我们实际将图像绘制到画布元素(developer.mozilla.org/en-us/docs/web/api/&hellip；)然后将其转换为数据URL(developer.mozilla.org/en-us/docs/web/api/htmlcanvaselement/&zwnj；&8203；&hellip；)。
对于保存在本地文件系统(如file://C:/test.jpg上)上的图像，是否有一种方法可以做到这一点？
不，这是不可能的，因为您将无法访问本地文件系统。但是您可以使用文件阅读器API。看看这个小提琴jsfiddle.net/handtrix/xztfbx1m
第二种方法如何支持文件类型？！
@你可以对视频或音频文件以及图像文件进行编码。例如：jsfiddle.net/handtrix/yvq5y/1730
方法：文件阅读器(2)比方法画布工作得更快。在大照片上测试。希望对某些人有帮助。
试试这个图片！不工作qph.is.quoracdn.net/&hellip；
是的，这是因为服务器通过CORS阻止了它。html5rocks.com/en/tutorials/cors网站
如果有人想使用ES6，请尝试以下要点：gist.github.com/handtrix/bdfd1761701fbeba27f23e9a69515f
我使用的是方法1，但为了使它在IE(11)中工作，我不得不注释掉"img.crossorigin='anonymous'；"行。我从IIS收到302个错误，我试图下载的所有图像在IE开发人员控制台的"网络"选项卡中报告为"已中止"。
仅供参考：IE11在设置ResponseType时引发InvalidStateError。解决方法：在调用open()之后设置responseType，以便在IE11中使用。connect.microsoft.com/ie/feedback/details/795580/&hellip；
谢谢你告诉我！我已经更新了答案。
对于使用this.width和this.height进行的画布渲染，将提供与渲染元素匹配的图像大小，但如果图像本身更大，则只会在画布上渲染部分图像。要修复此问题，可以使用this.naturalheight和this.naturalwithdth
很好的接球@anyab！谢谢！我改进了答案。
@你好，你能解释一下为什么法官‘img.complete==undefined’？它是为了兼容性？
这确保了加载事件也会为缓存的图像触发。gist.github.com/handtrix/7704632
如果不支持完整的API，它将是未定义的。
@手链。你能用AXIOS.给出同样的代码吗？我在和ReactJS合作。
不，但这里有一个提示，告诉你正确的方向。使用AXIOS ResponseType属性。？？？
谢谢你的详细回答。在toDataURL的示例调用中，选项2似乎缺少outputFormat参数。
您知道FileReader方法是否存在任何数据丢失问题，比如Canvas方法？再次感谢！
输出格式是可选的。最好忽略它。我只是为了完整性添加了它。Afaik FileReader不存在任何数据丢失。我将它的输出与其他实现(例如php.net/manual/en/function.base64 decode.php)进行了比较。

您可以使用HTML5 进行以下操作：

创建画布，将图像加载到画布中，然后使用toDataURL()获取base64表示(实际上，它是data:URL，但包含base64编码的图像)。

相关讨论

此代码段可以将字符串、图像甚至视频文件转换为base64字符串数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

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

相关讨论

这是我做的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

下面是你如何使用它

1
2
3

base64( $('input[type="file"]'), function(data){
console.log(data.base64)
})

相关讨论

基本上，如果你的图像是

1	<img id='Img1' src='someurl'>

然后你可以把它转换成

1
2
3
4
5
6
7
8

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

相关讨论

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

1
2
3
4
5
6
7
8

function getBase64 (file,callback) {

const reader = new FileReader();

reader.addEventListener('load', () => callback(reader.result));

reader.readAsDataURL(file);
}

使用情况：—

1
2
3

getBase64(fileObjectFromInput, function(base64Data){
console.log("base 64 of file is",base64Data);//here you can have your code which uses base64 for its operation,//file to base64 by oneshubh
});

您可以使用FileAPI，但它几乎不受支持。

试试这个代码

文件上传chnage事件ccall此功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

$("#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数据存储在隐藏文件中以供使用。

相关讨论

据我所知，image可以通过filereader()转换成base64字符串，或者存储在canvas元素中，然后使用todataurl()获取image，我遇到了类似similar的问题，您可以参考它。

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

我发现最安全可靠的方法是使用FileReader()

演示：图像到base64

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input id="myinput" type="file" onchange="encode();" />

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

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

</body>
</html>

好吧，如果您使用的是Dojo，它将为我们提供直接的方法将其编码或解码为base64。

试试这个：

要使用dojox.encoding.base64对字节数组进行编码：

1	var str = dojox.encoding.base64.encode(myByteArray);

要解码base64编码的字符串：

1	var bytes = dojox.encoding.base64.decode(str);

相关讨论