Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[第 72 期] 自荐项目: 用TypeScript写了个低配版H5美图工具Pictool #738

Open
chenshenhai opened this issue Jul 30, 2019 · 0 comments

Comments

@chenshenhai
Copy link

commented Jul 30, 2019

自荐项目: 用TypeScript写了个低配版H5美图工具Pictool

pictool-ui-adjust

项目地址

https://github.com/chenshenhai/pictool

文档地址

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

在线例子
https://chenshenhai.github.io/pictool/example/index.html

pictool-logo

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);

example-ui

具体动态效果

简单处理
pictool-ui-process

图像调节
pictool-ui-adjust

图像滤镜效果
pictool-ui-effect

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(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-sanbox

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
    • 图片 URL转图片ImageData
    • 图片 ImageData转图片base64
  • 图片压缩: 将图片压缩在 400百万像素内
  • 其他能力,详见文档

Pictool 文档

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

pictool-doc

pictool-doc-quick

@ruanyf ruanyf changed the title 自荐项目: 用TypeScript写了个低配版H5美图工具Pictool [第 72 期] 自荐项目: 用TypeScript写了个低配版H5美图工具Pictool Jul 30, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
1 participant
You can’t perform that action at this time.