2019年8月26日(月)
[JavaScript] 画像ファイルのプレビュー #■パソコン・通信 ホームページのフォームにおいて、画像ファイル（JPEG,
PNG,
GIFなど）を指定したときに、プレビュー画像が表示するといいですよね。
しかも、インターネット上に画像ファイルが流れずに、デバイス（パソコン、タブレット、スマホ）内で、JavaScriptで処理します。
余計なものを除いたプログラムのソースです。背景は黒色、文字は白色にしています。送信しないので、<form></form>も要らないのですが。。。
［サンプルページ］
https://neconote.jp/prg/imagefile_preview.html［サンプルページ］余計な取り扱い方付き
https://neconote.jp/prg/imagefile_preview_addtext.html※JPEGでは、撮影情報としてExifが付加されています。画像の回転[orientation]が含まれており、iPhoneでは回転を考慮して表示してくれますが、パソコンでは縦向きの画像も横向きに表示されます。このサンプルページでは、回転までは考慮していません。なお、PNGとGIFには、Exifはありません。
--
サンプルページのソース
--
<!DOCTYPE
html>
<html
lang="ja">
<head>
<meta
charset="UTF-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0">
<style>
<!--
body
{
background:black;
color:white;
font-size:12pt;
-webkit-text-size-adjust:100%;
}
p
{
max-width:600px;
}
#id_preview
{
max-width
:200px;
max-height:200px;
}
#id_data_url
{
border:solid
1px
white;
word-wrap:break-word;
}
-->
</style>
<script>
function
_preview(e){
var
$files
=
e.target.files;
var
$file
=
$files[0];
if(!$file)return;
var
$reader
=
new
FileReader();
$reader.onload
=
function(){
var
$DataURL
=
$reader.result;
document.getElementById("id_preview").src
=
$DataURL;
if(document.getElementById("id_display_data_url").checked){
document.getElementById("id_data_url").innerHTML
=
$DataURL;
}
}
$reader.readAsDataURL($file);
}
</script>
</head>
<body>
<form>
<p><input
type="file"
accept="image/*"
onchange="_preview(event)"></p>
<p><img
id="id_preview"></p>
<p><label><input
type="checkbox"
id="id_display_data_url">Data
URLの表示</label></p>
<p
id="id_data_url">※ここに、画像のData
URLを表示します。<br>※デバイスによっては、かなりの時間を必要とします。</p>
</form>
</body>
</html>
--
■解説
【HTML部分】
<!--
画像ファイルだけ選択肢に設定
-->
<input
type="file"
accept="image/*"
onchange="_preview(event)">
<!--
画像をプレビューする器
-->
<img
id="id_preview">
<!--
Data
URLを表示する器
-->
<p
id="id_data_url"></p>
【CSS部分】
/*
画像をプレビューする器。200×200px以下に小さく表示
*/
#id_preview
{
max-width
:200px;
max-height:200px;
}
/*
Data
URLを表示する器。<p>で設定した幅600pxで折り返して表示
*/
#id_data_url
{
border:solid
1px
white;
word-wrap:break-word;
}
【JavaScript部分】
//
引数eには、eventが代入される
function
_preview(e){
//
ファイル1つを選択
var
$files
=
e.target.files;
var
$file
=
$files[0];
if(!$file)return;
//
ファイルオブジェクトにファイルを読み込む
var
$reader
=
new
FileReader();
//
ファイルの読み込み完了
$reader.onload
=
function(){
//
Data
URLを抽出
var
$DataURL
=
$reader.result;
//
<img>のソースに、Data
URLを書き込む
document.getElementById("id_preview").src
=
$DataURL;
if(document.getElementById("id_display_data_url").checked){
//
<p></p>内に、Data
URLを書き込む
document.getElementById("id_data_url").innerHTML
=
$DataURL;
}
}
//
Data
URLを使えるようにする
$reader.readAsDataURL($file);
}
P.S.
トドロは古い人間で、変数名の最初に$を付けないと、こんがらがります。関数名には_、id名にはid_、name名にはn_を付けるのもそうです。命名でミスしないためでもあります。プログラムを再利用される場合は、自分のスタイルに置き換えてみて下さい。
お問い合わせ