pictool's Introduction

Pictool

A front-end image processing gadget

Examples of online use

https://chenshenhai.github.io/pictool/example/module/pictool-ui.html

Installation

Prerequisites

Operating System: Windows，macOS，Linux
Node.js Runtime: 12.3+

NPM Usage

npm i --save pictool

import Pictool from 'pictool';

import PictoolBrowser from 'pictool/dist/browser';
import PictoolUI from 'pictool/dist/ui';
import PictoolDigit from 'pictool/dist/digit';

CDN Usage

<script src="https://unpkg.com/pictool/dist/index.js"></script>

<script src="https://unpkg.com/pictool/dist/browser.js"></script>
<script src="https://unpkg.com/pictool/dist/digit.js"></script>
<script src="https://unpkg.com/pictool/dist/ui.js"></script>

Getting started

JavaScript Code

import Pictool from 'pictool';

const src = './image/test.jpg';
const Sandbox = Pictool.browser.Sandbox;
const sandbox = new Sandbox(src);
const dom = document.querySelector('#J_Example_01');

sandbox.queueProcess([
  {
    process: 'sobel',
    options: {},
  },
  {
    process: 'invert',
    options: {},
  }
]).then(function(base64) {
  dom.innerHTML = `<img src="${base64}" />`;
}).catch(function(err) {
  console.log(err);
});

HTML Code

<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <style>
      .box {float: left; margin-right: 10px;}
      img { max-height: 200px; min-width: 100px;}
    </style>
  </head>
  <body>
    <div class="box">
      <img src="./image/test.jpg" />
    </div>

    <div class="box" id="J_Example_01">
      <img />
    </div>
    <script src="./index.js"></script>
  </body>
</html>