需求背景：
在小程序上生成海报图，但在保存图片时，只能保存其中的小程序码图片，保存下来的图片过于单调，且无法确认该图片的作用性，所以需要调整为保存一整张海报图。

海报效果图：

需求分析：
在海报图中，背景图、头像、文字、还有小程序码都是各自独立的部分，我们需要把这些图片合并起来，然后输出为一整张图片，这样就可以直接长按保存图片了。

合并图片可以用以下方法：

1. 在前端合成，使用画布canvas，把各个元素“画”进去；
2. 在后端合成，使用插件Grafika，把各个组成部分合并在一起；

因为当前是在小程序开发这个需求，考虑到未来可能会替换海报上的一些文字、图片等情况，而每次修改小程序代码都需要提交版本审核，耗时耗力，所以决定在后端进行图片合成，输出图片到前端。

注意：若背景图片有透明的部分，处理过后，透明部分会变成黑色，在Grafika中暂未找到能合并透明图片的方法，感觉有点坑，不过有搜到说可以直接用gd来合成，有空再研究研究吧。（目前的解决方法是换张白色背景的图片）

使用Grafika

安装：

composer require kosinix/grafika:dev-master --prefer-dist

生成方法

function create($slogan, $avatar, $qr){// 背景图片$bg_img = 'images/qr_code_bg.png';// 实例化图像编辑器$editor = Grafika::createEditor(['Gd']);// 打开海报背景图$editor->open($backdropImage, $bg_img);$bgWidth = $backdropImage->getWidth();// 生成圆形用户头像$avatarUrlName = 'temp/avatar.png';$this->circular($avatar_url, $avatarUrlName);// 打开用户头像$editor->open($avatarImage, $avatarUrlName);// 重设用户头像宽高$avatarWidth = 310;$editor->resizeExact($avatarImage, $avatarWidth, $avatarWidth);// 用户头像添加到背景图$avatarX = 401;$avatarY = 36;$editor->blend($backdropImage, $avatarImage, 'normal', 1.0, 'top-left', $avatarX, $avatarY);// 打开小程序码$editor->open($qrcodeImage, $qr);// 重设小程序码宽高$qrcodeWidth = 430;$editor->resizeExact($qrcodeImage, $qrcodeWidth, $qrcodeWidth);// 小程序码添加到背景图$qrcodeX = 340;$qrcodeY = 720;$editor->blend($backdropImage, $qrcodeImage, 'normal', 1.0, 'top-left', $qrcodeX, $qrcodeY);// 处理文字$color = new Color('#FFFFFF');$fontPath = Grafika::fontsDir() . '/st-heiti-light.ttc';$fontSize = 50;// 处理用户昵称$nicknameBox = $this->get_text_box($nickname, $fontSize, $fontPath);$fontY = 410;$fontX = ($bgWidth / 2) - ($nicknameBox[0] / 2);$editor->text($backdropImage, $nickname, $fontSize, $fontX, $fontY, $color, $fontPath);$str1 = "邀请您注册成为分销员";$strBox1 = $this->get_text_box($str1, $fontSize, $fontPath);$str1x = ($bgWidth / 2) - ($strBox1[0] / 2);$editor->text($backdropImage, "邀请您注册成为分销员", $fontSize, $str1x, $fontY + 100, $color, $fontPath);$str2 = "一起赚佣金";$strBox2 = $this->get_text_box($str2, $fontSize, $fontPath);$str2x = ($bgWidth / 2) - ($strBox2[0] / 2);$editor->text($backdropImage,'一起赚佣金', $fontSize, $str2x, 1220, $color, $fontPath);// 保存图片$editor->save($backdropImage, $qr);
}

• 使用open()打开图片并获得该图片对象，使用blend()依次合并图片。
• 在处理头像图片时，需要先指定临时的头像文件，便于后续使用。
• 添加文字到图片上时text()，Grafika默认的字体不兼容中文，所以需要指定字体文件路径。

// 生成圆形用户头像
function circular($imgpath, $saveName = ''){$ext = pathinfo($imgpath);$srcImg = null;switch ($ext['extension']) {case 'jpg':case 'jpeg':$srcImg = imagecreatefromjpeg($imgpath);break;case 'png':$srcImg = imagecreatefrompng($imgpath);break;}// 获取图片尺寸$w = imagesx($srcImg);$h = imagesy($srcImg);// 设定图片宽高（正方形）$w = $h = min($w, $h);$newImg = imagecreatetruecolor($w, $h);// 必须imagesavealpha($newImg, true);// 拾取一个完全透明的颜色,最后一个参数127为全透明$bg = imagecolorallocatealpha($newImg, 255, 255, 255, 127);imagefill($newImg, 0, 0, $bg);$r = $w / 2; //圆半径for ($x = 0; $x < $w; $x++) {for ($y = 0; $y < $h; $y++) {$rgbColor = imagecolorat($srcImg, $x, $y);if (((($x - $r) * ($x - $r) + ($y - $r) * ($y - $r)) < ($r * $r))) {imagesetpixel($newImg, $x, $y, $rgbColor);}}}// 输出图片到文件imagepng($newImg, $saveName);// 释放空间imagedestroy($srcImg);imagedestroy($newImg);
}

• 方法的大概思路是：创建一个正方形的透明图片，通过循环，把透明图片上的圆形部分的像素点画上（替换）头像图片对应的像素点，此时得到的图片就是一个圆形的头像图片。
• 方法中使用了imagecreatetruecolor()，创建真彩图像。此时需要保证使用的图片位数>24（图片文件>属性>详细信息>位深度），否则无法渲染图像成功，结果得到的图片是黑色的。
• 除了使用php内置函数实现圆形图片外，还可以安装Imagick扩展，更方便。

// 获取字符串宽高
function get_text_box($text, $size, $font){$point = imagettfbbox($size, 0, $font, $text);$width = $point[4] - $point[6];$height = $point[1] - $point[7];return [$width, $height];
}

• 使用imagettfbbox()来获取字符串所在的坐标轴，从而可以拿到字符串文本框的宽高，把字符串居中合并到背景图上。

因为目前无法生成用于前端展示的透明背景的图片，所以改成前端展示的还是一个弹窗，弹窗上添加一个长按事件，触发下载合成海报图片到用户相册

// 长按点击事件
downloadQrCode(){wx.showLoading({title: "加载中",mask: true});if(this.data.download_qr_code){this.downloadSaveImage(this.data.download_qr_code);}else{        App._get("user/download_agent_qr_code", {}, (result) => {if(!result.res){wx.showToast({ icon: 'none', title: result.msg });return false;}this.setData({download_qr_code: result.data.url});this.downloadSaveImage(result.data.url);}, null, (res) => {wx.hideLoading();});}
},
/*** 下载图片，并保存到用户相册* @param {string} url 图片地址*/
downloadSaveImage(url){wx.getImageInfo({src: url,success: function (ret) {var path = ret.path;wx.saveImageToPhotosAlbum({filePath: path,success(result) {wx.hideLoading();wx.showToast({ icon: 'none', title: "已保存图片到相册" });},fail(result) {wx.hideLoading();if(result.errMsg.indexOf("saveImageToPhotosAlbum:fail auth deny") !== -1){wx.showToast({ icon: 'none', title: "请允许小程序“保存图片到相册”" });}console.log(result)}});},fail: function(result){wx.hideLoading();console.log(result)}});
},

• App._get() 为发送get请求公共方法

参考：
Grafika官方文档
PHP 将图片切成圆角