Image to Pixel下載 - Image to Pixel源代碼下載

Image to Pixel

其他資源

1.0.0

下載

？圖像對像素

直觀的編輯器，用於將圖像轉換為像素藝術，應用抖動效果以及管理自定義調色板！
作為交互式應用程序和JavaScript API可用。

在這裡嘗試它：圖像到像素編輯器

？尋找舊編輯器？您可以在這裡找到它。

？該項目完全是在基於AIJS瀏覽器的代碼編輯器中構建的。？

封面圖像

應用功能

2.0版
V2引入了增強的速度，新功能和精製界面：

⚡高度優化：大多數圖像的即時結果，即使在較大尺寸下也是如此。
自動刷新切換：調整設置時，請參見更改實時。
抖動選項：在Floyd-Steinberg ， 2x2 Bayer ， 4x4 Bayer之間進行選擇， Ordered ， Clustered 4x4和atkinson ，並實時調整抖動強度。
？調色板支持：使用lospec中使用默認調色板或使用Lospec的API使用調色板SLUG（例如，來自Lospec Palette的rgbg-36 ）。
？自定義調色板管理：創建自定義調色板，將其保存到本地緩存或以JSON格式下載和上傳。
？分辨率控件：以輸入圖像的分辨率或實際像素藝術下載您的像素化圖像。
？自動檢測圖像尺寸：輕鬆設置像素寬度以匹配原始圖像大小（非常適合SpriteSheets）。

使用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嘗試演示。

Q5像素

您也可以通過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 ) ;
} ) ;