Image to Pixel

? Изображение к пикселю

Интуитивно понятный редактор для преобразования изображений в Pixel Art, применение эффектов дигинга и управления пользовательскими палитрами!
Доступно как интерактивное приложение , так и API JavaScript .

Попробуйте его вживую здесь : редактор изображения к пикселям

? Ищете старый редактор? Вы можете найти это здесь.

? Этот проект был построен полностью в редакторе кодов на основе браузера AIJS. ?

---

Функции приложения

Версия 2.0
V2 представляет повышенную скорость, новые функции и изысканный интерфейс:

• ⚡ Высоко оптимизированные : мгновенные результаты для большинства изображений, даже при больших размерах.
• Авторефреш переключатель : см. Изменения вживую вживую, когда вы настраиваете настройки.
• Параметры Dithering : выберите между Floyd-Steinberg , 2x2 Bayer , 4x4 Bayer , Ordered , Clustered 4x4 и atkinson , и регулируйте прочность на расстояние в режиме реального времени.
• ? Поддержка палитры : используйте палитры по умолчанию из Lospec или импортируйте пользовательские с помощью API Lospec с использованием палитры слизняка (например, rgbg-36 из палитры Lospec).
• ? Управление пользовательскими палитрами : создайте пользовательские палитры, сохраняйте их в локальный кеш или загрузите и загрузите их в формате 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
} ) ;

Попробуйте демо, используя API с изображением к пикселям с Q5.JS здесь.

---

Вы также можете настроить его с P5/Q5 через p5.prototype.registerMethod .

Попробуйте демонстрацию, используя API с изображением к пикселям с P5Play здесь.

 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 Art Goodness, ознакомьтесь с полнофункциональным приложением Dither Drgeon , предлагая еще больше вариантов, включая поддержку анимации!
• Хотите внести свой вклад? Подумайте о том, чтобы стать покровителем. Ваша поддержка помогает поддерживать и расширять проект.

Счастливого пикселирования!

? Лицензия

? Изображение к пикселям Лайт

Библиотека изображения-пикселя (Image-to-pixel.js), используемая в этом проекте, лицензирована по лицензии MIT. Вы можете найти полный текст лицензии в файле LICENSE-library .

Приложение

Само приложение с изображением к пикселям лицензировано по лицензии Apache 2.0. Пожалуйста, обратитесь к файлу LICENSE-app для получения более подробной информации.

ПРИМЕЧАНИЕ. Хотя библиотека Image-to-pixel.js свободно доступна по лицензии MIT, код приложения распределен по лицензии Apache 2.0. Убедитесь, что вы просматриваете обе лицензии, чтобы понять ваши права и обязательства при использовании или изменении этого проекта.

---