canvas로 이미지 편집하기

브라우저에서 업로드한 이미지를 편집할 수 있는 기능이 있다.

 

canvas는 html5 이상에서 사용할 수 있는 라이브러리로, 2D, 3D(특정 버전의 브라우저만 지원) 형식으로 파일을 편집할 수 있고 편집한 파일을 출력할 수 있다

 

input에 파일 형태로 업로드한 이미지를 canvas에서 각 모서리를 둥글게 깍아서 저장해보자

 

<canvas id="myCanvas" display="none"></canvas>

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const blobImages = [];

function drawRoundedImage(img) {
            const borderRadius = 30; // 둥글게 만들고자 하는 모서리 반경
            ctx.save();
            ctx.beginPath();

            // 상단 모서리를 curve로 그립니다.
            ctx.moveTo(borderRadius, 0);
            ctx.lineTo(img.width - borderRadius, 0);
            ctx.quadraticCurveTo(img.width, 0, img.width, borderRadius);

            // 오른쪽 모서리를 curve로 그립니다.
            ctx.lineTo(img.width, img.height - borderRadius);
            ctx.quadraticCurveTo(img.width, img.height, img.width - borderRadius, img.height);

            // 하단 모서리를 curve로 그립니다.
            ctx.lineTo(borderRadius, img.height);
            ctx.quadraticCurveTo(0, img.height, 0, img.height - borderRadius);

            // 왼쪽 모서리를 curve로 그립니다.
            ctx.lineTo(0, borderRadius);
            ctx.quadraticCurveTo(0, 0, borderRadius, 0);

            ctx.closePath();
            ctx.clip();
            ctx.drawImage(img, 0, 0);
            ctx.restore();
        }

const img = new Image();
img.onload = function() {
    // Canvas 크기를 이미지 크기와 동일하게 설정합니다.
    canvas.width = img.width;
    canvas.height = img.height;

    // 양쪽 상단의 모서리를 둥글게 만드는 함수를 호출하여 그립니다.
    drawRoundedImage(img);

    canvas.toBlob(function(blob) {
    blobImages.push(blob);
    });
 };

1. canvas의 기능을 활용하고 싶다면, canvas 태그를 활용해야한다.

html의 canvas 태그를 선언하고 이를 js에서 가져와서 사용하자.

ctx 는 canvas에서 편집하기위한 가상의 좌표같은 느낌이다. ctx에서 편집하고자하는 경로를 설정하고 .clip() 과 .drawImage()를 실행하면 편집 과정과 편집된 요소를 저장하고 canvas에 <img> 태그로 나타낸다

.restore() 함수는 ctx에 저장되었던 결과를 초기화한다.

 

2. 편집한 이미지를 blob 파일로 추출하기

편집한 이미지 파일로 만들고 싶다면, canvas.toblob 기능을 활용하면 된다.

현재 canvas에 나타나고있는 이미지를 blob 형태로 만들어서 전송할 수 있게 되고, png / jpeg / icon 등의 확장자로 지정할 수 있는데, default는 png이다.

* 이미지에 공백을 가지게 하고 싶다면 png로 확장자를 선언하는 것이 좋다 (jpeg는 압축 파일이기 때문에 공백 기능을 지원하지 않는다)