ロゴ メインコンテンツへ
RSSフィード
「Web 開発」に関連する記事一覧

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

2022/07/23
(この記事の文字数: 273)

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

以下がサンプルです。

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

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


<dl>
    <dt>ソースURL:</dt>
    <dd>
        <input id="sourceUrl" type="text" value="/images/twitter.png" />
    </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>
</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;
    });
</script>

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


  このエントリーをはてなブックマークに追加  

<<「Web 開発」の記事一覧に戻る

<<「Web 開発」の次の記事

コメント(0 件)



コンテンツロード: 0.0087 sec
Copyright(C)2006-2024 puarts All Rights Reserved