Open chenshenhai opened 5 years ago
最近两月在学习canvas时候,发现很多有意思的技术能力,特别是在图像处理这一领域。让我想起大学课堂教学的《数字图像处理》(冈萨雷斯 版本)。但是很遗憾的是,大学上完课应付考试后全部还给老师了,毕业后一直做WEB相关开发,再也没怎么去接触图像处理这一领域技术。
canvas
利用每天下班回家后的零星时间,用TypeScript基于canvas的能力,写了一个H5图像处理小工具,勉强算是低配版的“美图秀秀”。这个图像处理的小工具我命名为 Pictool。
TypeScript
Pictool
具体源码地址
https://github.com/chenshenhai/pictool
具体文档地址
https://chenshenhai.github.io/pictool-doc/
在线例子 https://chenshenhai.github.io/pictool/example/index.html
<script src="https://unpkg.com/pictool/dist/index.min.js"></script>
(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);
快速安装
npm i --save pictool
快速使用
import 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的使用效果
HTML页面上
CDN
Pictool 图像处理小工具目前支持了常用的图像处理能力,分别都可以独立抽出使用。
Brightness(Lightness)
Hue
Saturation
Alpha
Invert
Grayscale
Sobel
Sepia
Posterize
Gamma
可以通过图像处理的基础能力,组合成滤镜效果。 例如 Sobel边缘计算 + 反色 组合就可以产生 素描画 的效果
Sobel边缘计算
反色
素描画
var 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
ImageData
base64
在写了这个 Pictool 图像处理小工具后,顺便把所有的功能点的使用方式都整理成文档,方便使用时候查阅。
这次开发这个小工具,其实也是为了深入熟悉 TypeScript 在项目开发使用,主要有一下感想的总结。
strict: true
eslint
webpack
rollup
经过两个月的开发 Pictool 的沉淀,后续已经开始整理下一本关于canvas和图像处理的学习笔记。目前已经沉淀了部分笔记,后续会持续整理更新上去,同时也会在公众号分享其中比较有意思的技术能力。
图像处理
watch
大海码
DeepSeaCode
前言
最近两月在学习
canvas
时候,发现很多有意思的技术能力,特别是在图像处理这一领域。让我想起大学课堂教学的《数字图像处理》(冈萨雷斯 版本)。但是很遗憾的是,大学上完课应付考试后全部还给老师了,毕业后一直做WEB相关开发,再也没怎么去接触图像处理这一领域技术。利用每天下班回家后的零星时间,用
TypeScript
基于canvas
的能力,写了一个H5图像处理小工具,勉强算是低配版的“美图秀秀”。这个图像处理的小工具我命名为Pictool
。具体源码地址
https://github.com/chenshenhai/pictool
具体文档地址
https://chenshenhai.github.io/pictool-doc/
在线例子 https://chenshenhai.github.io/pictool/example/index.html
CDN 快速使用
具体动态效果
NPM使用
快速安装
快速使用
把编译后的代码放在
HTML页面上
,就可以实现上述CDN
的使用效果Pictool 功能
Pictool
图像处理小工具目前支持了常用的图像处理能力,分别都可以独立抽出使用。图像处理能力
Brightness(Lightness)
亮度Hue
色相Saturation
饱和度Alpha
透明度Invert
反色Grayscale
灰度Sobel
Sobel边缘计算Sepia
褐色化(怀旧)Posterize
色阶Gamma
伽马处理图像滤镜效果
可以通过图像处理的基础能力,组合成滤镜效果。 例如
Sobel边缘计算
+反色
组合就可以产生素描画
的效果浏览器能力
URL
转图片HTMLImage
URL
转图片ImageData
ImageData
转图片base64
Pictool 文档
在写了这个
Pictool
图像处理小工具后,顺便把所有的功能点的使用方式都整理成文档,方便使用时候查阅。https://chenshenhai.github.io/pictool-doc/
TypeScript 使用感想
这次开发这个小工具,其实也是为了深入熟悉
TypeScript
在项目开发使用,主要有一下感想的总结。TypeScript
,建议使用时候,开启strict: true
最严格模式。eslint
的TypeScript
最严格校验和修复webpack
和rollup
两种编译体系下建议都尝试一遍。后记
经过两个月的开发
Pictool
的沉淀,后续已经开始整理下一本关于canvas
和图像处理
的学习笔记。目前已经沉淀了部分笔记,后续会持续整理更新上去,同时也会在公众号分享其中比较有意思的技术能力。watch
本项目 或者 关注我公众号大海码
DeepSeaCode