パス形式の画像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>
