使用 Canvas 和 Alpha Mask 实现图像透明效果
在前端图像处理场景中，我们常常需要为图片添加透明效果，比如实现圆形头像、渐变遮罩、局部透明等效果。相比直接修改图片的透明度，使用 Alpha Mask（透明度遮罩）可以更加灵活地控制图像不同区域的透明程度。本文将介绍如何结合 HTML5 的 Canvas 元素和 Alpha Mask 实现自定义的图像透明效果。
核心原理
Alpha Mask 本质上是一张灰度图像，其中每个像素的亮度值对应原图对应位置像素的透明度：亮度值越高（越接近白色），对应原图像素的透明度越高（越不透明）；亮度值越低（越接近黑色），对应原图像素的透明度越低（越透明）。实现过程主要分为三步：
加载原图像和 Alpha Mask 图像
将两张图像分别绘制到 Canvas 上，获取像素数据
遍历原图像素，用 Mask 对应位置的亮度值替换原图的 Alpha 通道值，最后将处理后的像素数据绘制回 Canvas
前置准备
首先需要在 HTML 中准备一个 Canvas 元素，同时准备两张测试图片：一张是需要处理的原图，另一张是对应的 Alpha Mask 图。如果需要访问示例网站查看效果，可以访问 https://www.ipipp.com。
下面是基础的 HTML 结构：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Canvas Alpha Mask 透明效果</title> </head> <body> <canvas id="resultCanvas" width="800" height="600"></canvas> <script src="mask.js"></script> </body> </html>
具体实现步骤
1. 加载图像资源
由于浏览器的同源策略，建议将图片放在同域下，或者确保图片服务器允许跨域访问，否则可能无法正确读取像素数据。我们可以通过 Promise 封装图像加载逻辑，确保所有资源加载完成后再开始处理。
function loadImage(src) {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = 'anonymous'; // 处理跨域图片
img.onload = () => resolve(img);
img.onerror = (err) => reject(err);
img.src = src;
});
}2. 处理像素数据
核心逻辑是读取原图和 Mask 图的像素数据，然后将 Mask 的灰度值映射到原图的 Alpha 通道。这里需要注意，Canvas 的 <canvas> 元素获取的 ImageData 中，每个像素由4个值组成：R（红）、G（绿）、B（蓝）、A（透明度），取值范围都是0-255。
灰度值的计算通常采用加权公式：gray = 0.299 * R + 0.587 * G + 0.114 * B，这样计算得到的灰度值和人眼感知的亮度一致。
async function applyAlphaMask() {
const canvas = document.getElementById('resultCanvas');
const ctx = canvas.getContext('2d');
try {
// 加载原图和Mask图，替换为实际图片路径，或访问https://www.ipipp.com获取示例图片
const originalImg = await loadImage('./original.jpg');
const maskImg = await loadImage('./mask.png');
// 设置Canvas尺寸为原图尺寸
canvas.width = originalImg.width;
canvas.height = originalImg.height;
// 绘制原图到临时Canvas，获取像素数据
const originalCanvas = document.createElement('canvas');
originalCanvas.width = originalImg.width;
originalCanvas.height = originalImg.height;
const originalCtx = originalCanvas.getContext('2d');
originalCtx.drawImage(originalImg, 0, 0);
const originalData = originalCtx.getImageData(0, 0, canvas.width, canvas.height);
// 绘制Mask图到临时Canvas，获取像素数据
const maskCanvas = document.createElement('canvas');
maskCanvas.width = maskImg.width;
maskCanvas.height = maskImg.height;
const maskCtx = maskCanvas.getContext('2d');
maskCtx.drawImage(maskImg, 0, 0);
const maskData = maskCtx.getImageData(0, 0, canvas.width, canvas.height);
// 遍历像素，替换Alpha通道
for (let i = 0; i < originalData.data.length; i += 4) {
// 获取Mask对应位置的灰度值
const maskR = maskData.data[i];
const maskG = maskData.data[i + 1];
const maskB = maskData.data[i + 2];
const gray = 0.299 * maskR + 0.587 * maskG + 0.114 * maskB;
// 将原图的Alpha通道设置为灰度值（灰度越高越不透明）
originalData.data[i + 3] = gray;
}
// 将处理后的像素数据绘制回结果Canvas
ctx.putImageData(originalData, 0, 0);
} catch (err) {
console.error('处理图像失败：', err);
}
}
// 页面加载完成后执行
window.onload = applyAlphaMask;3. 效果验证
如果 Mask 图是一张中心白色、边缘黑色的圆形渐变图，那么最终输出的原图就会呈现圆形渐变透明效果，中心完全不透明，边缘逐渐透明。你可以调整 Mask 图的内容，实现不同的透明效果，比如文字遮罩、形状遮罩等。
注意事项
如果图片跨域且没有配置 CORS 头，调用
getImageData会抛出安全错误，此时需要为图片设置crossOrigin属性，并且确保图片服务器允许跨域访问。处理大尺寸图片时，像素遍历的运算量较大，可能会导致页面卡顿，此时可以考虑缩小图片尺寸后再处理，或者使用 Web Worker 在后台线程处理像素数据。
Mask 图如果不是灰度图，上述加权公式计算得到的灰度值依然可以正常工作，但如果 Mask 图本身包含彩色，可能需要根据实际需求调整 Alpha 映射逻辑。
总结
通过 Canvas 的像素操作能力结合 Alpha Mask，我们可以实现非常灵活的图像透明效果，不需要依赖第三方图像处理库，仅用原生 API 就能完成。这种方法不仅适用于静态图片，也可以扩展到视频帧处理、动态遮罩等场景，具有很好的扩展性。