如何不依赖外部资源直接在html中展示图片?--base64

最近公司给我的一个需求是设计并实现403界面,要求如下:设计一个403页面,要求如下:

  1. 喜马橙风格
  2. 自适应移动端、pc端
  3. 结构简单,页面体积小易加载

只需要写在一个html文件中,并且要求易于加载,那么最好就使用base64或者svg来展示图片了

base64是什么

Base64是一种用于将二进制数据转换为文本字符串的编码方法。它将每3个字节的数据转换为4个Base64字符,这样就可以表示任意二进制数据。Base64编码常用于在文本协议中传输二进制数据,例如在电子邮件中嵌入图片或在网页中嵌入数据URL。要注意的是,Base64编码会使数据稍微变大,因为它将二进制数据转换为文本形式。

也就是说我们可以将一张图片转化成base64,放入src中就可以直接使用了

如何将图片转换成base64呢?

方法1

直接找那种转换的网站,但是不推荐这种方法

方法2 通过js来做

  1. FileReade方式:

FileReader是HTML5中的一个API,用于读取文件内容。然后,我们需要监听FileReader的load事件,当图片加载完成时,会触发这个事件。在这个事件的回调函数中,我们可以获取到图片的Base64编码

使用方法如下:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image to Base64</title>
</head>
<body>
    <input type="file" id="inputImage" />
    <script>
        const inputImage = document.getElementById('inputImage');
        inputImage.addEventListener('change', function(event) {
            const file = event.target.files[0];
            const reader = new FileReader();
            reader.onload = function(e) {
                const base64 = e.target.result;
                console.log(base64); // 输出图片的Base64编码
            };
            reader.readAsDataURL(file);
        });
    </script>
</body>
</html>
  1. canvas方式

我们可以利用canvas.toDataURL,将使用JavaScript来获取图片的base64编码

js 复制代码
创建新的Image对象
var img = new Image();
img.src = 'your_image_url'; // 替换为你的图片URL
// 图片加载完成后,将其绘制到canvas上
img.onload = function() {
    getBase64(img);
};
 
/**图片转base64格式 */
export function getBase64(image) {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    var context = canvas.getContext("2d");
    context.drawImage(image, 0, 0, image.width, image.height);
    // 将canvas的内容转换为base64编码的字符串
    var base64 = canvas.toDataURL("image/png");// 可以根据需要更改为其他格式,如'image/jpeg'等
    return base64;
}

end

通过上述方法我们就可以拿到图片的base64,然后写在img的src中就可以直接使用该图片了

相关推荐
前端 贾公子10 分钟前
Monorepo + vite 怎么热更新
前端
coding随想19 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB242 小时前
html复习
javascript·microsoft·html