指定画像をヴェイパーウェーブ風画像に変換します。あくまでも「〜風」です（^o^）
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>ヴェイパーウェーブ風画像変換</title>
<style>
body {
background-color: #111;
color: #fff;
font-family: "Poppins", sans-serif;
text-align: center;
}
canvas {
margin-top: 20px;
max-width: 90%;
border: 2px solid #ff66cc;
box-shadow: 0 0 20px #ff00ff;
}
input {
margin-top: 20px;
}
</style>
</head>
<body>
<h2>ヴェイパーウェーブ風画像変換</h2>
<canvas id="canvas"></canvas><br>
<input type="file" accept="image/*" id="imageInput">
<!--
input type="file"で
［ファイルを選択］選択されていません 。Google Crome
［参照］ファイルが選択されていません 。firefox
など、ブラウザに寄り異なります。
-->
<script>
const fileInput = document.getElementById('imageInput');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
fileInput.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
const img = new Image();
img.onload = () => {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
// ピクセルデータを取得
const imageData = ctx.getImageData
(0, 0, canvas.width, canvas.height);
const data = imageData.data;
// コントラスト・彩度調整 + ピンク・シアン調色
for (let i = 0; i < data.length; i += 4) {
let r = data[i];
let g = data[i + 1];
let b = data[i + 2];
// コントラスト強調
const contrast = 1.4;
r = ((r - 128) * contrast + 128);
g = ((g - 128) * contrast + 128);
b = ((b - 128) * contrast + 128);
// 彩度アップ（簡易）
const avg = (r + g + b) / 3;
r = r + (r - avg) * 0.5;
g = g + (g - avg) * 0.5;
b = b + (b - avg) * 0.5;
// ヴェイパーウェーブ調の色合い
r += 20;
g += 0;
b += 40;
// 範囲制限
data[i] = Math.min(255, Math.max(0, r));
data[i + 1] = Math.min(255, Math.max(0, g));
data[i + 2] = Math.min(255, Math.max(0, b));
}
ctx.putImageData(imageData, 0, 0);
// グラデーションオーバーレイ
const gradient = ctx.createLinearGradient
(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, 'rgba(255,0,255,0.2)');
gradient.addColorStop(1, 'rgba(0,255,255,0.2)');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// ノイズ追加
const noiseDensity = 0.03;
const noise = ctx.getImageData
(0, 0, canvas.width, canvas.height);
const nData = noise.data;
for (let i = 0; i < nData.length; i += 4) {
if (Math.random() < noiseDensity) {
const v = (Math.random() - 0.5) * 60;
nData[i] += v;
nData[i + 1] += v;
nData[i + 2] += v;
}
}
ctx.putImageData(noise, 0, 0);
};
img.src = URL.createObjectURL(file);
});
</script>
</body>
</html>
<!-- index.html -->
実行したら画像を指定するだけです。
元画像はIllustratorで作成し、Photoshopに配置（※）してjogで書き出し。
※Illustratorにはチャンネルという概念が無いので
結果はこんな感じです。やっぱり画像に大きく影響します。色々試行錯誤すると感覚が掴めます。
