JavaScript / HTML / CSS半色调线条效果

Question

我正在尝试找到一个库/ API来转换图像并使用线条添加半色调效果，就像这个图像一样。

。

原始图片只是一只考拉，此用法的示例取自photocarver

基本上我想开发一个网络应用程序，允许用户提交任何图像/照片，然后仅作为预览应用此效果，然后他们可以提交打印。

我只想实现与photocarver中相同的功能，但我只关心图片上传并应用效果。

我唯一的问题是我找不到任何允许我应用此效果的库/ API，我希望它是通过JavaScript。我找到了两种应用此过滤器的方法，但它只使用点，效果不是所需的。

问题

1. 是否有允许我这样做的库或API？我在GitHub上看到了无处不在的代码，并没有发现任何东西。
2. 我考虑为此实现我自己的模块，但是为了实现我自己的模型需要有关于照片效果和像素操作的可靠知识吗？我有JS的经验，但我对摄影/效果一无所知。
3. 我可以使用上面提到的网站的源代码（我有这个图片的例子）吗？我试着查看他们的代码，但我看不到如何只使用我需要的部分才能自己使用。
4. 我有一个.exe，允许我这样做，但它是基于UI的。有没有办法通过JavaScript生成进程并以编程方式应用效果？我想不是，因为它可以用.NET框架开发，我不知道用JS做这个的方法。该应用程序甚至不是我可用于API调用的DLL。
5. 关于实现我自己，我已经看到没有NPM模块，我也在考虑制作一个，有人可以提供指南吗？我基本上只需要将算法应用于每个图像文件。

提前致谢。

Answer 1

我尝试搜索许多解决方案，我参考了此sample，并为您编写了此code，如果您想设置线条边框和装订线，请检查js第51行。

JS

function drawLine(imageData){
  // settings variable
  let _width = imageData.width;
  let _height = imageData.height;
  let lineWidth = 4;
  let lineGutter = 7;
  for(let i = 0; _height>i;i+=lineGutter){
    console.log(i)
    context.beginPath();
    context.moveTo(0, i);
    context.lineTo(_width, i);
    context.lineWidth = lineWidth;
    context.strokeStyle = '#ffffff';
    context.stroke();
  }
}