6 款 Javascript 的图像处理库

   <p>如果你正在寻找更高效的办法来处理或操纵你 web 项目中的图片，那么这篇 blog 介绍的一些库，很值得你仔细阅读一下。这些库，大部分都提供了亮度、灰度、反转等调整操作，其他一部分则集中在可读性和易扩展性上。接下来的部分将帮助你了解并选择一款适合自己需求的工具。</p>    <p>你会从这里找到调整图片亮度的代码片段，这将提供给你如何使用库的 idea。运行代码（Source: flickr.com）的结果如下：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/330b343c310978fdd5d29064fd89bf13.png"></p>    <h2>1.Caman JS</h2>    <p>Caman JS 是大名鼎鼎的并且非常权威的图像处理库。它提供了各种内置功能以及各种扩展的可能性。此外，该库还提供了详细的文档，可以用于 NodeJS 和浏览器。</p>    <p>CamanJS 的函数使用 <canvas> 元素，所以开始之前，你可以自己创建一个 Canvas 元素，也可以让 CamanJS 用相同尺寸的画布替换图像。</p>    <p>基本功能包含了，设置对比度/亮度或单独修改 RGB 通道以及增加或减少图像噪点，这样的色彩操作。更高级的操作，还有使用图层、复合或裁减图像可以通过插件来实现。</p>    <p>主页地址： <a href="/misc/goto?guid=4958527618364318931" rel="nofollow,noindex">http://camanjs.com/</a></p>    <pre>  <code class="language-javascript"><img id="caman-image" src="otter.jpg">  <script src="caman.js"></script>  <script>  Caman('#caman-image', function () {    this.brightness(50).render();  });  </script></code></pre>    <h2>2. glfx.js</h2>    <p>像前两个库那样，glfx.js 是一个提供了广泛功能的强大工具。不同于 Filtrr2 和 CamanJS，它遵守 WebGL 标准。非常赞的一点是，图像处理操作在显卡完成，因此可以实时运行。它主要的缺点是只支持最新版本的浏览器。</p>    <p>除了基本的调节功能和炫酷效果外，glfx.js 提供了（模糊和包装功能）的列表。这样可以通过调整不同的参数来创建唯一的结果。</p>    <p>查看这个项目主页的 demo 然后下载这个库。</p>    <p>项目地址： <a href="/misc/goto?guid=4959741104571036866" rel="nofollow,noindex">http://evanw.github.io/glfx.js/</a></p>    <pre>  <code class="language-javascript"><script src="glfx.js"></script>  <script>  window.onload = function () {      const canvas = fx.canvas();      const image = document.getElementById('glfx-image');      const texture = canvas.texture(image);      canvas.draw(texture).brightnessContrast(0.5, 0).update();      image.parentNode.insertBefore(canvas, image);      image.parentNode.removeChild(image);  };  </script>  <img id="glfx-image" src="otter.jpg"></code></pre>    <h2>3．Grafi.js</h2>    <p>正如在它项目主页上所说的，grafi.js 是一个鼓励用户去了解图像处理是如何工作的库。源代码可以在 github 找到，并且它里面的很多注释，可以帮助你理解每个函数到底发生了什么。如果你在寻找一些提供更高级图像操作的库，也许 grafi.js 并不能够满足你的需求，但它可以让你了解图像处理是如何执行然后得到满意效果的。</p>    <p>注意，涉及改变图像的方向或大小的操作不是由 grafi.js 提供的。</p>    <p><a href="/misc/goto?guid=4959741104658318457" rel="nofollow,noindex">https://github.com/grafijs/grafi</a></p>    <pre>  <code class="language-javascript"><canvas id="grafi-canvas"></canvas>  <script type="text/javascript" src="grafi.js"></script>  <script>    const grafiCanvas = document.getElementById('grafi-canvas')    let canvas = document.createElement('canvas')    let ctx = canvas.getContext('2d')    let original, newImage, imageCtx    let img = new Image()    img.src = 'otter.jpg';      img.onload = function () {      canvas.width = img.width      canvas.height = img.height      ctx.drawImage(img, 0, 0)      original = ctx.getImageData(0,0, canvas.width, canvas.height)        grafiCanvas.width = img.width      grafiCanvas.height = img.height      imageCtx = grafiCanvas.getContext('2d')      imageCtx.putImageData(grafi.brightness(original, {level: 100}), 0, 0)    }  </script></code></pre>    <h2>4. Jimp</h2>    <p>像 CamanJS 一样，可以用于 NodeJS 和浏览器中，他不需要使用 HTML 元素（ <img> 或者 <canvas> ）,但需要从路径或URL读取图像。</p>    <p>Jimp 提供了颜色调节和一些效果的函数清单。当然也提供了一些你可能在其他库错过的操作，比如调整尺寸，缩放以及旋转图像。图片也可以手动或自动裁减。在 Node 中使用，Jimp 则是一个非常强大的工具，可以让你在多个文件上执行链接操作，并储存修改的图像。</p>    <p><a href="/misc/goto?guid=4959741104746109841" rel="nofollow,noindex">https://github.com/oliver-moran/jimp</a></p>    <pre>  <code class="language-javascript"><script src="jimp.min.js"></script>  <script>    Jimp.read('otter.jpg').then(function (lenna) {      lenna.brightness(0.5)        .getBase64(Jimp.MIME_JPEG, function (err, src) {          const img = document.createElement('img');          img.setAttribute('src', src);          document.body.appendChild(img);        });      }).catch(function (err) {        console.error(err);      });  </script></code></pre>    <h2>5. Filtrr2</h2>    <p>Filtrr2 是一个基于jQuery 的被描述为「开箱即用」的库。它使用 <canvas> 来操作图像。CamanJS 的功能并没有被 Filtrr2 完全包含，他还提供了一些其他的功能如（海报已经模糊图像）。Filtrr2提供的所有这些功能和用法与CamanJS 很相似。</p>    <p>虽然 Fitlrr2 是很强悍的库，但github库一段时间内并没有及时更新了。</p>    <p>项目地址： <a href="/misc/goto?guid=4959741104817577126" rel="nofollow,noindex">https://github.com/alexmic/filtrr/tree/master/filtrr2</a></p>    <pre>  <code class="language-javascript"><script type="text/javascript" src="jquery.min.js"/></script>  <script src="filtrr2.js"></script>    <img id="filtrr2-img" src="otter.jpg"/>  <script>    Filtrr2('#filtrr2-img', function () {      this.brighten(50).render();    });  </script></code></pre>    <h2>6. Processing.js</h2>    <p>如果你熟悉Processing编程语言，这个库可能会派上用场。Processing 允许使用不同的媒介，用于创建动画片，数字形象和数字艺术，也可以用于图像处理。</p>    <p>Processing.js 可以让你编写 Processing 代码并通过应用 canvas 元素简单的包含你的网站。</p>    <p>虽然库提供了一些有用的功能，例如缩放、旋转或图像混合，但用于基本操作的解决方案必须由用户实现，例如灰度和颜色的调整。从正面的角度看，他是一个可灵活调整以及一个很好的了解图像处理算法的途径。</p>    <p>这里有很多示例和详细的步骤来帮助你开始： <a href="/misc/goto?guid=4958190209686600862" rel="nofollow,noindex">http://processingjs.org/</a></p>    <h2>综述</h2>    <p>总的来看一下这些库所提供的功能，如下表：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/d48c403d4f2e511988bb7f9939db6e8d.png"></p>    <p>正如你看到的，CamanJS 提供了多种多样的像素修饰以及用于修改图片的操作。如模糊和锐化等一些操作，只有别的库提供，那你就必须根据自己到底想做什么来做取舍了。</p>    <p>此列表中唯一支持翻转和自动剪裁的库就是 Jimp。如果你只想调整大小或剪裁图片，那么 CamanJS 和 Jimp 都可以选择。</p>    <p>如果你正在寻找更多抽象的操作，glfx.js 也许可以选择，因为它配备了一列表的花式效果，你可以尝试一下。如下表这样：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/f98e8ad5ebd4404047cee599f708be6c.png"></p>    <p>当然，你觉得这篇文章介绍的库并不值得一看，那你也许对下面的更感兴趣：</p>    <p> </p>    <p>来自：https://juejin.im/entry/58c0f8122f301e006ba80891</p>    <p> </p>