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

Question

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

.

原始图像只是一只考拉，这种用法的例子取自photocarver

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

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

我遇到的唯一问题是我找不到任何允许我应用此效果的库/API，我希望它通过 JavaScript。 我找到了 2 种应用此滤镜的方法，但它仅使用点，效果不理想。

问题

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

提前致谢。

Answer 1

我尝试搜索很多解决方案，我参考了这个示例，并为你编写了这段代码，如果你想设置线条边框和装订线，请检查 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();
  }
}