首页图片转base64并显示

图片转base64并显示

时间: 2023-12-19 16:32:24 浏览: 73

以下是在HTML中将图片转换为base64并显示的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片转base64并显示</title> </head> <body> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." alt="base64图片"> </body> </html> ``` 其中，`data:image/png;base64,`是base64编码的前缀，后面跟着图片的base64编码。在`<img>`标签的`src`属性中，直接使用这个base64编码即可将图片显示在页面上。如果要在JavaScript中将图片转换为base64，可以使用`FileReader`对象的`readAsDataURL()`方法。以下是一个示例代码： ```javascript function toBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => resolve(reader.result); reader.onerror = error => reject(error); }); } // 使用示例 const fileInput = document.querySelector('input[type="file"]'); fileInput.addEventListener('change', async () => { const file = fileInput.files[0]; const base64 = await toBase64(file); console.log(base64); }); ``` 这个示例代码中，`toBase64()`函数接受一个`File`对象作为参数，返回一个`Promise`对象，最终解析为图片的base64编码。在使用时，可以将`<input type="file">`元素的`change`事件监听器中调用`toBase64()`函数，将选择的文件转换为base64编码并输出到控制台中。

阅读全文