Skip to content
A front-end image processing gadget
TypeScript HTML JavaScript CSS
Branch: master
Clone or download
Latest commit 75b0caa Jul 28, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist feat: update ui style Jul 28, 2019
example docs: update readme Jul 28, 2019
script feat: update example Jul 28, 2019
src feat: update ui style Jul 28, 2019
test feat: add process.gamma Jul 28, 2019
.eslintignore feat: refactor worker Jun 28, 2019
.eslintrc.js feat: update eslint Jul 1, 2019
.gitignore feat: update .gitignore Jul 1, 2019
.travis.yml feat: add ci config file Jul 9, 2019
LICENSE Initial commit Jun 18, 2019
README.md docs: update readme Jul 28, 2019
package.json version 0.4.0 Jul 28, 2019
tsconfig.json refactor: update digit.effect usage Jul 22, 2019

README.md

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

You can’t perform that action at this time.