JavaScriptでパス形式の画像をBase64形式の画像URLに変換して表示

2022/07/23

(この記事の文字数: 2183)

パス形式の画像URLをBase64形式の画像URLに変換する簡易サンプルです。

以下がサンプルです。

ソースURL:
変換後のURL:
変換後のURLをsrcに指定した<img>:
変換後の画像を描画した<canvas>:

以下がサンプルのソースです。画像ファイルは同一オリジンでないといけないので、そこだけ手元の画像ファイルに変更すればコピペで動くと思います。

<dl>
    <dt>ソースURL:</dt>
    <dd> <input id="sourceUrl" value="/images/twitter.png" readonly="readonly" type="text"> </dd>
    <dt>変換後のURL:</dt>
    <dd> <textarea id="resultUrl" style="width:300px;height:300px;"></textarea> </dd>
    <dt>変換後のURLをsrcに指定した<img>:</dt>
    <dd> <img id="resultImg"> </dd>
    <dt>変換後の画像を描画した<canvas>:</dt>
    <dd> <canvas id="resultCanvas"> </dd>
</dl>
<script type="text/javascript">
    function toDataURL(url, callback) {
        var xhr = new XMLHttpRequest();
        xhr.onload = function () {
            var reader = new FileReader();
            reader.onloadend = function () {
                callback(reader.result);
            }
            reader.readAsDataURL(xhr.response);
        };
        xhr.open('GET', url);
        xhr.responseType = 'blob';
        xhr.send();
    }

    toDataURL(document.getElementById("sourceUrl").value, function (dataUrl) {
        document.getElementById("resultUrl").textContent = dataUrl;
        document.getElementById("resultImg").src = dataUrl;
        {
            let canvas = document.getElementById("resultCanvas");
            let ctx = canvas.getContext('2d');
            let image = new Image();
            image.onload = () => {
                canvas.width = image.width;
                canvas.height = image.height;
                ctx.drawImage(image, 0, 0, image.width, image.height);
            };

            image.src = dataUrl;
        }

    });
</script>

参考URL:
https://stackoverflow.com/questions/6150289/how-can-i-convert-an-image-into-base64-string-using-javascript