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