首页Js 图片转base64

Js 图片转base64

时间: 2023-08-08 14:10:22 浏览: 96

好的，以下是在 JavaScript 中将图片转换为 base64 编码的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Image to Base64 Example</title> </head> <body> <input type="file" id="image-selector" onchange="convertImageToBase64()" /> <br> <img id="image-preview" /> <br> <textarea id="image-base64"></textarea> <script> function convertImageToBase64() { var reader = new FileReader(); reader.onload = function(event) { document.getElementById("image-preview").src = event.target.result; document.getElementById("image-base64").value = event.target.result; }; reader.readAsDataURL(document.getElementById("image-selector").files[0]); } </script> </body> </html> ``` 这里使用了 HTML5 的 FileReader API，通过选择文件的方式将图片读取到浏览器内存中，并将图片预览以及 base64 编码后的字符串显示在页面上。当用户选择文件时，`convertImageToBase64()`函数会自动触发，该函数首先创建一个读取器(reader)，然后设置其`onload`事件处理程序。在事件处理程序中，将读取到的图片文件显示在页面上，并将其转换为 base64 编码的字符串，保存在一个文本框中。你可以将上述示例代码复制到一个 HTML 文件中，然后在浏览器中打开它，即可看到效果。

阅读全文