Image to Pixel

؟ صورة إلى بيكسل

محرر بديهي لتحويل الصور إلى فن البكسل ، وتطبيق تأثيرات المخلل ، وإدارة لوحات مخصصة!
متاح كطبق تفاعلي وواجهة برمجة تطبيقات JavaScript .

جربه على الهواء مباشرة هنا : محرر صورة إلى بكسل

؟ هل تبحث عن المحرر القديم؟ يمكنك العثور عليه هنا.

؟ تم بناء هذا المشروع بالكامل في محرر الكود المستند إلى متصفح AIJS. ؟

---

ميزات التطبيق

الإصدار 2.0
يقدم V2 السرعة المحسنة والميزات الجديدة والواجهة المكررة:

• ⚡ مُحسّن للغاية : النتائج الفورية لمعظم الصور ، حتى بأحجام أكبر.
• تبديل التلقائي التلقائي : انظر التغييرات مباشرة وأنت تعديل الإعدادات.
• خيارات التغلب : اختر بين Floyd-Steinberg ، 2x2 Bayer ، 4x4 Bayer ، Ordered ، Clustered 4x4 و atkinson ، وضبط قوة المخلل في الوقت الفعلي.
• ؟ دعم اللوحة : استخدم الألواح الافتراضية من Lospec أو استيراد المخصصات عبر واجهة برمجة تطبيقات Lospec باستخدام لوحة لوحة (على سبيل المثال ، rgbg-36 من لوحة Lospec).
• ؟ إدارة المخصصات المخصصة : قم بإنشاء لوحات مخصصة أو حفظها إلى ذاكرة التخزين المؤقت المحلية أو تنزيلها وتحميلها بتنسيق JSON.
• ؟ التحكم في الدقة : قم بتنزيل صورتك المصنوعة من البكسل بدقة صورة الإدخال أو فن البيكسل الفعلي.
• ؟ حجم الصورة المكتشفة تلقائيًا : قم بتعيين عرض البكسل بسهولة لمطابقة حجم الصورة الأصلي (رائع لأدوات Spriteshes).

---

باستخدام API

يمكنك استخدام مكتبة image-to-pixel في مشاريعك الخاصة. تمرير صورة وخيارات إلى وظيفة pixelate ، واحصل على صورة جميلة بشكل جميل في المقابل.
ملاحظة : لا يزال واجهة برمجة التطبيقات عملًا مستمرًا ؛ الوثائق الرسمية قيد التطوير.

مثال الاستخدام

أضف المكتبة إلى مشروعك:

استخدام عبر 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 هنا.

---

يمكنك أيضًا إعداده مع P5/Q5 من خلال p5.prototype.registerMethod .

جرب عرضًا تجريبيًا باستخدام واجهة برمجة تطبيقات Image-to-Pixel مع 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 ) ;
} ) ; 

❤ الدعم

إذا كنت ترغب في دعم المشروع ، ففكر في مشاركة إبداعاتك باستخدام المحرر ووضع علامة على TwitterTezumies. ملاحظاتك والفن المشترك موضع تقدير كبير!

• لمزيد من الخير للفنون ، تحقق من تطبيق Dither Dragon كامل الميزة ، مما يوفر المزيد من الخيارات بما في ذلك دعم الرسوم المتحركة!
• تريد المساهمة؟ النظر في أن تصبح راعيا. يساعد دعمك في الحفاظ على المشروع وتوسيعه.

بكسل سعيد!

؟ رخصة

؟ صورة إلى بيكسل لابراري

مكتبة صورة إلى بيكسل (صورة إلى بيكسل. js) المستخدمة في هذا المشروع مرخصة بموجب ترخيص معهد ماساتشوستس للتكنولوجيا. يمكنك العثور على نص الترخيص الكامل في ملف LICENSE-library .

طلب

يتم ترخيص تطبيق صورة إلى بيكسل نفسه بموجب ترخيص Apache 2.0. يرجى الرجوع إلى ملف LICENSE-app لمزيد من التفاصيل.

ملاحظة: بينما تتوفر مكتبة Image-to-Pixel.js بحرية بموجب ترخيص معهد ماساتشوستس للتكنولوجيا ، يتم توزيع رمز التطبيق ضمن ترخيص Apache 2.0. تأكد من مراجعة كل من التراخيص لفهم حقوقك والتزاماتك عند استخدام هذا المشروع أو تعديله.

---