电商产品定制预览功能实现咨询（含订单邮件嵌入需求）

一、前端实时预览保留原有方案 #

• 继续用CSS分层+JS克隆叠加实现实时预览：杯垫底图做底层，用户定制的图案、滤镜效果作为上层div叠加，点击放大用transform: scale()配合模态框实现，全程前端处理不占用服务器资源。
• 核心注意点：用户提交订单时，要把定制参数（比如图案路径、滤镜数值、图案位置/缩放比例）通过表单传到后端，而非直接提交DOM结构。

二、服务器端静态图片生成（低资源方案） #

1. PHP GD库轻量合成 #

GD是PHP默认扩展（绝大多数主机已开启），资源消耗极低，适配简单的图片合成需求：

• 实现步骤：
  1. 后端接收前端传的定制参数：底图路径、用户定制图案路径、滤镜参数、图案位置/缩放比例。
  2. 用GD加载并处理图片：

     // 加载杯垫底图模板
     $baseImg = imagecreatefromjpeg(get_stylesheet_directory() . '/assets/coaster-base.jpg');
     // 加载用户上传的定制图案
     $customImg = imagecreatefrompng($_POST['custom_pattern_url']);
     
     // 应用滤镜（以亮度调整为例）
     imagefilter($baseImg, IMG_FILTER_BRIGHTNESS, $_POST['brightness']);
     
     // 计算居中叠加的位置
     $baseWidth = imagesx($baseImg);
     $baseHeight = imagesy($baseImg);
     $customWidth = imagesx($customImg);
     $customHeight = imagesy($customImg);
     $posX = ($baseWidth - $customWidth) / 2;
     $posY = ($baseHeight - $customHeight) / 2;
     
     // 叠加带透明层的定制图案
     imagecopy($baseImg, $customImg, $posX, $posY, 0, 0, $customWidth, $customHeight);
     

  3. 将合成后的图片保存到服务器指定目录（如wp-content/uploads/custom-previews/），同时把图片URL关联到对应订单。
• 优势：无额外依赖，资源占用少，适配多数简单定制场景。

2. 借助WordPress内置函数简化开发 #

WordPress封装的图片处理函数可减少重复代码，兼容性更强：

$editor = wp_get_image_editor($baseImgPath);
if (!is_wp_error($editor)) {
    $editor->resize(null, 500, false); // 统一预览图尺寸
    $editor->filter('brightness', $_POST['brightness']);
    // 叠加定制图案（需先将图案保存为临时文件）
    $editor->insert($customImgPath, array('top' => $posY, 'left' => $posX));
    $savedPath = $editor->save($saveDir . '/order-' . $orderId . '-preview.jpg');
}

三、邮件嵌入预览图的落地 #

直接在WooCommerce订单邮件模板（如customer-completed-order.php）中插入生成的静态图片：

// 获取订单关联的预览图URL
$previewUrl = get_post_meta($order->get_id(), 'custom_coaster_preview', true);
if ($previewUrl) {
    echo '<img src="' . esc_url($previewUrl) . '" alt="定制杯垫预览" style="max-width: 300px;">';
}

静态图片完全规避邮件客户端的CSS兼容问题，所有邮箱都能正常显示。

四、资源优化细节 #

• 限制预览图尺寸：生成500x500px左右的图片，兼顾清晰度与文件大小。
• 复用缓存图片：同一定制参数重复提交时，直接调用已生成的图片，避免重复计算。
• 异步生成处理：若定制逻辑复杂（多图层叠加），用WordPress的wp_schedule_single_event()异步执行图片生成，不影响订单提交速度。

内容的提问来源于stack exchange，提问作者Yasin ÇABUK