马黑黑 发表于 2024-1-20 20:48

图片转base64编码

<style>
.mydiv {
        dispaly: relative;       
}
.Mid { text-align: center; }
#imgData {
        width: 100%;
        height: 300px;
        overflow-y: auto;
        white-space: pre-wrap;
        word-break: break-all;
}
#imgData:active { user-select: all; }
</style>

<div class="mydiv">
        <p><input id="uFile" type="file" accept=".jpg, .jpeg, .png, .gif, .webp" /></p>
        <p class="Mid"><img id="mypic" src="" alt="" /></p>
        <pre id="imgData"></pre>
</div>

<script>
uFile.addEventListener('change', function(e) {
        let files = e.target.files;
        if (!files.length) return;
        previewFile(files);
});

let previewFile = (file) => {
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (e) => {
                let res = e.target.result;
                mypic.src = res;
                imgData.textContent = res;
        }
};
</script>

马黑黑 发表于 2024-1-20 20:55

【说明】

操作方法：点击“选择文件”按钮，在本地磁盘找到任意一张程序支持的格式的图片，点击“确定”按钮。

以上操作，程序将进行处理，一是将用户选择的有效图片呈现出来，二是给出 base64 格式的图片代码。单击代码框文本会被选择，右击→复制或按Ctrl+C可复制代码。

base64编码就是一张图片的url，可以直接用于img标签或background：

<img src="base64代码" alt="“ />

background: url('base64代码') no-repeat center/cover;

马黑黑 发表于 2024-1-20 20:59

如果图片很大，不建议转为 base64 编码。此外，一楼程序未对大于阅读区尺寸的图片做预处理，若图片尺寸过大，排版外观会有缺陷。

红影 发表于 2024-1-20 22:22

我试了一个很小的图图，就得到一堆的代码啊{:4_173:}

红影 发表于 2024-1-20 22:23

这样做有什么好处呢？图片不需要上传就能用？

马黑黑 发表于 2024-1-20 22:42

红影 发表于 2024-1-20 22:22
我试了一个很小的图图，就得到一堆的代码啊

是的，它描述图片的样子

马黑黑 发表于 2024-1-20 22:43

红影 发表于 2024-1-20 22:23
这样做有什么好处呢？图片不需要上传就能用？

base64不会失联

红影 发表于 2024-1-21 09:19

马黑黑 发表于 2024-1-20 22:42
是的，它描述图片的样子

这个很神奇，我们看到的网上的图图它的内在本来就这样呗描述的？

红影 发表于 2024-1-21 09:21

马黑黑 发表于 2024-1-20 22:43
base64不会失联

保存成这样的形式有点麻烦，或者说不习惯。
不过这个帖子特别好，可以直接转换图片为编码呢。黑黑辛苦了{:4_187:}

马黑黑 发表于 2024-1-21 09:56

红影 发表于 2024-1-21 09:19
这个很神奇，我们看到的网上的图图它的内在本来就这样呗描述的？

也不是，是另外一种格式。你可以打开记事本，然后拖一张小图片过去，看看代码的样纸

红影 发表于 2024-1-21 20:25

马黑黑 发表于 2024-1-21 09:56
也不是，是另外一种格式。你可以打开记事本，然后拖一张小图片过去，看看代码的样纸

哦，这个从来不知道呢，我去试试{:4_204:}

红影 发表于 2024-1-21 20:33

马黑黑 发表于 2024-1-21 09:56
也不是，是另外一种格式。你可以打开记事本，然后拖一张小图片过去，看看代码的样纸

试了，看到一堆乱码{:4_173:}

马黑黑 发表于 2024-1-21 21:30

红影 发表于 2024-1-21 20:33
试了，看到一堆乱码

其实是代码，但是在记事本里就是乱码

红影 发表于 2024-1-21 23:02

马黑黑 发表于 2024-1-21 21:30
其实是代码，但是在记事本里就是乱码

哦，原来是这样。

马黑黑 发表于 2024-1-21 23:08

红影 发表于 2024-1-21 23:02
哦，原来是这样。

记事本什么都能打开，只是，它不支持的格式就是一堆乱码

红影 发表于 2024-1-21 23:12

马黑黑 发表于 2024-1-21 23:08
记事本什么都能打开，只是，它不支持的格式就是一堆乱码

原来图片的格式是它不支持的。

马黑黑 发表于 2024-1-21 23:13

红影 发表于 2024-1-21 23:12
原来图片的格式是它不支持的。

它就支持纯文本。其他的都不行，虽然能打开，但不要去点保存，否则文件会被破坏掉。

红影 发表于 2024-1-22 10:37

马黑黑 发表于 2024-1-21 23:13
它就支持纯文本。其他的都不行，虽然能打开，但不要去点保存，否则文件会被破坏掉。

哦，知道了。下回我找个没用的图图点保存试一下{:4_189:}

马黑黑 发表于 2024-1-22 11:45

红影 发表于 2024-1-22 10:37
哦，知道了。下回我找个没用的图图点保存试一下

图片或许可以。如果你会的话，可以在图片里加入别人可能不会注意到的信息，比如银行卡密码

红影 发表于 2024-1-22 16:14

马黑黑 发表于 2024-1-22 11:45
图片或许可以。如果你会的话，可以在图片里加入别人可能不会注意到的信息，比如银行卡密码

算了，那个风险太大{:4_173:}
页: [1] 2
查看完整版本: 图片转base64编码