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

我尝试搜索许多解决方案，我引用了这个 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();
  }
}