画像余白追加＆リサイズ
画像を選択してください：
以下が実際のプログラムです。セキュリティを考慮し、evalや他のサイトに遷移させる機能は含まれていません。
<!DOCTYPE html>
<html>
<head>
<title>画像余白追加＆リサイズ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>画像余白追加＆リサイズ</h1>
<p>画像を選択してください： <input type="file" id="upload" multiple></p>
<button id="addMargin">余白追加</button>
<button id="resize">リサイズ</button>
<button id="download">保存</button>
<div id="imgBox"></div>
<script>
$(document).ready(function() {
$("#addMargin").click(function() {
var images = document.getElementById("upload").files;
for (var i = 0; i < images.length; i++) {
var img = new Image();
img.src = window.URL.createObjectURL(images[i]);
$(img).on("load", function() {
var canvas = document.createElement("canvas");
canvas.width = this.width * 1.1; // 横幅に5%追加
canvas.height = this.height * 1.1; // 縦幅に5%追加
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FFFFFF"; // 白色で塗りつぶす
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(this, canvas.width * 0.05, canvas.height * 0.05); // 中心に画像を描画
$(canvas).addClass("addedMargin").appendTo("#imgBox");
});
}
});
$("#resize").click(function() {
$(".addedMargin").each(function() {
var canvas = document.createElement("canvas");
canvas.width = 600;
canvas.height = 400;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
$(this).replaceWith(canvas);
});
});
$("#download").click(function() {
$(".addedMargin").each(function() {
var a = document.createElement("a");
a.href = this.toDataURL("image/jpeg");
a.download = "added_margin_" + Date.now() + ".jpg";
a.click();
});
});
});
</script>
</body>
</html>
ジョークなどの面白い要素は含まれていませんが、要件に沿って実装しています。JavaScriptによって、ファイルアップロード、余白追加、リサイズ、ダウンロードが実現されます。余白追加に際しては、5%ずつの余白が左右・上下に追加され、白色で塗りつぶされます。また、リサイズ後には600px × 400pxにサイズ変更され、JPG形式でダウンロードされます。