この最近、ピクセルスタイルに夢中になっています。とてもレトロな味があり、子供の頃にポケモンを遊んでいた時もピクセルスタイルだったので、たくさんの思い出が蘇ります。
自分のデスクトップの壁紙もピクセルスタイルに変えました。とてもいい感じです😝
自分でピクセルスタイルで作品を作りたいと思っていますが、自分にはそのような芸術的な才能がないと感じています... だから、普通の画像をピクセルスタイルに変換できるか考えています🤔
アイデア⭐#
- キャンバスを使用して画像を縮小し、一部のピクセル情報を失わせます。
- 縮小した画像を描画します。
- 縮小した画像を拡大し、ピクセルを見ることができるようにします。
実際には、小さな画像を拡大すると、ぼやけた効果が感じられます。
コード💻#
ブラウザのスムージング処理を無効にすることは、アンチエイリアス処理を行うかどうかを意味します。
入力ボックスには 0 から 100 までの値しか入力できないように正規表現を使用します。これは、画像の拡大縮小の割合を制限するためです（100 は拡大縮小なしで、ピクセル化の効果は得られません）。
const pixel = (canvas, image, scale)=> {
scale *= 0.01;
canvas.width = image.width;
canvas.height = image.height;
// 画像を縮小する
let scaledW = canvas.width * scale;
let scaledH = canvas.height * scale;
let ctx = canvas.getContext('2d');
// ブラウザのスムージング処理を無効にする
ctx.imageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
// 縮小した画像を描画する
ctx.drawImage(image, 0, 0, scaledW, scaledH);
// 縮小した画像を元のサイズに戻す
ctx.drawImage(canvas, 0, 0, scaledW, scaledH, 0, 0, canvas.width, canvas.height);
};
btn.addEventListener('click', function(){
const Regex = new RegExp(/^100$|^(\d|[1-9]\d)(\.\d+)*$/)
let scale = input.value;
if(scale==''){
scale = 40;
}
if(!Regex.test(scale)){
window.alert('入力が正しくありません')
return;
}
console.log(scale);
pixel(canvas,img,scale);
}, false);