画像をローカルからアップロードする形で取得 取得した画像を、縦〜20横〜8のランダムに分割しそれぞれのエリアをランダムに画像内で移動させ、色相をランダムに変更する
画像分割アプリ
画像分割アプリ
以下が、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を設定するというアレンジも考えられます。