JS：前端二进制

<input type="file" accept="image/*" onchange="loadFile(event)" />
<img id="image" />
<script>
    function loadFile(event) {
        const reader = new FileReader();
        reader.onload = function () {
            const image = document.querySelector("#image");
            image.src = reader.result;
        };
        reader.readAsDataURL(event.target.files[0]);
    }
</script>

<img id="image" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAD">

console.log(btoa('BC')); // QkM=
console.log(atob('QkM=')); // BC

<img id="image" />
<script>
    const image = document.querySelector("#image");
    fetch("https://avatars3.githubusercontent.com/u/4220799")
    .then((response) => response.blob())
    .then((blob) => {
        const objectUrl = URL.createObjectURL(blob);
        image.src = objectUrl;
    });
</script>