Pixel 수를 통한 해상도 조절

모든 캔버스는 2개의 크기를 지닌다. (== drawingbuffer 의 크기)

1. 캔버스 안에 얼마나 많은 픽셀이 존재하는지
2. 캔버스 디스플레이(화면에 표시)되는 크기 ← css가 결정

- 즉, PPI가 높을수록 더 세밀한 화면 표현이 가능해지고 고화질의 이미지 구현 가능

 

    

   

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

사진 출처 - [픽셀(pixel), 해상도(Resolution)]https://treasure01.tistory.com/34

    

 // 내부 픽셀 해상도는 100px X 100px 

canvas.width = 100;

canvas.height = 100;



// 위 캔버스로 저장한 이미지 스타일 사이즈 변경 시 

// 스타일 사이즈가 220px X 20px 로 변경되어도 100px X 100px 의 픽셀 해상도 유지

<Image

  src={src}

  alt={mediator?.name}

  width="220"

  height="20"

/>

 

canvas(넓이X높이) 이미지 해상도 차이 

기존 (픽셀 수 적음, 해상도 낮음)변경 후 (픽셀 수 많음, 해상도 높음)

(넓이 250px X 높이 20px) font 12px	(넓이 700px X 높이 60px) font 40px

 

Client Image 태그 속성들을 통한 품질, 크기 조절

object-fit: "contain"

The default image fit behavior will stretch the image to fit the container. You may prefer to set object-fit: "contain" for an image which is letterboxed to fit the container and preserve aspect ratio.

• 위 속성을 통해서 container 영역에 맞게 이미지 크기가 잘 맞춰짐

quality

The quality of the optimized image, an integer between 1 and 100, where 100 is the best quality and therefore largest file size. Defaults to 75.

• 위 속성을 통해서 이미지 품질을 높일 수 있음

 

 

const fontSize = 50;
const fontColor = '#555';
const canvasWidth = 800; //기존에 220이었음.
const canvasHeight = 70;
const textX = 0;
const textY = 35;


const createFontImage= (fontFile) => {
    const canvas = createCanvas(canvasWidth, canvasHeight);
    const context = canvas.getContext('2d');

    const family = fontFile.split('.')[0];
    context.font = `${fontSize}px "${family}"`;
    context.fillStyle = fontColor;
    context.textBaseline = 'middle';
    context.fillText(family, textX, textY);
    const buffer = canvas.toBuffer('image/png');
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

	// do something with buffer
};