如何使用JavaScript将图像转换为base64string

我需要将我的图像转换为base64string,以便我可以将图像发送到服务器。 有没有任何js文件…? 否则如何转换它

您可以使用HTML5 <canvas>

创build一个canvas,加载你的图像,然后使用toDataURL()获取base64表示(实际上,它是一个data: URL,但它包含base64编码的图像)。

有多种方法可以select:

1.方法:FileReader

通过XMLHttpRequest将图像加载为blob,并使用FileReader API将其转换为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) }) 

这段代码可以将您的string,图像甚至video文件转换为base64string数据。 尝试一次…

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

这是我做的

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

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

据我所知,图像可以通过FileReader()转换成base64string,或者将其存储在canvas元素中,然后使用toDataURL()来获取图像。我有类似的问题,你可以参考这个。

将图像转换为已经加载的canvas

基本上,如果你的形象是

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

那么你可以像转换它

 var c = document.createElement('canvas'); var ctx = c.getContext('2d'); var img = document.getElementById('Img1'); ctx.drawImage(img, 10, 10); var base64String = c.toDataURL(); 

那么,如果你使用的是dojo,它给了我们直接的编码或解码成base64的方法。

尝试这个:

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

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

解码base64编码的string:

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