需求背景：
在小程序上生成海報圖，但在保存圖片時，只能保存其中的小程序碼圖片，保存下來的圖片過于單調，且無法確認該圖片的作用性，所以需要調整為保存一整張海報圖。

海報效果圖：

需求分析：
在海報圖中，背景圖、頭像、文字、還有小程序碼都是各自獨立的部分，我們需要把這些圖片合并起來，然后輸出為一整張圖片，這樣就可以直接長按保存圖片了。

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

在前端合成，使用畫布canvas，把各個元素“畫”進去；

在后端合成，使用插件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 將圖片切成圓角

總結

以上是生活随笔為你收集整理的PHP使用Grafika合成图片，生成海报图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。