#简介
水印图片在生活中应用广泛。例如,从媒体发布的图片将被加上水印,以防止内容被传输到其他平台。实名认证的身份证照片会打上“仅用作XXX”的水印,防止身份证被滥用。本文介绍了如何使用nodejs从头开始为图片生成水印。本文的功能将发布到小程序——“工具宝箱”。欢迎拍砖。
#一步一步。
水印其实就是编辑图片,这需要一个三方库-――jimp,也就是所谓的JavaScript。
图像编辑软件”。在package.json中添加jimp依赖项,并将其引入项目中。
{ ' name ' : ' nodejs-console-app 1 ',' main': 'app.js ',' dependencies ' : { ' jimp ' : ' 0 . 16 . 1 ' } }
Jimp水印分为两个步骤:1 .阅读需要加水印的图片。2.添加水印。代码如下:
使用“严格”;//引入Jim pvar jimp=required(' jimp ');让sourceImage//阅读原文jimp.read ('h: \ \ tmp \ \ 12.jpg ')。然后(image={ sourceimage=image//加载水印字体返回jimp . load font(jimp . font _ sans _ 64 _ black);}).然后(font={//生成水印并保存sourceimage.print (font,10,10,' lintest ')。write(' h : \ \ tmp \ \ 12 _ water . jpg ');//10表示水印开始的坐标,原点在左上角})
细心的朋友发现,添加水印前需要加载字体。Jimp内置黑白开从8px到128px。
它也支持位图类型的字体文件。注意:内置字体不支持中文!
经常使用水印的朋友可能会注意到,水印文本一般是半透明的,不会覆盖原始图像。上面的例子不符合要求。半透明水印可以通过半透明字体或图像合成来实现。代码如下:
使用“严格”;//引入Jim pvar jimp=required(' jimp ');让sourceImage//阅读原文jimp.read ('h: \ \ tmp \ \ 4.jpg ')。然后(image={ sourceimage=image//加载水印字体返回jimp . load font(jimp . font _ sans _ 64 _ black);}).然后(font={//初始化一张透明度为0的图片让文字图像=new jimp(source image . bitmap . width,sourceimage.bitmap.height,0x 0);//生成水印textimage.print(字体,10,10,' lintest ')。复合(sourceimage,0,0,{mode:jimp.blend _ multiple,opacitysource33601,opacitydest33600.3})。写入(' h:)。})
通常水印会有多行,因此需要计算图像高度和水印高度来确定行数。代码如下:
使用“严格”;//引入Jim pvar jimp=required(' jimp ');让sourceImage//阅读原文jimp.read ('h: \ \ tmp \ \ 6.jpg ')。然后(image={ sourceimage=image//加载水印字体返回jimp . load font(jimp . font _ sans _ 64 _ black);}).然后(font={//初始化一张透明度为0的图片让文字图像=new jimp(source image . bitmap . width,sourceimage.bitmap.height,0x 0);//计算水印高度让text height=jimp . measure text height(字体,‘lintest’);//统计行数,注意水印高度从10开始。让row num=math . floor((source image . bitmap . height-10)/text height)为(让I=0;i rowNumi) { textImage.print(字体,10,10 i * textHeight,' Lin test ');}//生成水印text image.composite(source image,0,0,{mode:jimp.blend _ multiple,opacitysource:1,opacitydest33600.3})。write(' h : \ \ tmp \ \ 6 _ water . jpg ')。})
#摘要
下一期要介绍的水印生成还有两个问题:1 .中国人。2.45斜水印。请向前看!