Image to Pixel

- ภาพต่อพิกเซล

ตัวแก้ไขที่ใช้งานง่ายสำหรับการแปลงภาพเป็นงานศิลปะพิกเซลใช้เอฟเฟกต์ dithering และการจัดการจานสีที่กำหนดเอง!
มีให้ทั้ง แอปพลิเคชัน แบบโต้ตอบและ JavaScript API

ลองใช้งานสดที่นี่ : image-to-pixel editor

- กำลังมองหาบรรณาธิการเก่า? คุณสามารถค้นหาได้ที่นี่

- โครงการนี้ถูกสร้างขึ้นทั้งหมดในโปรแกรมแก้ไขรหัสเบราว์เซอร์ AIJS -

---

คุณสมบัติแอปพลิเคชัน

เวอร์ชัน 2.0
V2 แนะนำความเร็วที่เพิ่มขึ้นคุณสมบัติใหม่และอินเทอร์เฟซที่ละเอียดอ่อน:

• ⚡ ปรับให้เหมาะสมมาก : ผลลัพธ์ทันทีสำหรับภาพส่วนใหญ่แม้ในขนาดที่ใหญ่กว่า
• การสลับแบบอัตโนมัติ : ดูการเปลี่ยนแปลงสดในขณะที่คุณปรับแต่งการตั้งค่า
• ตัวเลือก Dithering : เลือกระหว่าง Floyd-Steinberg , 2x2 Bayer , 4x4 Bayer , Ordered , Clustered 4x4 และ atkinson , คลัสเตอร์, และปรับความแข็งแรงของ dithering แบบเรียลไทม์
• - การสนับสนุน Palette : ใช้จานสีเริ่มต้นจาก Lospec หรือนำเข้าที่กำหนดเองผ่าน API ของ Lospec โดยใช้ Slug Palette (เช่น rgbg-36 จาก Lospec Palette)
• - การจัดการพาเล็ตที่กำหนดเอง : สร้างจานสีที่กำหนดเองบันทึกไว้ในแคชท้องถิ่นหรือดาวน์โหลดและอัปโหลดในรูปแบบ 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
} ) ;

ลองสาธิตโดยใช้ 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 ข้อเสนอแนะและงานศิลปะที่ใช้ร่วมกันของคุณได้รับการชื่นชมอย่างมาก!

• สำหรับความดีของพิกเซลมากขึ้นลองดูแอพพลิเคชั่นเต็มรูปแบบ DINY DRAGON ซึ่งเสนอตัวเลือกเพิ่มเติมรวมถึงการสนับสนุนแอนิเมชั่น!
• ต้องการมีส่วนร่วม? พิจารณาเป็นผู้อุปถัมภ์ การสนับสนุนของคุณช่วยรักษาและขยายโครงการ

Happy Pixelating!

- ใบอนุญาต

- LabRary ภาพถึงพิกเซล

ไลบรารี image-to-pixel (image-to-pixel.js) ที่ใช้ในโครงการนี้ได้รับอนุญาตภายใต้ใบอนุญาต MIT คุณสามารถค้นหาข้อความใบอนุญาตเต็มรูปแบบในไฟล์ LICENSE-library

แอปพลิเคชัน

แอปพลิเคชัน Image-to-Pixel นั้นได้รับอนุญาตภายใต้ Apache License 2.0 โปรดดูไฟล์ LICENSE-app สำหรับรายละเอียดเพิ่มเติม

หมายเหตุ: ในขณะที่ไลบรารี image-to-pixel.js สามารถใช้งานได้อย่างอิสระภายใต้ใบอนุญาต MIT รหัสแอปพลิเคชันจะถูกแจกจ่ายภายใต้ Apache License 2.0 ตรวจสอบให้แน่ใจว่าคุณตรวจสอบใบอนุญาตทั้งสองเพื่อทำความเข้าใจสิทธิ์และภาระผูกพันของคุณเมื่อใช้หรือแก้ไขโครงการนี้

---