基于Canvas JavaScript实现图片纹理贴合与阴影效果的技术问询

嘿，这个需求完全可以用前端Canvas实现，不用非得依赖服务端生成！我之前做过类似的实时预览效果，给你分享一下具体的实现思路和代码示例。

核心玩法：位移映射（Displacement Mapping） #

要让图片贴合纹理的凹凸形态，核心就是位移映射——简单说就是用纹理图的亮度值，去偏移目标图片的像素位置：纹理亮的地方（比如纸张的凸起）让logo像素往一个方向偏移，暗的地方（凹陷）往反方向偏移，这样看起来就像logo“贴”在纹理上一样。

分步实现代码示例 #

1. 先准备好资源 #

你需要两张图：

• 目标图片：比如你的logo
• 纹理图：纸张/布料的图（用灰度图效果最好，因为亮度值更容易计算偏移；彩色图也可以，取RGB的平均值当亮度）

2. 基础代码框架 #

先写个加载图片的工具函数，然后初始化Canvas：

// 加载图片的工具函数，返回Promise方便异步处理
function loadImage(src) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = 'anonymous'; // 处理跨域问题，如果图片是同域可以去掉
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = src;
  });
}

async function initTexturePreview() {
  const canvas = document.getElementById('textureCanvas');
  const ctx = canvas.getContext('2d');
  
  // 加载两张图片
  const [logoImg, textureImg] = await Promise.all([
    loadImage('your-logo.png'),
    loadImage('paper-texture.png')
  ]);
  
  // 把Canvas尺寸设置成和logo一样大
  canvas.width = logoImg.width;
  canvas.height = logoImg.height;
  
  // 接下来做位移映射和纹理叠加
  applyDisplacement(ctx, logoImg, textureImg, 8);
  addTextureAndShadow(ctx, textureImg);
}

// 初始化
initTexturePreview();

3. 实现位移映射（让图片贴合纹理） #

这一步是核心，我们会遍历每个像素，根据纹理的亮度偏移logo的像素位置：

// 位移映射处理函数
// strength：位移强度，值越大变形越明显
function applyDisplacement(ctx, targetImg, textureImg, strength = 5) {
  // 先把纹理图绘制到临时Canvas，获取像素数据
  const textureCanvas = document.createElement('canvas');
  const textureCtx = textureCanvas.getContext('2d');
  textureCanvas.width = textureImg.width;
  textureCanvas.height = textureImg.height;
  textureCtx.drawImage(textureImg, 0, 0);
  const textureData = textureCtx.getImageData(0, 0, textureImg.width, textureImg.height);
  const texturePixels = textureData.data;
  
  // 获取logo的像素数据
  ctx.drawImage(targetImg, 0, 0);
  const targetData = ctx.getImageData(0, 0, targetImg.width, targetImg.height);
  const targetPixels = targetData.data;
  
  // 遍历每个像素计算偏移
  for (let y = 0; y < targetImg.height; y++) {
    for (let x = 0; x < targetImg.width; x++) {
      const pixelIndex = (y * targetImg.width + x) * 4;
      
      // 计算纹理图上对应的像素位置（适配不同尺寸）
      const textureX = Math.floor(x * textureImg.width / targetImg.width);
      const textureY = Math.floor(y * textureImg.height / targetImg.height);
      const texturePixelIndex = (textureY * textureImg.width + textureX) * 4;
      
      // 计算纹理像素的亮度（RGB平均值）
      const brightness = (texturePixels[texturePixelIndex] + texturePixels[texturePixelIndex + 1] + texturePixels[texturePixelIndex + 2]) / 3;
      
      // 根据亮度计算偏移量：亮度在0-255之间，转成-0.5到0.5的范围，再乘以强度
      const offsetX = (brightness / 255 - 0.5) * strength;
      const offsetY = (brightness / 255 - 0.5) * strength;
      
      // 获取偏移后的logo像素位置，防止超出边界
      const sourceX = Math.max(0, Math.min(targetImg.width - 1, x + offsetX));
      const sourceY = Math.max(0, Math.min(targetImg.height - 1, y + offsetY));
      const sourcePixelIndex = (Math.floor(sourceY) * targetImg.width + Math.floor(sourceX)) * 4;
      
      // 替换当前像素为偏移后的像素
      targetPixels[pixelIndex] = targetPixels[sourcePixelIndex];     // R通道
      targetPixels[pixelIndex + 1] = targetPixels[sourcePixelIndex + 1]; // G通道
      targetPixels[pixelIndex + 2] = targetPixels[sourcePixelIndex + 2]; // B通道
      // Alpha通道保留原logo的透明度
    }
  }
  
  // 把处理后的像素放回Canvas
  ctx.putImageData(targetData, 0, 0);
}

4. 添加纹理叠加和阴影效果 #

位移映射之后，再叠加一层纹理，用混合模式让logo和纹理融合，再加上阴影增强质感：

function addTextureAndShadow(ctx, textureImg) {
  // 添加阴影效果
  ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
  ctx.shadowBlur = 10;
  ctx.shadowOffsetX = 5;
  ctx.shadowOffsetY = 5;
  
  // 叠加纹理，用multiply混合模式（模拟纸张的质感，颜色会融合）
  ctx.globalCompositeOperation = 'multiply';
  ctx.drawImage(textureImg, 0, 0, ctx.canvas.width, ctx.canvas.height);
  
  // 恢复默认的混合模式，避免影响后续绘制
  ctx.globalCompositeOperation = 'source-over';
}

优化和进阶建议 #

• 用WebGL提升性能：如果需要实时交互（比如用户拖动logo、切换纹理），Canvas 2D的像素遍历会有点卡，换成WebGL的着色器处理位移映射，GPU加速会流畅很多。
• 调整混合模式：除了multiply，还可以试试overlay、screen这些混合模式，会有不同的质感，适合不同的纹理。
• 预缓存纹理：把常用的纹理图提前加载缓存，避免每次切换都重新加载。
• 控制位移强度：根据纹理的凹凸程度调整strength值，比如纸张纹理用5-10，布料纹理可以用10-15，避免变形过度。

关于Teespring的实现 #

你猜的没错，这类平台确实可能用服务端生成（比如Node.js的Canvas库或者Python的PIL），因为服务端生成的图片可以直接保存，方便用户下载或打印。但前端Canvas完全能实现实时预览的效果，适合做交互性的产品预览功能。

内容的提问来源于stack exchange，提问作者gusmantap