HTML + JavaScript ツール第3弾。
HTML5 の canvas 要素で画像のリサイズができるというので、やってみた。
cf. 画像のリサイズ
Size を指定しておいて、リサイズしたい画像を選ぶとリサイズされた画像が画面に並ぶようになっている。画像をクリックすればダウンロードもできる。
参考にしたページはいくつかあるけど、↓ここを挙げておこう。
cf. クライアント側でcanvasを使って画像をリサイズする – Qiita
以下、ソース。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Resize image</title>
<script type="text/javascript">
function resizeImage(base64image, callback) {
const MAX_SIZE = Number(document.getElementById("size").value);
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
let image = new Image();
image.crossOrigin = "Anonymous";
image.onload = function(evt) {
let dstWidth, dstHeight;
if (this.width > this.height) {
dstWidth = MAX_SIZE;
dstHeight = this.height * MAX_SIZE / this.width;
} else {
dstHeight = MAX_SIZE;
dstWidth = this.width * MAX_SIZE / this.height;
}
canvas.width = dstWidth;
canvas.height = dstHeight;
ctx.drawImage(this, 0, 0, this.width, this.height, 0, 0, dstWidth, dstHeight);
callback(canvas.toDataURL("image/png"));
};
image.src = base64image;
}
function buildFilename(origname) {
let re = /(.*)(?:\.([^.]+$))/;
let basename = origname.match(re)[1];
return "resized_" + basename + ".png";
}
function handleFileSelect(evt) {
let files = evt.target.files;
for (let i = 0, f; f = files[i]; i++) {
let reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
resizeImage(e.target.result, function(imgUrl) {
let dest = document.getElementById("list");
let fig = document.createElement("figure");
fig.style = "float: left;";
let a = document.createElement("a");
a.href = imgUrl;
a.download = buildFilename(theFile.name);
let image = document.createElement("img");
image.src = imgUrl;
let caption = document.createElement("figcaption")
caption.innerHTML = theFile.name + " resized.";
a.appendChild(image);
fig.appendChild(a);
fig.appendChild(caption);
dest.appendChild(fig);
});
}})(f);
reader.readAsDataURL(f);
}
}
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("files").addEventListener("change", handleFileSelect, false);
}, false);
</script>
</head>
<body>
<h1>Resize image</h1>
<p>下のSizeで指定したサイズの正方形におさまるようにリサイズします。</p>
<p>画像をクリックすればダウンロードできます。</p>
Size: <input id="size" type="text" value="400"> pixel<br />
<input id="files" multiple="multiple" name="files[]" type="file"><br />
<div id="list"></div>
</body>
</html>