Data URL

2024年07月05日

柏拉文

越努力，越幸运

一、认识

---

在编写 HTML 网页时，对于一些简单图片，通常会选择将图片内容直接内嵌在网页中，从而减少不必要的网络请求，但是图片数据是二进制数据，该怎么嵌入呢？绝大多数现代浏览器都支持一种名为 Data URLs 的特性，允许使用 base64 对图片或其他文件的二进制数据进行编码，将其作为文本字符串嵌入网页中。

data url 格式如下:

data:[<mediatype>][;base64],<data>

二、创建

---

2.1 Input Change

<input type="file" accept="video/*" />
<script>
    function handleFileSelect(evt) {
    const file = evt.target.files[0];
    const reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = function (e) {
        const videoBlob = new Blob([e.target.result], { type: file.type });
        const blobUrl = URL.createObjectURL(videoBlob);

        const video = document.createElement("video");
        video.src = blobUrl;
        video.controls = true;
        document.body.appendChild(video);
    };
    }

    const inputEl = document.querySelector("input");
    inputEl.addEventListener("change", handleFileSelect);
</script>