chenshenhai / Pictool
Licence: mit
A front-end image processing gadget
Stars: ✭ 168
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Pictool
Color Studio
It is too hard to build coherent and accessible themes with the right colors. This should help.
Stars: ✭ 289 (+72.02%)
Mutual labels: rgb, hsl
colorsys.rs
Lib for modifying colors and converting to other spaces
Stars: ✭ 28 (-83.33%)
Mutual labels: hsl, rgb
Sorted Colors
A tool to sort the named CSS colors in a way that it shows related colors together
Stars: ✭ 167 (-0.6%)
Mutual labels: rgb, hsl
Colorhighlight
🎨 Lightweight Color Highlight colorizer for Sublime Text
Stars: ✭ 76 (-54.76%)
Mutual labels: rgb, hsl
Gradstop
JavaScript micro library to generate gradient color stops 🏳️🌈
Stars: ✭ 144 (-14.29%)
Mutual labels: rgb, hsl
color
Standard representation of colors, encouraging sharing between packages.
Stars: ✭ 23 (-86.31%)
Mutual labels: hsl, rgb
pigment
A powerful library that provides color-conversions, palette/scheme generation, color manipulation and many more features intended to provide a great UX.
Stars: ✭ 23 (-86.31%)
Mutual labels: hsl, rgb
color
A library of well-tested helper methods for working with colors.
Stars: ✭ 13 (-92.26%)
Mutual labels: hsl, rgb
React Color Extractor
A React component which extracts colors from an image
Stars: ✭ 314 (+86.9%)
Mutual labels: rgb, hsl
ColorTranslator
A JavaScript library, written in TypeScript, to convert among different color models
Stars: ✭ 34 (-79.76%)
Mutual labels: hsl, rgb
Hsluv Dart
Dart port of HSLuv, a human-friendly alternative to HSL based on human experiments.
Stars: ✭ 49 (-70.83%)
Mutual labels: rgb, hsl
Mpcolortools
A collection of tools for handling colors on iOS SDK
Stars: ✭ 128 (-23.81%)
Mutual labels: rgb, hsl
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';
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
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].