背景など
javascriptのキャッチアップ練習です。
指定したSVGファイルをPNGファイルに変換してダウンロードします。
変換用のソフト（ペイント3Dとか）が使えないところでは便利かもしれません。
動かした環境は次の通り。
- Windows 11 Home 22H2
- Microsoft Edge バージョン 111.0.1661.44 (公式ビルド) (64 ビット)
コード
svg2png.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>svg2png</title>
<script>
document.addEventListener('DOMContentLoaded', (ev) => {
document
.querySelector('#file_select_button')
.addEventListener('change', (ev) => {
// キャンセルの場合は何もしない
if (!ev.target.files.length) {
return;
}
// 選んだファイル
const f = ev.target.files[0];
// 保存名
const pngName = f.name + '.png';
// 画像読み込み用 Image要素
const imgElement = new Image();
// 読み込み後処理
imgElement.onload = (ev) => {
const img = ev.target;
// 用済みのオブジェクトURLを解放
URL.revokeObjectURL(img.src);
// canvas生成
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
// canvasにimgを描画
canvas.getContext('2d').drawImage(img, 0, 0);
// PNGフォーマットでObjectURLを取得
canvas.toBlob((blob) => {
const pngurl = URL.createObjectURL(blob);
// ダウンロード用にa要素を作成して、押す
// （直接のダウンロードは行えないので、ダウンロード用リンクを作成しそれを踏む）
const aElement = document.createElement('a');
aElement.href = pngurl;
aElement.download = pngName;
aElement.dispatchEvent(new MouseEvent('click'));
URL.revokeObjectURL(pngurl);
}, 'image/png');
};
// ファイルをオブジェクトURLにして読み込み開始
imgElement.src = URL.createObjectURL(f);
});
});
</script>
</head>
<body>
<input type="file" id="file_select_button" accept="image/svg+xml" />
</body>
</html>
ObjectURLの必要生存期間がよく分からないです。dispatchEvent直後に解放しちゃダメな気もする。
ドラッグ＆ドロップに対応できると、より使い勝手がよさそう。
参考
ウェブアプリケーションからのファイルの使用 - Web API | MDN
HTMLCanvasElement.toBlob() - Web API | MDN
javascript - Convert SVG to image (JPEG, PNG, etc.) in the browser - Stack Overflow
SVG画像をjavascriptでpngに変換してダウンロードする方法