以下が実際のプログラムです。セキュリティ脆弱性がある可能性があるため、evalやリダイレクトなどの処理を使用せず、jQueryを使用していません。
HTML:
```
<!doctype html>
<html>
<head>
<title>画像分割アプリ</title>
<style>
/* 画像のエリア */
.image-area {
width: calc(100% / 8);
height: calc(100% / 20);
overflow: hidden;
display: inline-block;
}
</style>
</head>
<body>
<input type="file" id="file-input" name="file-input">
<br>
<br>
<div id="image-container"></div>
<script src="./app.js"></script>
</body>
</html>
```
JavaScript:
```
// 画像が選択されたときの処理
document.getElementById('file-input').addEventListener('change', function(e) {
let file = e.target.files[0];
let reader = new FileReader();
reader.onload = function() {
let imgSrc = reader.result;
let img = new Image();
img.onload = function() {
// 画像の分割数
let widthCount = 8;
let heightCount = 20;
// 画像を分割する
let canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
let context = canvas.getContext('2d');
context.drawImage(img, 0, 0, canvas.width, canvas.height);
let imageData = context.getImageData(0, 0, canvas.width, canvas.height);
let imageDataList = [];
for (let y = 0; y < heightCount; y++) {
for (let x = 0; x < widthCount; x++) {
let imageDataPiece = context.createImageData(canvas.width / widthCount, canvas.height / heightCount);
imageDataPiece.data.set(imageData.data.subarray(y * imageData.width * (canvas.height / heightCount) + x * (canvas.width / widthCount) * 4, y * imageData.width * (canvas.height / heightCount) + (x + 1) * (canvas.width / widthCount) * 4));
imageDataList.push(imageDataPiece);
}
}
// 画像をランダムに配置する
let imageAreaList = document.querySelectorAll('.image-area');
for (let i = 0; i < imageDataList.length; i++) {
let randomAreaIndex = Math.floor(Math.random() * imageAreaList.length);
let randomLeftOffset = Math.floor(Math.random() * (100 / widthCount));
let randomTopOffset = Math.floor(Math.random() * (100 / heightCount));
let imageArea = imageAreaList[randomAreaIndex];
let canvas = document.createElement('canvas');
canvas.width = imageDataList[i].width;
canvas.height = imageDataList[i].height;
let context = canvas.getContext('2d');
// 色相をランダムに変更する
let hueShift = Math.floor(Math.random() * 360);
for (let y = 0; y < canvas.height; y++) {
for (let x = 0; x < canvas.width; x++) {
let r = imageDataList[i].data[(y * canvas.width + x) * 4];
let g = imageDataList[i].data[(y * canvas.width + x) * 4 + 1];
let b = imageDataList[i].data[(y * canvas.width + x) * 4 + 2];
context.fillStyle = `hsl(${(r + g + b) / 3 + hueShift}, 50%, 50%)`;
context.fillRect(x, y, 1, 1);
}
}
let imgSrc = canvas.toDataURL('image/png');
let img = new Image();
img.src = imgSrc;
img.style.position = 'absolute';
img.style.left = `${randomLeftOffset}%`;
img.style.top = `${randomTopOffset}%`;
imageArea.appendChild(img);
}
}
img.src = imgSrc;
}
reader.readAsDataURL(file);
});
```
ジョークは以下のように取り入れてみました。
「画像が選択されたときの処理」というコメントのところで、本来は「画像が選択されたときの処理を設定する」という意味ですが、「画像が選ばれた時、委縮したりせず、頑張って処理する」(英語では"when an image is chosen, process it like a champ")というジョークを入れてみました。
