CodeHub MCPcopy Index your code

hub / github.com/chenshenhai/pictool

github.com/chenshenhai/pictool @0.4.0

Chat with this repo

repository ↗ · DeepWiki ↗ · release 0.4.0 ↗ · + Follow

270 symbols 510 edges 73 files 0 documented · 0%

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

Pictool

A front-end image processing gadget

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="https://github.com/chenshenhai/pictool/raw/0.4.0/${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>



      <img src="https://github.com/chenshenhai/pictool/raw/0.4.0/image/test.jpg" />







      <img />



    <script src="https://github.com/chenshenhai/pictool/raw/0.4.0/index.js"></script>
  </body>
</html>

Browser Result

001

Features

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

Documentation

中文文档
English Documents //TODO

Example

Please use the latest version of Chrome Browser

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

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

Testing

npm run test

License

Extension points exported contracts — how you extend this code

NavBtn (Interface)

(no doc) [1 implementers]

src/ui/module/panel/index.ts

SketchOptions (Interface)

src/core/sketch/index.ts

CompressImageOpts (Interface)

src/util/compress.ts

PictoolOptsUIConfig (Interface)

src/ui/index.ts

SketchSchema (Interface)

src/core/sketch/index.ts

SandboxOpts (Interface)

src/util/sanbox.ts

PictoolUIOpts (Interface)

src/ui/index.ts

LayerDrawAction (Interface)

src/core/layer/index.ts

Core symbols most depended-on inside this repo

src/core/digit/digit-image-data.ts

src/core/digit/digit-image-data.ts

src/core/digit/digit-image-data.ts

src/core/digit/digit-image-data.ts

src/core/digit/effect/index.ts

src/core/digit/effect/index.ts

src/core/digit/process/sobel.ts

src/core/digit/effect/index.ts

Shape

Method 97

Function 83

Interface 52

Class 36

Enum 2

Languages

TypeScript100%

Modules by API surface

src/ui/component/progress/index.ts16 symbols

src/core/digit/filter/index.ts15 symbols

src/core/sketch/index.ts14 symbols

src/util/istype.ts13 symbols

src/ui/module/dashboard/index.ts12 symbols

src/ui/module/panel/index.ts11 symbols

src/core/layer/index.ts11 symbols

src/core/digit/digit-image-data.ts11 symbols

src/ui/index.ts9 symbols

src/core/digit/transform/rgb2hsl.ts9 symbols

src/util/sanbox.ts8 symbols

src/ui/module/sketch/index.ts8 symbols

For agents

$ claude mcp add pictool \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact