備忘録

備忘録

Fabric.jsを利用してWebサイトに画像編集機能を実装する方法

JavaScript

Ⅰ. はじめに

タイトルの通り「Fabric.jsを利用してWebサイトに画像編集機能を実装する方法」です

Ⅱ. サンプルプログラム

<html>
  <style>
    canvas {
      border: 1px black solid;
    }
  </style>

  <body>
    <canvas id="canvas001" width="300" height="300"></canvas>
    <button onclick="downloadImage()">Download</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js" referrerpolicy="no-referrer"></script>

    <script>
      const canvas = new fabric.Canvas('canvas001')

      // 100x100 の正方形を追加する
      const rect = new fabric.Rect({
        top: 100,
        left: 100,
        width: 100,
        height: 100,
        fill: '#20b2aa',
      })
      canvas.add(rect)

      // 画像を追加する
      fabric.Image.fromURL('https://files.catbox.moe/q5frwn.png', (img) => {
        img
        .set({ left: 50, top: 50})
        .scale(0.1)
        .set('flipY', true)
        canvas.add(img)
      }, {
        crossOrigin: "Anonymous" // "out.png" を保存する時にエラーが出るのを回避する
      })

      function downloadImage() {
        const aElement = document.createElement('a')
        aElement.download = 'out.png'
        aElement.href = canvas.toDataURL('image/png')
        aElement.click()
        aElement.remove()
      }
    </script>
  </body>
</html>

実行結果

参考

https://github.com/fabricjs/fabric.js