如何使用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);
