javascript - 如何使用JavaScript将图像转换为base64字符串(How to convert image into base64 string using javascript)

Question

I need to convert my image to a base64 string so that i can send my image to a server.(我需要将图像转换为base64字符串，以便可以将图像发送到服务器。)

Is there any js file for this... ?(是否有任何js文件用于此...？) Else how to convert it(其他如何转换)   ask by Coder_sLaY translate from so

Answer 1

There are multiple approaches you can choose from:(您可以选择多种方法：)

1. Approach: FileReader(1.方法：FileReader) Load the image as blob via XMLHttpRequest and use the FileReader API to convert it to a dataURL :(通过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) }) This code example could also be implemented using the WHATWG fetch api :(此代码示例也可以使用WHATWG fetch api来实现：) 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) }) These approaches:(这些方法：) lack in browser support(缺乏浏览器支持) have better compression(有更好的压缩) work for other file types as well(也适用于其他文件类型) Browser Support:(浏览器支持：) http://caniuse.com/#feat=filereader(http://caniuse.com/#feat=filereader) http://caniuse.com/#feat=fetch(http://caniuse.com/#feat=fetch) 2. Approach: Canvas(2.方法：画布) Load the image into an Image-Object, paint it to a non tainted canvas and convert the canvas back to a dataURL.(将图像加载到图像对象中，将其绘制到无污染的画布上，然后将画布转换回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) } ) in detail(详细) Supported input formats:(支持的输入格式：) 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/jpg ， image/gif ， image/bmp ， image/tiff ， image/x-icon ， image/svg+xml ， image/webp ， image/xxx) Supported output formats:(支持的输出格式：) image/png , image/jpeg , image/webp (chrome)(image/png ， image/jpeg ， image/webp （chrome）) Browser Support:(浏览器支持：) http://caniuse.com/#feat=canvas(http://caniuse.com/#feat=canvas) IE10 (IE10 just works with same origin images)(IE10（IE10只能使用相同的原始图像）) 3. Approach: Images from the local file system(3.方法：来自本地文件系统的图像) If you want to convert images from the users file system you need to take a different approach.(如果要从用户文件系统转换图像，则需要采用其他方法。) Use the FileReader API :(使用FileReader API ：) function encodeImageFileAsURL(element) { var file = element.files[0]; var reader = new FileReader(); reader.onloadend = function() { console.log('RESULT', reader.result) } reader.readAsDataURL(file); } <input type="file" onchange="encodeImageFileAsURL(this)" />