HTMLのinputで選択した画像ファイルをJavaScriptでページの背景画像に設定したい

HTMLとCSSとJavaScriptで自分専用のスタートページを作っています。
CSSでページの全体に背景画像を設定して壁紙にしているのですが、自分でCSSの画像のアドレスを書き換えずに、ページのボタンを押して画像ファイルを選択して画像を変更したいと思っています。
ぼくはJavaScriptの書き方がわかりません。
HTMLのinputで選択した画像ファイルをJavaScriptで背景画像にする方法を教えてください。

ソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8">
5        <title>スタートページ</title>
6        <link rel="stylesheet" href="style.css">
7        <link rel="icon" href="favicon.svg" type="image/svg+xml">
8    </head>
9    <body id="body">
10        <h1>スタートページ</h1>
11        <div id="link">
12            <!-- サイトのリンク aタグで記述しました -->
13        </div>
14        <label for="backgroundImage" id="backgroundImageUpload">
15            イメージを選択
16            <input type="file" name="BackgroundImage" id="backgroundImage" accept="image/*">
17        </label>
18    </body>
19</html>

CSS
1html, body {
2    width: auto;
3    height: 100%;
4    color: #000000;
5    font-size: 20px;
6    font-weight: normal;
7    padding: 0;
8    border: none;
9    outline: none;
10    user-select: none;
11}
12@media (prefers-color-scheme: dark) {
13    html, body {
14        color: #FFFFFF;
15    }
16}
17body {
18    background-image: url("image.jpg");
19    background-position: center center;
20    background-size: cover;
21    background-repeat: no-repeat;
22    background-attachment: fixed;
23}
24label#backgroundImageUpload input {
25    display: none;
26}
27label#backgroundImageUpload {
28    position: absolute;
29    bottom: 50px;
30    right: 50px;
31    width: 100px;
32    height: 20px;
33    line-height: 20px;
34    display: inline-block;
35    font-size: 20px;
36    font-weight: normal;
37    color: #FFFFFF;
38    background-color: #007AFF;
39    text-decoration: none;
40    cursor: default;
41    border: none;
42    border-radius: 10px;
43    margin: 5px;
44    padding: 10px;
45    text-align: center;
46    outline: none;
47    user-select: none;
48}
49@media (prefers-color-scheme: dark) {
50    label#backgroundImageUpload {
51        color: #000000;
52        background-color: #0A84FF;
53    }
54}

試したこと

検索して調べてHTMLのinputの入力をJavaScriptで取得する方法はわかりましたが、問題のinputの入力を背景画像にする方法がわかりませんでした。

補足情報（FW/ツールのバージョンなど）

コンピュータのOSはWindows 10でVisual Studio Codeを使っています。

m.ts10806

2021/09/15 11:23

>script.js のコードもご提示ください。＞設定した画像を記憶して、読み込みなおしてもその画像を表示する方法もよければ教えてください。フロントの言語だけではできません。 PHPなどサーバーサイドの言語が必要です。

退会済みユーザー

2021/09/15 21:15

>script.js のコードもご提示ください。 JavaScriptの書き方がわからず、コードが書けていません。丸投げになってしまい、申し訳ありません。＞フロントの言語だけではできません。 PHPなどサーバーサイドの言語が必要です。わかりました。教えていただきありがとうございます。今回はやめておきます。

yambejp

2021/09/16 00:59

type=fileで選択した画像を背景にすればいいだけですか？それは自分だけが一時的に使えればいいならjsだけでもいけそうですが

退会済みユーザー

2021/09/16 12:17

それです！！

行動規範の内容に同意します

回答2件

サーバサイドの仕組みなしで一応は可能です。

<input type=file> の change イベントで、FileReader.readAsDataURL() を使って指定したファイルの中身を data: URLに変換します。
その data: URL を目的の要素の background-image プロパティにセットします。
と、同時に、localStorage や Indexed DB を使って data: URL をローカルに保存しておきます。
ページのロード時に、↑で保存しておいたデータが存在する場合は目的の要素の background-image にセットします。

投稿2021/09/16 01:52

int32_t

総合スコア20882

ベストアンサー

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  const f=document.querySelector('#f');
4  f.addEventListener('change',()=>{
5    const content = f.files[0];
6    const blob=new Blob([content],{type:f.type});
7    document.body.style.backgroundImage=`url(${URL.createObjectURL(blob)})`;
8  });
9});
10</script>
11<input type="file" id="f">
12