如何不依赖外部资源直接在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中就可以直接使用该图片了

相关推荐
慧一居士1 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead3 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js