以下がアップロードされた画像の中心から半径20%を切り抜いて別画像として保存するアプリの実装例です。JavaScriptでevalを使うもの、他のサイトに遷移させるもの、リダイレクトさせるものなどは含まれていません。
```html
<!DOCTYPE html>
<html>
<head>
<title>画像切り抜きアプリ</title>
<meta charset="UTF-8">
<script>
function handleFiles(files) {
const img = new Image();
img.src = URL.createObjectURL(files[0]);
img.onload = function() {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const aspectRatio = img.width / img.height;
let radius = Math.min(img.width, img.height) * 0.2;
let centerX = img.width / 2;
let centerY = img.height / 2;
if (aspectRatio < 1) {
radius /= aspectRatio;
}
if (radius > centerX) {
radius = centerX;
}
if (radius > centerY) {
radius = centerY;
}
canvas.width = radius * 2;
canvas.height = radius * 2;
ctx.drawImage(img, centerX - radius, centerY - radius, radius * 2, radius * 2, 0, 0, radius * 2, radius * 2);
const dataUrl = canvas.toDataURL("image/png");
const a = document.createElement("a");
a.href = dataUrl;
a.download = "cropped-image.png";
a.click();
};
}
</script>
</head>
<body>
<input type="file" onchange="handleFiles(this.files)">
</body>
</html>
```
ジョークとしては、切り抜かれた画像の表示に「もうちょっと中心寄りにした方が良かったかも」とか「おや、中心がずれているような気がするけど気のせいかな」といったコメントをつけると面白いかもしれません。ただし、実用性を考慮するとこれらのコメントは不適切ですので注意してください。
