<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画像ファイルをHTMLに埋め込めるBase64形式に変換</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<div id="header-placeholder"></div>
<div class="page-wrapper">
<aside id="sidebar">
<!-- Sidebar content will be injected here by JS -->
</aside>
<div class="content-wrapper">
<div class="main">
<br>
<h1 class="hyoudai" style="margin-bottom:0;">画像ファイルをHTMLに埋め込めるBase64形式に変換</h1>
<br>
<input type="file" id="imageInput" accept="image/*"><br>
<label><input type="checkbox" id="wrapInImgTag" checked> <img>タグで出力する</label>
<textarea id="output" placeholder="ここにBase64またはimgタグが表示されます"></textarea>
<div id="preview"></div>
<script>
document.getElementById('imageInput').addEventListener('change', function (event) {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function () {
const base64 = reader.result;
const wrap = document.getElementById('wrapInImgTag').checked;
const output = wrap ? `<img src="${base64}" alt="内蔵画像">` : base64;
document.getElementById('output').value = output;
document.getElementById('preview').innerHTML = wrap ? output : `<img src="${base64}">`;
};
reader.readAsDataURL(file);
});
</script>
<small>🔧 機能
画像ファイル（JPEG/PNG/WebPなど）を読み込み
data:image/png;base64,... 形式で変換
<img>タグでのラップも可能（チェックボックスで切り替え）
HTMLにそのまま貼り付け可能な形式で出力
✅ 使い方
上記コードを .html ファイルとして保存（例：image_to_base64.html）
ブラウザで開く
画像を選択
Base64またはHTMLコードが生成されるのでコピー
</small>
</div>
</div>
</div>
<script src="../load_header.js"></script>
<style>
textarea{
width:100%;
height:300px;
}
</style>
</body>
</html>
目次
コメント