canvas api 및 Konva JS 관련 질문 드립니다.

Question

기능 구현을 하다가 궁금증이 생겨 질문드립니다.먼저 제가 구현하려는 기능은 다음과 같습니다.아래 이미지는 유저로부터 이미지 input을 받은 다음에canvas의 lineTo와 stroke를 활용하여(brush & eraser tool) 빨갛게 제가 동그라미 친 부분처럼하얗게 칠하고, 지울 수 있는 기능을 표현해봤습니다.한번더 설명드리면,유저가 이미지를 업로드하면(input type &#61;file) 이를 canvas에 그리고,그 다음에 해당 canvas위에서 brush 툴을 쓸 수 있도록해서, 아래와 같이 하얗게 그리고 지울 수 있도록 합니다.그렇다 했을 때 이 이미지를 리사이즈 앤 센터 크롭을 할 수 있도록 하려고 합니다.예를 들어, 해당 이미지는 512 * 512 사이즈로 자동 리사이즈 및 center crop 된건데,유저가 작업을 하다가 select 태그를 통해 예를 들어576*1024로 바꾸면 그에 맞게이미지가 리사이즈 앤 센터 크롭되도록 합니다(원본의 비율이 깨지는 방식이 아닙니다).아래 이미지는 리사이즈 앤 센터 크롭이 어떤 식으로 되는건지 보여드리기 위해 가져와봤습니다.그리고 현재는 위에서 브러쉬로 작업한 흰색 부분이 위로 올라와있음을 볼 수 있습니다.이 때, 궁금한점은위의 그림처럼 canvas 자체를 리사이징 앤 크롭핑하되앞에서(512*512) 유저가 브러쉬로 작업한 부분도위의 이미지의 사이즈가 변한 것처럼(원본 비율이 깨지지 않으면서) 리사이징 앤 크롭핑을 할 수 있을까요?결론적으로위의 흰색 브러시 작업이 512*512 비율에서 했던 것처럼 자연스럽게 아래의 빨간 원에 가있도록 하는 것 입니다.KonvaJS를 사용하고 있는데, 만약 konvaJS로 불가능하다면 canvas api로 구현도 고려중인데,애초에 어떻게 접근할지를 모르겠습니다..참고로 이미지를 리사이즈 앤 센터 크롭하는 코드는 다음과 같습니다.export const resizeCenterCropImage &#61; (base64, width, height) &#61;> { return new Promise(async (resolve) &#61;> { const canvas &#61; document.createElement('canvas'); const context &#61; canvas.getContext('2d'); const image &#61; new Image(); canvas.width &#61; width; canvas.height &#61; height; image.onload &#61; () &#61;> { const { width: imageWidth, height: imageHeight } &#61; image; const inputRatio &#61; width / height; const imageRatio &#61; imageWidth / imageHeight; let w, h, x &#61; 0, y &#61; 0; if (imageRatio > inputRatio) { w &#61; (height * imageWidth) / imageHeight; h &#61; height; x &#61; (width - w) / 2; } else if (imageRatio < inputRatio) { w &#61; width; h &#61; (width * imageHeight) / imageWidth; y &#61; (height - h) / 2; } else { w &#61; width; h &#61; height; } context.drawImage(image, x, y, w, h); resolve(canvas.toDataURL('image/png')); };

canvas api 및 Konva JS 관련 질문 드립니다.

0개의 답변

#resize 목록