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

Posted 2023-03-08

【中文标题】JavaScript/HTML/CSS 半色调线条效果

【英文标题】：JavaScript/HTML/CSS Halftone Lines Effect

【发布时间】：2017-06-24 14:42:35

【问题描述】：

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

。

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

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

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

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

问题

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

提前致谢。

【参考方案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();