하고 싶은 일

만들어 보았다 (데모)

포인트

Canvas로 그리기

그리기만 하면 vue와 친화성이 높은 SVG 쪽이 개인적으로는 취급하기 쉽다고 생각합니다. 다만 이번에는 드로잉 이미지를 Base64 형식으로 복사 또는 다운로드하고 싶다는 조건이 있어, 그것도 포함해 고려하면 SVG보다 Canvas 쪽이 실장 공수가 낮다고 판단했습니다.

canvas이면 아래와 같이 단 한 줄의 코드로 canvas 객체에서 base64 형식의 이미지를 얻을 수 있습니다.

canvas.toDataURL("image/png");
// canvas: 次のような感じで取得できるcanvasオブジェクト
// const canvas = document.getElementById("canvas");

SVG에서도 Headless Chrome을 이용한 다음과 같은 node module로 변환은 가능합니다만, canvas에 비해 이용 라이브러리의 규모는 커져 버립니다.

htps //w w. 음 pmjs. 코 m / Pac 카게 / 곤ゔ rt-svg-pg

텍스트 그리기 범위의 좌표 지정

풍선(특정 범위)내에 텍스트를 렌더링 하기 위해서, 그 범위를 정의해 둘 필요가 있습니다.

이번에는 다음과 같이 구현했습니다.

좌상을 원점으로 하고, 범위의 좌상, 우하의 좌표를 원점으로부터의 비율(소수)로 정의하고 있습니다.

textareaRate: { // 画像中のテキスト表示エリアの左上・右下座標(左上基準)
  start: {
    x: 0.26,
    y: 0.1
  },
  end: {
    x: 0.72,
    y: 0.34
  }
}

텍스트 그리기에서 기준점의 위치

canvas에 텍스트를 입력하는 경우, 그 지정 좌표에 대한 묘화 위치에 약간 버릇이 있습니다.

아래의 이미지를 알기 쉽지만, 기본 설정이라면 지정 좌표가 문자의 왼쪽 하단에 위치하도록 그려집니다.

h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 11120392 / 안 d로이 d

이번에는 풍선 범위의 상하 좌우 중심에 텍스트를 그리고 싶기 때문에, 지정 좌표가 텍스트의 중심에 위치하도록(듯이) 해 줄 필요가 있습니다. canvas의 context 설정 항목 중에는 지정 좌표에 대한 텍스트 위치의 옵션이 준비되어 있으므로, 이것들을 이하와 같이 지정합니다.

// get context
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

// set align center(horizontal/vertical)
context.textAlign = "center";
context.textBaseline = "middle";

개선점

자동 글꼴 크기 조정

예를 들어 API와 같은 서비스를 가정하여 완전한 자동 생성을 실현하기 위해 풍선 범위에서 텍스트가 튀어 나오지 않도록 그리는 양에 맞게 글꼴 크기를 조정

참고문헌

• HTML5.kr Canvas 참조