如何用nodejs给图片添加半透明水印

本文小编为大家详细介绍“如何用nodejs给图片添加半透明水印”，内容详细，步骤清晰，细节处理妥当，希望这篇“如何用nodejs给图片添加半透明水印”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。作为中后台项目的导出功能，通常会被要求具备导出的追溯能力。当导出的数据形态为图片时，一般会为图片添加水印以达到此目的。DEMO那么在导出图片前如何为其添加上可以作为导出者身份识别的水印呢？先看成品：上图原图为我随便在网上找的一张图片，添加水印之后的效果如图所示。业务需求分解这里我们需要考虑在此业务场景之下，这个需求的三个要点：水印需要铺满整个图片水印文字成半透明状，保证原图的可读性水印文字应清晰可读选型如我一样负责在一个node.js server上实现以上需求，可选项相当多，比如直接使用c lib imagemagick或者已有人封装的各种node watermarking库。在本文中，我们将选择使用对Jimp库的封装。Jimp 库的官方github页面上这样描述它自己：An image processing library for Node written entirely in JavaScript, with zero native dependencies.并且提供为数众多的操作图片的APIblit – Blit an image onto another.blur – Quickly blur an image.color – Various color manipulation methods.contain – Contain an image within a height and width.cover – Scale the image so the given width and height keeping the aspect ratio.displace – Displaces the image based on a displacement mapdither – Apply a dither effect to an image.flip – Flip an image along it’s x or y axis.gaussian – Hardcore blur.invert – Invert an images colorsmask – Mask one image with another.normalize – Normalize the colors in an imageprint – Print text onto an imageresize – Resize an image.rotate – Rotate an image.scale – Uniformly scales the image by a factor.在本文所述的业务场景中，我们只需使用其中部分API即可。设计和实现input 参数设计：url: 原图片的存储地址（对于Jimp来说免费云主机、域名，可以是远程地址，也可以是本地地址）textSize: 需添加的水印文字大小opacity：透明度text：需要添加的水印文字dstPath：添加水印之后的输出图片地址，地址为脚本执行目录的相对路径rotate：水印文字的旋转角度colWidth：因为可旋转的水印文字是作为一张图片覆盖到原图上的，因此这里定义一下水印图片的宽度，默认为300像素rowHeight：理由同上，水印图片的高度，默认为50像素。（PS：这里的水印图片尺寸可以大致理解为水印文字的间隔）因此在该模块的coverTextWatermark函数中对外暴露以上参数即可coverTextWatermarktextWatermarkJimp不能直接将文本旋转一定角度，并写到原图片上，因此我们需要根据水印文本生成新的图片二进制流，并将其旋转。最终以这个新生成的图片作为真正的水印添加到原图片上。下面是生成水印图片的函数定义：calculatePositionList到目前为止原图有了，水印图片也有了，如果想达到铺满原图的水印效果，我们还需要计算出水印图片应该在哪些坐标上画在原图上，才能达成水印铺满原图的目的。如上代码所示，我们使用一个二维数组记录所有水印图片需出现在原图上的坐标列表。示例代码：读到这里，这篇“如何用nodejs给图片添加半透明水印”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注云技术行业资讯频道。

相关推荐: 如何用PyCharm解决字符串离奇消失的问题

今天就跟大家聊聊有关如何用PyCharm解决字符串离奇消失的问题，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。今天在交流群里，有人问了这样一个问题：截图中涉及到的图片为：一开始，我以为这是一个简单的问题…