您现在的位置: 首页 > 网站导航收录 > 百科知识百科知识

coay(推荐10个常用的图片处理小帮手（下）)

图片,数据,图像coay(推荐10个常用的图片处理小帮手（下）)

发布时间：2016-12-08加入收藏来源：互联网点击：

作者： semlinker

转发链接：https://mp.weixin.qq.com/s/i3ynTtPJOECoAYfqHFoo3Q

前言

本文给小伙伴们隆重介绍用于图片处理的十个 「“小帮手”」，他们各个身怀绝技，拥有模糊、压缩、裁剪、旋转、合成、比对等技能。相信认识他们之后，你将能够轻松应对大多数的图片处理场景。

该章节你将会学到以下知识：

如何区分图片的类型（可文件后缀名）；如何获取图片的尺寸（可右键查看图片信息）；如何预览本地图片（非图片阅读器）；如何实现图片压缩（非图片压缩工具）；如何操作位图像素数据（非 PS 等图片处理软件）；如何实现图片隐写（非肉眼可见）。

十个图片处理 「“小帮手”」 已经已经迫不及待想与你见面，还在犹豫什么？赶紧出发吧！

目录

推荐10个常用的图片处理小帮手（上）「值得收藏」

推荐10个常用的图片处理小帮手（下）「值得收藏」 本篇

2.10 Sharp

High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP and TIFF images. Uses the libvips library.

https://github.com/lovell/sharp

Sharp 的典型应用场景是将常见格式的大图像转换为尺寸较小，对网络友好的 JPEG，PNG 和 WebP 格式的图像。由于其内部使用 libvips ，使得调整图像大小通常比使用 ImageMagick 和 GraphicsMagick 设置快 4-5 倍 。除了支持调整图像大小之外，Sharp 还支持旋转、提取、合成和伽马校正等功能。

Sharp 支持读取 JPEG，PNG，WebP，TIFF，GIF 和 SVG 图像。输出图像可以是 JPEG，PNG，WebP 和 TIFF 格式，也可以是未压缩的原始像素数据。

「使用示例」

// 改变图像尺寸sharp(inputBuffer)  .resize(320, 240)  .toFile('output.webp', (err, info) => { ... });       // 旋转输入图像并改变图片尺寸                                         sharp('input.jpg')  .rotate()  .resize(200)  .toBuffer()  .then( data => { ... })  .catch( err => { ... });                                         

「在线示例」

https://segmentfault.com/a/1190000012903787

该示例是来自阿宝哥 18 年写的 “Sharp 牛刀小试之生成专属分享图片” 这篇文章，主要是利用 Sharp 提供的图片合成功能为每个用户生成专属的分享海报，感兴趣的小伙伴可以阅读一下原文哟。

const sharp = require("sharp");const TextToSVG = require("text-to-svg");const path = require("path");// 加载字体文件const textToSVG = TextToSVG.loadSync(path.join(__dirname, "./simhei.ttf"));// 创建圆形SVG，用于实现头像裁剪const roundedCorners = new Buffer(  '<svg><circle r="90" cx="90" cy="90"/></svg>');// 设置SVG文本元素相关参数const attributes = { fill: "white" };const svgOptions = {  x: 0,  y: 0,  fontSize: 32,  anchor: "top",  attributes: attributes};/** * 使用文本生成SVG * @param {*} text  * @param {*} options  */function textToSVGFn(text, options = svgOptions) {  return textToSVG.getSVG(text, options);}/** * 图层叠加生成分享图片 * @param {*} options  *  */async function genShareImage(options) {  const { backgroudPath, avatarPath, qrcodePath,     userName, words, likes, outFilePath  } = options;  // 背景图片  const backgroudBuffer = sharp(path.join(__dirname, backgroudPath)).toBuffer({    resolveWithObject: true  });  const backgroundImageInfo = await backgroudBuffer;  // 头像图片  const avatarBuffer = await genCircleAvatar(path.join(__dirname, avatarPath));  // 二维码图片  const qrCodeBuffer = await sharp(path.join(__dirname, qrcodePath))    .resize(180)    .toBuffer({      resolveWithObject: true    });  // 用户名  const userNameSVG = textToSVGFn(userName);  // 用户数据  const userDataSVG = textToSVGFn(`写了${words}个字   收获${likes}个赞`);  const userNameBuffer = await sharp(new Buffer(userNameSVG)).toBuffer({    resolveWithObject: true  });  const userDataBuffer = await sharp(new Buffer(userDataSVG)).toBuffer({    resolveWithObject: true  });  const buffers = [avatarBuffer, qrCodeBuffer, userNameBuffer, userDataBuffer];  // 图层叠加参数列表  const overlayOptions = [    { top: 150, left: 230 },    { top: 861, left: 227 },    {      top: 365,      left: (backgroundImageInfo.info.width - userNameBuffer.info.width) / 2    },    {      top: 435,      left: (backgroundImageInfo.info.width - userDataBuffer.info.width) / 2    }  ];  // 组合多个图层：图片 文字图层  return buffers    .reduce((input, overlay, index) => {      return input.then(result => {        console.dir(overlay.info);        return sharp(result.data)          .overlayWith(overlay.data, overlayOptions[index])          .toBuffer({ resolveWithObject: true });      });    }, backgroudBuffer)    .then((data) => {      return sharp(data.data).toFile(outFilePath);    }).catch(error => {      throw new Error('Generate Share Image Failed.');    });}/** * 生成圆形的头像 * @param {*} avatarPath 头像路径 */function genCircleAvatar(avatarPath) {  return sharp(avatarPath)    .resize(180, 180)    .overlayWith(roundedCorners, { cutout: true })    .png()    .toBuffer({      resolveWithObject: true    });}module.exports = {  genShareImage};

 1/5    1 2 3 4 5 下一页 尾页