Pictool.UI

Usage

  • param imgData {ImageData}
const pictoolUI = new Pictool.UI(imgData);
pictoolUI.show();

Pictool.UI CDN Usage

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    
    <style>
      .btn { margin: 100px auto; height: 60px; width: 200px; background: #cccccc;}
    </style>
    <script src="https://unpkg.com/pictool/dist/index.js"></script>
  </head>
  <body>

   <button id="J_Btn" class="btn">open Pictool.UI</button>
  </body>
  <script>
  (async function(Pictool) {
    const util = Pictool.browser.util;
    const PictoolUI = Pictool.UI;
    const imgData = await util.getImageDataBySrc('./assets/image/test.jpg');
    if (imgData instanceof Error) {
      console.log(imgData);
      return;
    }

    const pictoolUI = new PictoolUI(imgData);
    pictoolUI.show();

    document.querySelector('#J_Btn').addEventListener('click', function() {
      pictoolUI.show();
    });
  
  })(window.Pictool);
  </script>
</html>

example-ui

UI.show

const pictoolUI = new Pictool.UI(imgData);
pictoolUI.show();

UI.hide

const pictoolUI = new Pictool.UI(imgData);
pictoolUI.hide();