[momentum app] 그림 저장 버튼

지난번에 이어서 저장 버튼을 활성화시켜 보았다.

const saveBtn = document.getElementById("jsSave");

function handleCM(event) {
    event.preventDefault();
    /* 마우스 우클릭 방지 함수 */
}

function handleSaveClick() {
    const image = canvas.toDataURL();
    const link = document.createElement("a");
    link.href = image;
    link.download = "PaintJS[🎨]";
    link.click();
}

if(canvas) {
    canvas.addEventListener("mousemove", onMouseMove);
    canvas.addEventListener("mousedown", startPainting);
    canvas.addEventListener("mouseup", stopPainting);
    canvas.addEventListener("mouseleave", stopPainting);
    canvas.addEventListener("click", handleCanvasClick);
    canvas.addEventListener("contextmenu", handleCM);
}

if(saveBtn) {
    saveBtn.addEventListener("click", handleSaveClick);
}

먼저 우클릭 방지 함수를 생성한다. contextmenu, preventDefault 활용

save함수에는 toDataURL을 사용하는데,

toDataURL() 함수를는 캔버스에 그린 그림을 문자열 형태로 변환한다.

(괄호안을 공백으로 하면 PNG로 저장된다.)

그 다음 저장링크를 생성해주면 된다.

완료 화면

추가적으로 cusor pointer을 변경했으나 완벽하지 않은 상태.