typescript用什么软件写_用TypeScript写了个低配版H5美图工具

前言

最近两月在重新学canvas时候，发现很多有意思的技术能力，特别是在图像处理这一领域，让我想起大学课堂教学的《数字图像处理》(冈萨雷斯 版本)。

但很遗憾的是，大学上完课应付考试后全部还给老师，毕业后一直做WEB相关开发，再也没怎么去接触图像处理这一领域技术。书到用时方恨少，现在趁着还有精力就回炉重学图像处理。

利用每天下班回家后的零星业余时间，用TypeScript基于canvas的能力，写了一个H5图像处理小工具，勉强算是低配版的“美图秀秀”。这个图像处理的小工具命名为 Pictool，同时已经开源到 GitHub 和发布到 npm，欢迎使用和PR。

具体项目源码地址

https://github.com/chenshenhai/pictool

自设计的 Pictool LOGO

---

CDN 快速使用

CDN链接

<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使用

快速安装

npm i --save pictool

快速使用

import Pictool from 'pictool';(async function() {  const imgData = await Pictool.browser.util.getImageDataBySrc('./xxx.jpg');  const tool = new Pictool.UI(targetImgData, {    uiConfig: {      language: 'zh-cn',    },  });  tool.show();})()

把编译后的代码放在HTML页面上，就可以实现上述CDN使用时候的效果

---

Pictool 功能

Pictool 图像处理小工具只是用了短短两个月的业余时间开发，对于图像处理的能力还比较有限，目前支持了常用的图像处理能力，分别都可以独立使用。

注：完整使用说明可查看下文提供的文档连接

图像处理能力

• Brightness(Lightness) 亮度

• Hue 色相

• Saturation 饱和度

• Alpha 透明度

• Invert 反色

• Grayscale 灰度

• Sobel Sobel边缘计算

• Sepia 褐色化(怀旧)

• Posterize 色阶

• Gamma 伽马处理

---

图像滤镜效果

可以通过上述图像处理的基础能力，组合成滤镜效果。例如：

       Sobel边缘计算  +  反色  组合就可以产生  素描画  的效果

---

---

上述效果具体使用 Pictool 的代码如下

var sandbox = new Pictool.browser.Sandbox('./xxx.jpg');sandbox.queueProcess([  { process: 'sobel', options: {}, },  { process: 'invert', options: {}, }]).then(function(base64) {  document.querySelector('body').innerHTML = ``;}).catch(function(err) {  console.log(err);});

浏览器能力

• 图片数据转换

  • 图片 URL转图片HTMLImage

  • 图片 URL转图片ImageData

  • 图片 ImageData转图片base64

• 图片压缩: 将图片压缩在 400百万像素内

• 其他能力，详见文档

  • https://chenshenhai.github.io/pictool-doc/

Pictool 文档

在写了这个 Pictool 图像处理小工具后，顺便把所有的功能点的使用方式都整理成文档，方便使用时候查阅。

https://chenshenhai.github.io/pictool-doc/

Pictool 文档首页

---

Pictool 文档快速开始说明

---

TypeScript 使用感想

这次开发这个小工具，除了重学canvas的使用，同时也是为了深入熟悉 TypeScript 在项目开发使用。在学习 TypeScript 项目开发后，总结主要有以下几点感想。

• 如果是开始接触 TypeScript，建议使用时候，开启strict: true最严格模式。

• 所有模块、函数、变量等都要严格声明类型。

• 开启 eslint 的 TypeScript 最严格校验和修复

• webpack和rollup两种编译体系下建议都尝试一遍，毕竟很多大佬的前端库/框架都是基于这两个编译体系。

• 多折腾多写代码，学习新东西没有捷径可言

后记

经过两个月的开发 Pictool 的沉淀，后续已经开始整理下一本关于canvas和图像处理的学习笔记《Canvas进阶开发笔记》。目前已经沉淀了部分笔记，后续会持续整理更新上去，同时也会在本公众号分享其中比较有意思的技术能力。

进行中的《Canvas进阶开发笔记》

 Pictool 也会持续迭代，完善前端图像处理的能力，欢迎有兴趣的小伙伴使用，如有问题，欢迎提出。 

如何获取资料

步骤1: 关注本公众号

步骤2: 

回复 pictool

可查看，图像处理工具Pictool相关资料

回复 canvas 

可查看，Canvas相关学习笔记

如有其他技术交流，欢迎公众号留言 ?

---