Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/chenshenhai/pictool

A front-end image processing gadget
https://github.com/chenshenhai/pictool

canvas hsl image-process rgb

Last synced: 3 days ago
JSON representation

A front-end image processing gadget

Host: GitHub
URL: https://github.com/chenshenhai/pictool
Owner: chenshenhai
License: mit
Created: 2019-06-18T15:54:02.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2021-02-21T15:06:00.000Z (over 3 years ago)
Last Synced: 2024-10-26T20:39:17.752Z (17 days ago)
Topics: canvas, hsl, image-process, rgb
Language: TypeScript
Homepage: https://chenshenhai.github.io/pictool-doc/
Size: 9.28 MB
Stars: 179
Watchers: 4
Forks: 11
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # Pictool

## A front-end image processing gadget

[![Node.js CI](https://github.com/chenshenhai/pictool/actions/workflows/node.js.yml/badge.svg?branch=master)](https://github.com/chenshenhai/pictool/actions/workflows/node.js.yml)

[![Build Status](https://travis-ci.com/chenshenhai/pictool.svg?branch=master)](https://travis-ci.com/chenshenhai/pictool)

[![npm-version](https://img.shields.io/npm/l/pictool.svg)](./LICENSE)

[![](https://img.shields.io/npm/v/pictool.svg)](https://www.npmjs.com/package/pictool)

![pictool-logo](https://user-images.githubusercontent.com/8216630/61581603-28ffd180-ab53-11e9-9461-a24d31643ec7.png)

> Examples of online use

[https://chenshenhai.github.io/pictool/example/module/pictool-ui.html](https://chenshenhai.github.io/pictool/example/module/pictool-ui.html)

## Installation

### Prerequisites

- Operating System: Windows，macOS，Linux

- Node.js Runtime: `12.3+`

### NPM Usage

```sh

npm i --save pictool

```

```js

import Pictool from 'pictool';

```

or

```js

import PictoolBrowser from 'pictool/dist/browser';

import PictoolUI from 'pictool/dist/ui';

import PictoolDigit from 'pictool/dist/digit';

```

### CDN Usage

```html

```

or

```html

```

## Getting started

### JavaScript Code

```js

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 = ``;

}).catch(function(err) {

  console.log(err);

});

```

### HTML Code

```html

  

    

    

      .box {float: left; margin-right: 10px;}

      img { max-height: 200px; min-width: 100px;}

    

  

  

    


      

    


    


      

    

    

  

```

### Browser Result

![001](https://user-images.githubusercontent.com/8216630/61582779-bb0ed680-ab61-11e9-8830-01fbf59edb94.jpg)

## Features

- ✔︎ Brightness

- ✔︎ Hue

- ✔︎ Saturation

- ✔︎ Alpha

- ✔︎ Invert

- ✔︎ Grayscale

- ✔︎ Sobel

- ✔︎ Sepia

- ✔︎ Posterize

- ✔︎ Gamma

## Documentation

- [中文文档](https://chenshenhai.github.io/pictool-doc/)

- [English Documents](https://chenshenhai.github.io/pictool-doc/page/en-US/) //TODO

## Example 

> Please use the latest version of Chrome Browser

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

[https://chenshenhai.github.io/pictool/example/index.html](https://chenshenhai.github.io/pictool/example/index.html)

## Testing

```sh

npm run test

```

## License

[MIT](./LICENSE)