Image to Pixel

？图像对像素

直观的编辑器，用于将图像转换为像素艺术，应用抖动效果以及管理自定义调色板！
作为交互式应用程序和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尝试演示。

---

您也可以通过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上标记我。非常感谢您的反馈和共享艺术！

• 有关更多像素艺术的优点，请查看功能全面的应用程序抖动龙，提供更多选项，包括动画支持！
• 想贡献吗？考虑成为赞助人。您的支持有助于维护和扩展项目。

快乐的像素化！

？执照

？图像对像素唇

此项目中使用的图像到像素库（图像到pixel.js）由MIT许可证获得许可。您可以在LICENSE-library中找到完整的许可证文本。

应用

图像到像素应用程序本身是根据Apache许可证2.0许可的。请参阅LICENSE-app文件以获取更多详细信息。

注意：虽然图像到pixel.js库可根据MIT许可免费获得，但申请代码是根据Apache许可证2.0分发的。确保您在使用或修改此项目时审查两个许可证，以了解您的权利和义务。

---