Image to Pixel

? 이미지 대 픽셀

이미지를 픽셀 아트로 변환하고 디더링 효과를 적용하며 사용자 정의 팔레트 관리를위한 직관적 인 편집기!
대화식 응용 프로그램 과 JavaScript API 로 제공됩니다.

여기에서 라이브 : Image-to-Pixel 편집기

? 오래된 편집자를 찾고 계십니까? 여기에서 찾을 수 있습니다.

? 이 프로젝트는 전적으로 AIJS 브라우저 기반 코드 편집기로 구축되었습니다. ?

---

응용 프로그램 기능

버전 2.0
V2는 향상된 속도, 새로운 기능 및 정제 된 인터페이스를 소개합니다.

• ⚡ 최적화 된 최적화 : 대부분의 이미지에 대한 즉각적인 결과, 심지어 더 큰 크기.
• Auto-Refresh Toggle : 설정을 조정하면 라이브 변경 사항을 참조하십시오.
• 디더링 옵션 : Floyd-Steinberg , 2x2 Bayer , 4x4 Bayer , Ordered , Clustered 4x4 및 atkinson 클러스터링하고 실시간으로 디더링 강도를 조정하십시오.
• ? 팔레트 지원 : LOSPEC의 기본 팔레트를 사용하거나 팔레트 슬러그 (예 : LOSPEC 팔레트의 rgbg-36 )를 사용하여 LOSPEC의 API를 통해 사용자 정의 팔레트를 가져옵니다.
• ? 사용자 정의 팔레트 관리 : 사용자 정의 팔레트를 만들거나 로컬 캐시에 저장하거나 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
} ) ;

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 Art Goodness를 보려면 완전한 기능을 갖춘 앱 Dither Dragon 을 확인하십시오. 애니메이션 지원을 포함한 더 많은 옵션을 제공하십시오!
• 기여하고 싶습니까? 후원자가되는 것을 고려하십시오. 귀하의 지원은 프로젝트를 유지하고 확장하는 데 도움이됩니다.

행복한 픽셀팅!

? 특허

? 이미지 대 픽셀 래브리

이 프로젝트에 사용 된 이미지 투 픽셀 라이브러리 (image-to-pixel.js)는 MIT 라이센스에 따라 라이센스가 부여됩니다. LICENSE-library 파일에서 전체 라이센스 텍스트를 찾을 수 있습니다.

애플리케이션

이미지 간 픽셀 응용 프로그램 자체는 Apache 라이센스 2.0에 따라 라이센스가 부여됩니다. 자세한 내용은 LICENSE-app 파일을 참조하십시오.

참고 : MIT 라이센스에 따라 Image-to-pixel.js 라이브러리를 자유롭게 사용할 수 있지만 응용 프로그램 코드는 Apache 라이센스 2.0에 따라 배포됩니다. 이 프로젝트를 사용하거나 수정할 때 귀하의 권리와 의무를 이해하기 위해 두 라이센스를 모두 검토해야합니다.

---