無精・短気・傲慢

perlの事 いろいろ

JavaScriptで選択したファイルを背景画像にする

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

サンプル　GitHub

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>JavaScriptで選択したファイルを背景画像にする</title>
</head>
<body>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const f=document.querySelector('#f');
  f.addEventListener('change',()=>{
    const content = f.files[0];
    const blob=new Blob([content],{type:f.type});
    document.body.style.backgroundImage=`url(${URL.createObjectURL(blob)})`;
  });
});
</script>
<input type="file" id="f">
</body>
</html>