❤
npm
Sign UpSign In

pictool

0.4.0 • Public • Published

Pictool

A front-end image processing gadget

Build Status npm-version

pictool-logo

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';

or

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>

or

<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>

Browser Result

001

Features

  • ✔︎ Brightness
  • ✔︎ Hue
  • ✔︎ Saturation
  • ✔︎ Alpha
  • ✔︎ Invert
  • ✔︎ Grayscale
  • ✔︎ Sobel
  • ✔︎ Sepia
  • ✔︎ Posterize
  • ✔︎ Gamma

Documentation

Example

Please use the latest version of Chrome Browser

请在最新版本 chrome 浏览器下浏览

https://chenshenhai.github.io/pictool/example/index.html

Testing

npm run test

License

MIT

Readme

Keywords

none

Package Sidebar

Install

npm i pictool

Repository

github.com/chenshenhai/pictool

Homepage

github.com/chenshenhai/pictool#readme

Weekly Downloads

1

Version

0.4.0

License

MIT

Unpacked Size

1.03 MB

Total Files

18

Last publish

Collaborators

  • chenshenhai
Try on RunKit
Report malware