该示例是来自阿宝哥 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
};
三、阿宝哥有话说
3.1 如何区分图片的类型
「计算机并不是通过图片的后缀名来区分不同的图片类型，而是通过 “魔数”（Magic Number）来区分。」 对于某一些类型的文件，起始的几个字节内容都是固定的，跟据这几个字节的内容就可以判断文件的类型。
常见图片类型对应的魔数如下表所示：
| 文件类型 | 文件后缀 | 魔数 |
|---|---|---|
| JPEG | jpg/jpeg | 0xFFD8FF |
| PNG | png | 0x89504E47 |
| GIF | gif | 0x47494638（GIF8） |
| BMP | bmp | 0x424D |
这里我们以阿宝哥的头像（abao.png）为例，验证一下该图片的类型是否正确：
在日常开发过程中，如果遇到检测图片类型的场景，我们可以直接利用一些现成的第三方库。比如，你想要判断一张图片是否为 PNG 类型，这时你可以使用 is-png 这个库，它同时支持浏览器和 Node.js，使用示例如下：
「Node.js」
// npm install read-chunk
const readChunk = require('read-chunk');
const isPng = require('is-png');
const buffer = readChunk.sync('unicorn.png', 0, 8);
isPng(buffer);
//=> true
「Browser」
(async () => {
const response = await fetch('unicorn.png');
const buffer = await response.arrayBuffer();
isPng(new Uint8Array(buffer));
//=> true
})();
3.2 如何获取图片的尺寸
图片的尺寸、位深度、色彩类型和压缩算法都会存储在文件的二进制数据中，我们继续以阿宝哥的头像（abao.png）为例，来了解一下实际的情况：
❝528（十进制） => 0x0210
560（十进制）=> 0x0230
❞
因此如果想要获取图片的尺寸，我们就需要依据不同的图片格式对图片二进制数据进行解析。幸运的是，我们不需要自己做这件事，image-size 这个 Node.js 库已经帮我们实现了获取主流图片类型文件尺寸的功能：
「同步方式」
var sizeOf = require('image-size');
var dimensions = sizeOf('images/abao.png');
console.log(dimensions.width, dimensions.height);
「异步方式」
var sizeOf = require('image-size');
sizeOf('images/abao.png', function (err, dimensions) {
console.log(dimensions.width, dimensions.height);
});
image-size 这个库功能还是蛮强大的，除了支持 PNG 格式之外，还支持 BMP、GIF、ICO、JPEG、SVG 和 WebP 等格式。
3.3 如何预览本地图片
利用 HTML FileReader API，我们也可以方便的实现图片本地预览功能，具体代码如下：
<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
const loadFile = function(event) {
const reader = new FileReader();
reader.onload = function(){
const output = document.querySelector('output');
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
};
</script>
在完成本地图片预览之后，可以直接把图片对应的 Data URLs 数据提交到服务器。针对这种情形，服务端需要做一些相关处理，才能正常保存上传的图片，这里以 Express 为例，具体处理代码如下：
const app = require('express')();
app.post('/upload', function(req, res){
let imgData = req.body.imgData; // 获取POST请求中的base64图片数据
let base64Data = imgData.replace(/^data:image/w+;base64,/, "");
let dataBuffer = Buffer.from(base64Data, 'base64');
fs.writeFile("image.png", dataBuffer, function(err) {
if(err){
res.send(err);
}else{
res.send("图片上传成功！");
}
});
});
3.4 如何实现图片压缩
在一些场合中，我们希望在上传本地图片时，先对图片进行一定的压缩，然后再提交到服务器，从而减少传输的数据量。在前端要实现图片压缩，我们可以利用 Canvas 对象提供的 toDataURL() 方法，该方法接收 type 和 encoderOptions 两个可选参数。
其中 type 表示图片格式，默认为 image/png。而 encoderOptions 用于表示图片的质量，在指定图片格式为 image/jpeg 或 image/webp 的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92，其他参数会被忽略。
下面我们来看一下具体如何实现图片压缩：
function compress(base64, quality, mimeType) {
let canvas = document.createElement("canvas");
let img = document.createElement("img");
img.crossOrigin = "anonymous";
return new Promise((resolve, reject) => {
img.src = base64;
img.onload = () => {
let targetWidth, targetHeight;
if (img.width > MAX_WIDTH) {
targetWidth = MAX_WIDTH;
targetHeight = (img.height * MAX_WIDTH) / img.width;
} else {
targetWidth = img.width;
targetHeight = img.height;
}
canvas.width = targetWidth;
canvas.height = targetHeight;
let ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, targetWidth, targetHeight); // 清除画布
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
let imageData = canvas.toDataURL(mimeType, quality / 100);
resolve(imageData);
};
});
}
对于返回的 Data URL 格式的图片数据，为了进一步减少传输的数据量，我们可以把它转换为 Blob 对象：
function dataUrlToBlob(base64, mimeType) {
let bytes = window.atob(base64.split(",")[1]);
let ab = new ArrayBuffer(bytes.length);
let ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], { type: mimeType });
}
在转换完成后，我们就可以压缩后的图片对应的 Blob 对象封装在 FormData 对象中，然后再通过 AJAX 提交到服务器上：
function uploadFile(url, blob) {
let formData = new FormData();
let request = new XMLHttpRequest();
formData.append("image", blob);
request.open("POST", url, true);
request.send(formData);
}
3.5 如何操作位图像素数据
如果想要操作图片像素数据，我们可以利用 CanvasRenderingContext2D 提供的 getImageData 来获取图片像素数据，其中 getImageData() 返回一个 ImageData 对象，用来描述 canvas 区域隐含的像素数据，这个区域通过矩形表示，起始点为（sx, sy）、宽为 sw、高为 sh。其中 getImageData 方法的语法如下：
ctx.getImageData(sx, sy, sw, sh);
相应的参数说明如下：
- sx：将要被提取的图像数据矩形区域的左上角 x 坐标。
- sy：将要被提取的图像数据矩形区域的左上角 y 坐标。
- sw：将要被提取的图像数据矩形区域的宽度。
- sh：将要被提取的图像数据矩形区域的高度。
在获取到图片的像素数据之后，我们就可以对获取的像素数据进行处理，比如进行灰度化或反色处理。当完成处理后，若要在页面上显示处理效果，则我们需要利用 CanvasRenderingContext2D 提供的另一个 API —— putImageData。
该 API 是 Canvas 2D API 将数据从已有的 ImageData 对象绘制到位图的方法。如果提供了一个绘制过的矩形，则只绘制该矩形的像素。此方法不受画布转换矩阵的影响。putImageData 方法的语法如下：
void ctx.putImageData(imagedata, dx, dy);
void ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
相应的参数说明如下：
- imageData：
ImageData，包含像素值的数组对象。 - dx：源图像数据在目标画布中的位置偏移量（x 轴方向的偏移量）。
- dy：源图像数据在目标画布中的位置偏移量（y 轴方向的偏移量）。
- dirtyX（可选）：在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（x 坐标）。
- dirtyY（可选）：在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（y 坐标）。
- dirtyWidth（可选）：在源图像数据中，矩形区域的宽度。默认是图像数据的宽度。
- dirtyHeight（可选）：在源图像数据中，矩形区域的高度。默认是图像数据的高度。
介绍完相关的 API，下面我们来举一个实际例子：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>图片反色和灰度化处理</title>
</head>
<body onload="loadImage()">
<div>
<button id="invertbtn">反色</button>
<button id="grayscalebtn">灰度化</button>
</div>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
function loadImage() {
var img = new Image();
img.crossOrigin = "";
img.onload = function () {
draw(this);
};
// 这是阿宝哥的头像哟
img.src = "https://avatars3.githubusercontent.com/u/4220799";
}
function draw(img) {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
img.style.display = "none";
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;
var invert = function () {
for (var i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i]; // red
data[i + 1] = 255 - data[i + 1]; // green
data[i + 2] = 255 - data[i + 2]; // blue
}
ctx.putImageData(imageData, 0, 0);
};
var grayscale = function () {
for (var i = 0; i < data.length; i += 4) {
var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = avg; // red
data[i + 1] = avg; // green
data[i + 2] = avg; // blue
}
ctx.putImageData(imageData, 0, 0);
};
var invertbtn = document.getElementById("invertbtn");
invertbtn.addEventListener("click", invert);
var grayscalebtn = document.getElementById("grayscalebtn");
grayscalebtn.addEventListener("click", grayscale);
}
</script>
</body>
</html>
需要注意的在调用 getImageData 方法获取图片像素数据时，你可能会遇到跨域问题，比如：
Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
对于这个问题，你可以阅读 「张鑫旭」 大神 “解决canvas图片getImageData,toDataURL跨域问题” 这一篇文章。
3.6 如何实现图片隐写
「隐写术是一门关于信息隐藏的技巧与科学，所谓信息隐藏指的是不让除预期的接收者之外的任何人知晓信息的传递事件或者信息的内容。」 隐写术的英文叫做 Steganography，来源于特里特米乌斯的一本讲述密码学与隐写术的著作 Steganographia，该书书名源于希腊语，意为 “隐秘书写”。
下图是阿宝哥采用在线的图片隐写工具，将 「“全栈修仙之路”」 这 6 个字隐藏到原始的图片中，然后使用对应的解密工具，解密出隐藏信息的结果：
（在线图片隐写体验地址：https://c.p2hp.com/yinxietu/）
目前有多种方案可以实现图片隐写，以下是几种常见的方案：
- 附加式的图片隐写；
- 基于文件结构的图片隐写；
- 基于 LSB 原理的图片隐写；
- 基于 DCT 域的 JPG 图片隐写；
- 数字水印的隐写；
- 图片容差的隐写。