index.html 2.42 KB
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>TUI Example</title>
  <link type="text/css" href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css" rel="stylesheet" />
  <link type="text/css" href="./tui-image-editor.css" rel="stylesheet" />
  <style>
    @import url(http://fonts.googleapis.com/css?family=Noto+Sans);

    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>
</head>

<body>
  <div id="tui-image-editor-container"></div>
  <script type="text/javascript"
    src="https://api-storage.cloud.toast.com/v1/AUTH_e18353c4ea5746c097143946d0644e61/toast-ui-cdn/tui-image-editor/v3.11.0/example/fabric-v4.2.0.js"></script>
  <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
  <script type="text/javascript" src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js"></script>
  <script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
  <script type="text/javascript" src="./tui-image-editor.js"></script>
  <script type="text/javascript" src="./black-theme.js"></script>
  <script type="text/javascript" src="../../dist/gif-generator.js"></script>
  <script>
    // Image editor
    var imageEditor = new tui.ImageEditor("#tui-image-editor-container", {
      includeUI: {
        loadImage: {
          path: "./sampleImage2.png",
          name: "SampleImage",
        },
        theme: blackTheme, // or whiteTheme
        initMenu: "filter",
        menuBarPosition: "bottom",
      },
      cssMaxWidth: 700,
      cssMaxHeight: 500,
      usageStatistics: false,
    });
    window.onresize = function () {
      imageEditor.ui.resizeEditor();
    };

    let gifGenerator;
    setTimeout(function () {
      gifGenerator = new GifGenerator(imageEditor._graphics.getCanvas());
      gifGenerator.on("progress", (p) => console.log(p));
    }, 1000);
    function render() {
      gifGenerator.make().then(
        (blob) => {
          window.open(window.URL.createObjectURL(blob));
        },
        (error) => {
          alert(error);
        }
      );
    }
  </script>
  <button style="
        position: absolute;
        top: 70px;
        right: 70px;
        border: 1px solid #fff;
        background: rgba(0, 0, 0, 0);
        color: #fff;
        padding: 10px 20px;
      " onClick="render();">
    GIF 생성
  </button>
</body>

</html>