Fabric.js의 핸드폰 입력 기능으로 캠퍼스 낙서

삿포로 Advent Calendaar 2020 21일째 보도다.

개막사

God kveld. DE-TEU입니다.
이번에는 Fabric입니다.js 했어요.

성과물

갑작스럽지만 기본적으로 어느 학교에나 이런 창고가 있잖아요.
'선 그리기','흰 선 그리기'같은 거지.
나는 모든 사람들이 어렸을 때 이걸로 캠퍼스에 낙서를 할 것이라고 생각한다.
이번에 그 꿈을 이루는 웹 애플리케이션을 개발했다.
(스마트폰이든 컴퓨터든 모두 사용할 수 있다)
Ground The World

교정에 낙서를 하다

다 된 것 같아.

해설

다음은 설치된 해설 등.

Fabric.js 손으로 입력하기

Canvas를 이미지로 저장

Fabric.js 손으로 입력하기

Fabric.js는 HTML5의 canvas 요소 기능을 확장하는 프로그램 라이브러리입니다.
이번에는 그 중의 핸드폰 입력 기능을 사용할 것이다.
설치 방법(npm 사용 시)

npm install fabric

사용 시 먼저 HTML에 canvas 요소 추가

<canvas id="canvas"></canvas>

JavaScript Fabric을 사용합니다.js를 불러오고 canvas에 적용

import { fabric } from "fabric";

window.onload = () => {
  const canvas = new fabric.Canvas("canvas", {
    isDrawingMode: true // 手書き入力ON
  });
  
  setBrush(canvas);// ペンの色とか種類を指定(以下に解説)

  setBackgroundImage(canvas);// 背景画像を設定(以下に解説)
};

이렇게 하면 캔버스에 손으로 입력할 수 있다.
그런 다음 를 입력할 때 브러쉬의 색상과 종류를 지정합니다.

const setBrush = (canvas) => {
  canvas.freeDrawingBrush = new fabric['SprayBrush'](canvas); // スプレーブラシを指定
  if (canvas.freeDrawingBrush) {
    const brush = canvas.freeDrawingBrush;
    brush.color = 'white'; // ブラシの色指定(#FFFFFFやrgb(255,255,255)等の書き方でも可)
    if (brush.getPatternSrc) {
        brush.source = brush.getPatternSrc.call(brush);// 設定を反映
    }
    brush.width = 10;// 線の太さを指定
    brush.shadow = new fabric.Shadow({ // 線に影をつける
        blur: 3,
        offsetX: 0,
        offsetY: 0,
        affectStroke: true,
        color: 'white',
    });
  }
};

그리고 canvas에 배경을 설정합니다.
지정한 그림을 불러오고 canvas 크기에 따라 확대 (축소) 합니다.
(이번에는 그림의 종횡비를 유지하지 않았다)

const setBackgroundImage = (canvas) => {
    fabric.Image.fromURL('画像ファイルのパス', (img) => {
        img.set({
            opacity: 1,// 透明度
            scaleX: canvas.width / img.width,// X軸の拡大率
            scaleY: canvas.height / img.height,// Y軸の拡大率
        });
        canvas.setBackgroundImage(img, 
        　　canvas.requestRenderAll.bind(canvas) );// 画像を背景に設定
    });
};

Canvas를 이미지로 저장

캔버스에 그린 그림은 "어렵게 그림으로 저장하려고 했다"는 생각이 들 것 같다.
우선 HTML에 다음 요소를 추가합니다

<button id="btn-save">保存</button>
<a id="link-download" class="hidden" download="ground.png" target="_blank">hide</a>

link-download 스타일로 숨기기

.hidden {
  display:none;
}

JavaScript에서 저장 버튼을 누를 때의 이벤트 설정

document.getElementById("btn-save").addEventListener("click",()=>{
  const link = document.getElementById('link-download');
  const dataurl = canvas.toDataURL();// canvasのピクセルデータをDataURLに変換
  link.href = dataurl;// DataURLをダウンロードリンクに設定
  link.click();// ダウンロード実行
});

이렇게 하면 다운로드할 수 있습니다.
※ iOS의 사파리에서 수행할 때 다운로드하지 않고 다른 창에 이미지를 표시하는 행위Chrome, Edge 및 Firefox에서 다운로드할 수 있습니다.주의하십시오.

총결산

Fabric은 웹에서 직접 입력하려는 조건이 있을 때 사용합니다.우리 js 채택이 어떤지 토론해 봅시다.
또한, Fabric.JS는 이번에 소개한 손글씨 입력 외에도 애니메이션 이미지, 필터 이미지, 드래그 앤 드롭 모바일, 줌 등 다양한 기능을 탑재하고 있어 관심 있는 사람이 조사할 수 있다.

참고 자료

Anglar와 Fabric.js로 그림을 그려요. - Qita.
Free drawing | Fabric.js Demos