Image to Pixel

? Gambar-ke-pixel

Editor intuitif untuk mengubah gambar menjadi seni piksel, menerapkan efek thering, dan mengelola palet khusus!
Tersedia sebagai aplikasi interaktif dan API JavaScript .

Coba Live Here : Editor Gambar-ke-Pixel

? Mencari editor lama? Anda dapat menemukannya di sini.

? Proyek ini dibangun sepenuhnya dalam editor kode berbasis browser AIJS. ?

---

Fitur Aplikasi

Versi 2.0
V2 memperkenalkan kecepatan yang ditingkatkan, fitur baru, dan antarmuka yang halus:

• ⚡ Sangat dioptimalkan : Hasil instan untuk sebagian besar gambar, bahkan pada ukuran yang lebih besar.
• Toggle Auto-Refresh : Lihat perubahan hidup saat Anda mengubah pengaturan.
• Opsi Dithering : Pilih antara Floyd-Steinberg , 2x2 Bayer , 4x4 Bayer , Ordered , Clustered 4x4 dan atkinson , dan menyesuaikan kekuatan thering secara real-time.
• ? Dukungan Palet : Gunakan palet default dari LOSPEC atau impor yang adat melalui API LOSPEC menggunakan palet siput (misalnya, rgbg-36 dari palet LOSPEC).
• ? Manajemen Palet Kustom : Buat palet khusus, simpan ke cache lokal, atau unduh dan unggah dalam format JSON.
• ? Kontrol Resolusi : Unduh gambar pixelated Anda pada resolusi gambar input atau sebagai seni piksel yang sebenarnya.
• ? Ukuran gambar deteksi otomatis : Mudah mengatur lebar piksel agar sesuai dengan ukuran gambar asli (bagus untuk spritesheets).

---

Menggunakan API

Anda dapat menggunakan pustaka image-to-pixel di proyek Anda sendiri. Lewati gambar dan opsi ke fungsi pixelate , dan dapatkan gambar yang indah sebagai imbalan.
Catatan : API masih dalam proses; Dokumentasi resmi sedang dikembangkan.

Contoh penggunaan

Tambahkan perpustakaan ke proyek Anda:

Gunakan melalui CDN;

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

Atau gunakan secara lokal (disarankan);

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

Contoh 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
} ) ;

Coba demo menggunakan API gambar-ke-pixel dengan Q5.js di sini.

---

Anda juga dapat mengaturnya dengan P5/Q5 melalui p5.prototype.registerMethod .

Coba demo menggunakan API gambar-ke-piksel dengan P5Play di sini.

 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 ) ;
} ) ; 

❤️ Dukungan

Jika Anda ingin mendukung proyek ini, pertimbangkan untuk berbagi kreasi Anda menggunakan editor dan memberi tag saya di Twitter @tezumies. Umpan balik dan seni bersama Anda sangat dihargai!

• Untuk lebih banyak kebaikan seni pixel, lihat aplikasi fitur lengkap Dither Dragon , menawarkan lebih banyak opsi termasuk dukungan animasi!
• Ingin berkontribusi? Pertimbangkan untuk menjadi pelindung. Dukungan Anda membantu mempertahankan dan memperluas proyek.

Selamat pixelating!

? Lisensi

? Labrary gambar-ke-pixel

Perpustakaan gambar-ke-pixel (gambar-ke-pixel.js) yang digunakan dalam proyek ini dilisensikan di bawah lisensi MIT. Anda dapat menemukan teks lisensi lengkap dalam file LICENSE-library .

Aplikasi

Aplikasi gambar-ke-pixel itu sendiri dilisensikan di bawah Lisensi Apache 2.0. Silakan merujuk ke file LICENSE-app untuk detail lebih lanjut.

Catatan: Sementara perpustakaan gambar-ke-pixel.js tersedia secara bebas di bawah lisensi MIT, kode aplikasi didistribusikan di bawah Lisensi Apache 2.0. Pastikan Anda meninjau kedua lisensi untuk memahami hak dan kewajiban Anda saat menggunakan atau memodifikasi proyek ini.

---