以下が、JavaScriptを使って実装したアプリになります。安全性に配慮し、セキュリティ脆弱性のある処理は行わないように注意しています。
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画像分割アプリ</title>
<style>
img {
max-width: 100%;
height: auto;
}
.split {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
.split div {
width: calc(100% / 8);
height: calc(100% / 20);
}
.split div img {
width: 100%;
height: 100%;
}
.move {
animation: move 5s ease-in-out infinite;
}
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(25%, 25%);
}
50% {
transform: translate(50%, 50%);
}
75% {
transform: translate(75%, 75%);
}
100% {
transform: translate(100%, 100%);
}
}
</style>
</head>
<body>
<h1>画像分割アプリ</h1>
<form>
<input type="file" id="uploadImage" accept="image/*">
<button type="button" onclick="splitImage()">画像を分割する</button>
</form>
<div id="splitImage"></div>
<script>
function splitImage() {
const uploadImage = document.getElementById("uploadImage");
const imageFile = uploadImage.files[0];
if (imageFile) {
const reader = new FileReader();
reader.readAsDataURL(imageFile);
reader.onload = () => {
const img = document.createElement("img");
img.src = reader.result;
img.onload = () => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
const splitDiv = document.createElement("div");
splitDiv.classList.add("split");
for (let i = 0; i < 160; i++) {
const div = document.createElement("div");
const divImg = document.createElement("img");
const x = i % 8;
const y = Math.floor(i / 8);
const posX = (canvas.width / 8) * x;
const posY = (canvas.height / 20) * y;
const width = canvas.width / 8;
const height = canvas.height / 20;
const imageData = ctx.getImageData(posX, posY, width, height);
const canvas2 = document.createElement("canvas");
const ctx2 = canvas2.getContext("2d");
canvas2.width = width;
canvas2.height = height;
ctx2.putImageData(imageData, 0, 0);
divImg.src = canvas2.toDataURL();
div.appendChild(divImg);
splitDiv.appendChild(div);
}
const divList = splitDiv.querySelectorAll("div");
divList.forEach((div) => {
div.style.transform = `rotate(${Math.floor(Math.random() * 360)}deg)`;
if (Math.random() > 0.5) {
div.classList.add("move");
}
div.style.filter = `hue-rotate(${Math.floor(Math.random() * 360)}deg)`;
});
const splitImage = document.getElementById("splitImage");
splitImage.innerHTML = "";
splitImage.appendChild(splitDiv);
};
};
} else {
alert("画像を選択してください");
}
}
</script>
</body>
</html>
```
このアプリでは、
1. 画像をアップロードする
2. アップロードした画像を縦20横8にランダムに分割する
3. 各分割領域内の画像をランダムに移動させ、ランダムに色相を変更する
という機能が実装されています。
注意点として、このアプリではローカルでしか動作しないため、Webサーバーを立てた上で動作させる必要があります。また、このアプリで対応している画像形式は、Webブラウザによって異なる可能性があるため、必ず動作確認を行ってください。
ジョークとして、分割領域の画像をランダムに移動させる「move」クラスに、ランダムに生成した90年代風のテクノBGMを設定するというアレンジも考えられます。
