Pictool

Pictool是一个用TypeScript编写的低配版H5美图工具,支持亮度、色相、饱和度等图像处理功能,以及多种滤镜效果,可通过CDN或NPM快速集成使用。

Check out Pictool on CurateClick

• Copy the embed code to showcase this product on your website

• Share on X to spread the word about this amazing tool

自荐项目: 用TypeScript写了个低配版H5美图工具Pictoolpictool-ui-adjust项目地址 https://github.com/chenshenhai/pictool文档地址https://chenshenhai.github.io/pictool-doc/在线例子https://chenshenhai.github.io/pictool/example/index.htmlpictool-logo## CDN 快速使用html<script src="https://unpkg.com/pictool/dist/index.min.js"></script>``````js(function(Pictool) { const util = Pictool.browser.util; const PictoolUI = Pictool.UI; // 获取测试图片,实际使用请输入实际的图片URL // 注意如果图片是跨域的,请保证图片源站允许跨域 util.getImageDataBySrc('./xxx.jpg').then(function(imgData) { const pictoolUI = new PictoolUI(imgData, { uiConfig: { language: 'zh-cn', }, }); pictoolUI.show(); }).catch(function(err) { alert(JSON.stringify(err)); });})(window.Pictool);example-ui### 具体动态效果简单处理pictool-ui-process图像调节pictool-ui-adjust图像滤镜效果pictool-ui-effect## NPM使用快速安装shnpm i --save pictool快速使用jsimport Pictool from 'pictool';(async function() { const imgData = await Pictool.browser.util.getImageDataBySrc('./xxx.jpg'); const tool = new Pictool.UI(imgData, { uiConfig: { language: 'zh-cn', }, }); tool.show();})()把编译后的代码放在HTML页面上,就可以实现上述CDN的使用效果## Pictool 功能Pictool 图像处理小工具目前支持了常用的图像处理能力,分别都可以独立抽出使用。### 目前支持的图像处理能力 - Brightness(Lightness) 亮度 - Hue 色相 - Saturation 饱和度 - Alpha 透明度 - Invert 反色 - Grayscale 灰度 - Sobel Sobel边缘计算 - Sepia 褐色化(怀旧) - Posterize 色阶 - Gamma 伽马处理### 图像滤镜效果可以通过图像处理的基础能力,组合成滤镜效果。例如 Sobel边缘计算 + 反色 组合就可以产生 素描画 的效果example-digit-browser-sanboxjsvar sandbox = new Pictool.browser.Sandbox('./xxx.jpg');sandbox.queueProcess([ { process: 'sobel', options: {}, }, { process: 'invert', options: {}, }]).then(function(base64) { document.querySelector('body').innerHTML = `<img src="${base64}" />`;}).catch(function(err) { console.log(err);});### 浏览器能力- 图片数据转换 - 图片 URL转图片HTMLImage - 图片 URL转图片ImageData - 图片 ImageData转图片base64- 图片压缩: 将图片压缩在 400百万像素内- 其他能力,详见文档 - https://chenshenhai.github.io/pictool-doc/## Pictool 文档https://chenshenhai.github.io/pictool-doc/pictool-docpictool-doc-quick

Latest Weekly Picks

make.ink favicon
Weekly Pick

Your AI tattoo generator for pro-grade concepts

Leo Wade
sellfy.com favicon
Weekly Pick

A code-free online store builder to turn views into revenue. Sell digital products, subscriptions, and merch, without fees or hassle.

Maris
www.videotoblog.ai favicon
Weekly Pick

Convert videos into awesome blog posts.

Video To Blog
www.sellerpic.ai favicon
Weekly Pick

SellerPic is the all-in-one AI design platform for e-commerce

SellerPic
fastimage.ai favicon
Weekly Pick

Fast Image AI instantly transforms your photos into stunning styles like Ghibli, Sketch, and Pixar. Effortlessly control image elements and create amazing effects with just one click.

Fast AI Team
linkedinpro.daisy.so favicon
Weekly Pick

AI-powered tool that transforms casual photos into professional LinkedIn headshots instantly. No photographer needed—just upload and download.

Gabriel
crevas.ai favicon
Weekly Pick

Crevas unifies Veo 3, Sora 2, Nano Banana and more into one intuitive canvas — so filmmakers can script, prompt, and generate cinematic stories without switching tools or losing consistency.

Spark Alpha
fotominiatur.com favicon
Weekly Pick

AI Foto Edit - Text to Image & Image Edit

foto miniatur