Laravel上传图片合并到T恤样机并适配样机形状的解决方案求助

方案1：修复XAMPP环境Imagick安装问题（推荐，后端直接处理） #

90%以上的Windows XAMPP环境Imagick安装失败都是版本不匹配导致，按以下步骤可完成安装：

• 新建phpinfo.php文件写入<?php phpinfo(); ?>，访问后获取三个核心参数：PHP版本号、架构（x64/x86）、线程安全版本（TS/NTS）
• 下载对应版本的php_imagick.dll扩展文件和ImageMagick官方运行库
• 将php_imagick.dll放入XAMPP安装目录下的php/ext文件夹
• 打开php/php.ini文件，添加一行extension=imagick后保存
• 将ImageMagick运行库内的所有dll文件复制到apache/bin目录
• 重启Apache后重新访问phpinfo.php，出现imagick扩展信息即为安装成功

安装完成后使用Imagick的透视变形能力即可实现形状适配，参考代码如下：

Route::post('/upload', function (Request $request) {
    $uploadedFile = $request->file('image1');
    $mockupPath = public_path('img/tshirt.png');

    // 提前测量T恤样机印花区域的4个坐标，顺序为：左上角、右上角、右下角、左下角
    $targetPoints = [
        80, 120,  
        360, 125, 
        355, 380, 
        75, 375   
    ];

    // 处理上传图片并执行透视变形
    $uploadedImagick = new Imagick($uploadedFile->getPathname());
    $uploadedImagick->resizeImage(280, 280, Imagick::FILTER_LANCZOS, 1, true);
    $w = $uploadedImagick->getImageWidth();
    $h = $uploadedImagick->getImageHeight();
    $sourcePoints = [0, 0, $w, 0, $w, $h, 0, $h];
    $uploadedImagick->distortImage(Imagick::DISTORTION_PERSPECTIVE, array_merge($sourcePoints, $targetPoints), true);

    // 加载T恤样机合并输出
    $mockupImagick = new Imagick($mockupPath);
    $mockupImagick->resizeImage(450, 0, Imagick::FILTER_LANCZOS, 1);
    $mockupImagick->compositeImage($uploadedImagick, Imagick::COMPOSITE_OVER, 0, 0);

    header('Content-Type: image/jpeg');
    echo $mockupImagick;
    exit;
});

方案2：前端Canvas预变形方案（无需安装PHP扩展） #

如果不想折腾服务端扩展，可以用前端方式处理变形后再提交给后端：

• 引入前端Canvas处理库fabric.js，在上传页面同时渲染T恤样机和用户上传的图片
• 给上传的图片添加四个可拖拽控制点，调整到完全匹配T恤印花区域的形状
• 调用Canvas的toDataURL()方法导出合成后的图片Base64编码，提交给后端
• 后端仅需对Base64编码做解码保存即可，无需做任何图片变形处理，兼容性更强，适合跨环境开发。

方案3：云服务图片处理方案 #

如果不想自己编写变形逻辑，可以使用云存储服务商的图片处理能力：

• 把T恤样机和用户上传的图片都上传到云存储
• 调用云存储自带的透视变形接口，传入预设的四个角坐标参数，即可直接生成适配好的样机图
• 无需本地安装任何扩展，仅需调用接口即可完成处理，适合生产环境使用。

内容的提问来源于stack exchange，提问作者Amjad I. Bawarshi