Image to Pixel

？画像からピクセル

画像をピクセルアートに変換し、ディザリングエフェクトを適用し、カスタムパレットを管理するための直感的なエディター！
インタラクティブアプリケーションとJavaScript APIの両方として利用できます。

ここでライブで試してみてください：画像間エディター

？古い編集者をお探しですか？ここで見つけることができます。

？このプロジェクトは、AIJSブラウザーベースのコードエディターで完全に構築されました。 ？

---

アプリケーション機能

バージョン2.0
V2は、強化された速度、新機能、洗練されたインターフェイスを導入します。

• celllight高度に最適化：大きいサイズであっても、ほとんどの画像の瞬間的な結果。
• Auto-Refresh Toggle ：設定を微調整するにつれて、変更をライブで参照してください。
• ディザリングオプション： Floyd-Steinberg 、 2x2 Bayer 、 4x4 Bayer 、 Ordered 、 Clustered 4x4とatkinsonのクラスター化を選択し、リアルタイムでディザリング強度を調整します。
• ？パレットサポート：LOSPECのデフォルトのパレットを使用するか、パレットスラッグ（LOSPECパレットのrgbg-36など）を使用してLOSPECのAPIを介してカスタムパレットをインポートします。
• ？カスタムパレット管理：カスタムパレットを作成し、ローカルキャッシュに保存するか、JSON形式でダウンロードしてアップロードします。
• ？解像度制御：入力画像の解像度または実際のピクセルアートとしてピクセル化された画像をダウンロードします。
• ？自動検出画像サイズ：元の画像サイズ（スプライトシートに最適）と一致するようにピクセル幅を簡単に設定できます。

---

APIを使用します

自分のプロジェクトでimage-to-pixelライブラリを使用できます。画像とオプションをpixelate関数に渡し、見返りに美しくディザードされた画像を取得します。
注：APIはまだ進行中の作業です。公式の文書は開発中です。

使用の例

あなたのプロジェクトにライブラリを追加します：

CDNを介して使用します。

 < script src =" https://cdn.jsdelivr.net/gh/Tezumie/Image-to-Pixel@main/image-to-pixel.js " > </ script >

またはローカル（推奨）を使用します。

 < script src =" image-to-pixel.js " > </ script >

JavaScriptの例

 ditheredCanvas = await pixelate ( {
  image : myCanvas ,             // Accepts HTML canvas, image elements, or q5/p5.js image objects
  width : 128 ,                  // Set pixelation width
  dither : 'Floyd-Steinberg' ,   // Dithering method ('Floyd-Steinberg', 'Ordered','2x2 Bayer', '4x4 Bayer',`Clustered 4x4` or `atkinson`)
  strength : 20 ,                // Dithering strength (0-100)
  //palette: 'rgbg-36',        // Optional: Lospec palette slug (depends on Lospec API availability)
  //Recommended: Define a custom palette //  // You can also set `palette: null,` to use the colors from your original image //
  palette : [ 
    '#1b1b1e' , '#f4f1de' , '#e07a5f' ,
    '#3d405b' , '#81b29a' , '#f2cc8f' ,
    '#8d5a97' , '#ef3054'
  ] ,
  resolution : 'original'       // Use 'original' for full resolution, or 'pixel' for pixelated size
} ) ;

Q5.jsを使用して画像間APIを使用してデモを試してみてください。

---

P5/Q5からp5.prototype.registerMethodでセットアップすることもできます。

ここでP5Playを使用して画像間APIを使用してデモを試してください。

 let myCanvas ; // add a reference for the input canvas 

function setup ( ) {
	myCanvas = createCanvas ( windowWidth , windowHeight ) ;
}
. . .
...
async function draw ( ) {
}

//-----------------------Function to pixelate entire sketch-----------------------//
p5 . prototype . registerMethod ( 'post' , async function pixelateAndRender ( ) {
	ditheredCanvas = await pixelate ( {
		image : myCanvas ,
		width : 320 ,
		dither : 'ordered' ,
		strength : 11 ,
		palette : [
			'#1b1b1e' , '#f4f1de' , '#e07a5f' ,
			'#3d405b' , '#495c92' , '#596da7' , '#81b29a' , '#f2cc8f' ,
			'#8d5a97' , '#ef3054' , '#d3d0be' , '#4a7762' , '#364e43' ,
		] ,
		resolution : 'pixelated'
	} ) ;
	image ( ditheredCanvas , 0 , 0 , width , height ) ;
} ) ; 

❤❤§サポート

プロジェクトをサポートしたい場合は、編集者を使用して作成を共有し、Twitter @Tezumiesでタグを付けることを検討してください。あなたのフィードバックと共有アートは大歓迎です！

• より多くのピクセルアートの良さについては、フル機能のアプリDither Dragonをご覧ください。アニメーションサポートなど、さらに多くのオプションを提供してください。
• 貢献したいですか？後援者になることを検討してください。あなたのサポートは、プロジェクトの維持と拡大に役立ちます。

幸せなピクセル化！

？ライセンス

？画像からピクセルのラブラリ

このプロジェクトで使用されている画像からピクセルのライブラリ（画像からピクセル.js）は、MITライセンスの下でライセンスされています。 LICENSE-libraryファイルに完全なライセンステキストを見つけることができます。

応用

画像間アプリケーション自体は、Apacheライセンス2.0に基づいてライセンスされています。詳細については、 LICENSE-appファイルを参照してください。

注： Image-to-Pixel.jsライブラリはMITライセンスの下で無料で入手できますが、アプリケーションコードはApacheライセンス2.0で配布されます。このプロジェクトを使用または変更するときに、両方のライセンスを確認するために、あなたの権利と義務を理解するために確認してください。

---