<!DOCTYPE html>
<html>
<head>
<meta charset="'utf-8">
<title>resize with canvas</title>
</head>
<body>
<input type="file">
<div class="box"></div>
<script>
const input = document.querySelector('input');
const box = document.querySelector('.box');
input.addEventListener('change', (e) => {
let image = e.target.files[0];
console.log(image);
// 画像を「data:」から始まるURLに変換してダウンロードできるようにする
let reader = new FileReader();
reader.readAsDataURL(image);
console.log(reader);
// ロードイベント
reader.onload = (e) => {
// 一旦オリジナルサイズのimgタグを作成する必要がある(readerのresultにURlが格納されている)
const imgTag = document.createElement('img');
imgTag.src = e.target.result;
imgTag.onload = (e) => {
// canvasタグをクリエイトして幅400にリサイズした図形を描写する
const canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = e.target.height * 400 / e.target.width;
canvas.getContext('2d').drawImage(imgTag, 0, 0, canvas.width, canvas.height);
// imgタグをクリエイトしてboxにappendChildする（品質は90に落として、拡張子はpngを指定）
const newImgTag = document.createElement('img');
newImgTag.src = canvas.getContext('2d').canvas.toDataURL('image/png', 90);
box.appendChild(newImgTag);
};
};
});
</script>
</body>
</html>