//業務需求：我們需要一個微信小程式碼，但是是需要提供給別人掃碼的但是隻有一個純粹的小程式碼是不好看的，所以需要推廣的海報圖片。再結合文字
最終效果
準備工作 1、需要海報的底圖 2、小程式碼的圖片
程式碼部分結合YII2但不影響使用
完整過程
第一步：生成小程式碼圖片
第二步：縮放小程式碼的圖片大小 （如果尺寸符合海報大小可省略） 280-1280px
第三步：將縮放後的小程式圖片合成到背景圖片
第四步:合成文字資訊
第一步：生成小程式碼圖片 （我使用的場景是無限制小程式碼code地址 三種自行選擇）
//微信小程式 小程式碼 public static function getWeChatSmallProgramCode($scene) { $AccessToken = self::getAccessToken(); $url = "https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=" . $AccessToken; $postData = [ 'scene' => $scene, 'page' => 'pages/index/index', 'width'=>930 ]; $postData = json_encode($postData); $contentData = self::sendPost($url, $postData); return $contentData; //如果圖片大小符合這開啟base64點陣圖片地址也可以完成圖片的合併合文字的合併 // return self::base64UrlCode($contentData, 'image/png'); } protected static function sendPost($url, $post_data) { $options = array( 'http' => array( 'method' => 'POST', 'header' => 'Content-type:application/json', //header 需要設定為 JSON 'content' => $post_data, 'timeout' => 60 //超時時間 ) ); $context = stream_context_create($options); return file_get_contents($url, false, $context); } //二進位制轉圖片image/png public static function base64UrlCode($contents, $mime) { $base64 = base64_encode($contents); return ('data:' . $mime . ';base64,' . $base64); }
第二步：縮放小程式碼的圖片大小
/** * 縮放圖片尺寸 * @param $img_path string 圖片地址 * @param $new_width * @param $new_height * @param $new_img_path string 新的圖片地址 */ public static function picZoom($img_path,$new_width,$new_height,$new_img_path) { //獲取尺寸 list($width, $height, $img_type, $attr) = getimagesize($img_path); $imageinfo = [ 'width' => $width, 'height' => $height, 'type' => image_type_to_extension($img_type, false), 'attr' => $attr ]; $fun = "imagecreatefrom" . $imageinfo['type']; $image = $fun($img_path); //建立新的幕布 $image_thump = imagecreatetruecolor($new_width, $new_height); //複製原始檔 imagecopyresampled($image_thump, $image, 0, 0, 0, 0, $new_width, $new_height, $imageinfo['width'], $imageinfo['height']); imagedestroy($image); $image = $image_thump; $func = 'image' . $imageinfo['type']; $func($image, $new_img_path); }
第三步：將縮放後的小程式圖片合成到背景圖片
/** * 圖片合併 * 將源圖片覆蓋到目標圖片上 * @param string $dstPath 目標圖片路徑 背景圖 * @param string $srcPath 源圖片路徑 內容圖 * @param int $dstX 源圖片覆蓋到目標的X軸座標 * @param int $dstY 源圖片覆蓋到目標的Y軸座標 * @param int $srcX * @param int $srcY * @param int $pct 透明度 * @param string $filename 輸出的檔名，為空則直接在瀏覽器上輸出顯示 * @return string $filename 合併後的檔名 */ public static function picMerge($dstPath, $srcPath, $dstX = 0, $dstY = 0, $srcX = 0, $srcY = 0, $pct = 100, $filename = '') { //建立圖片的例項 $dst = imagecreatefromstring(file_get_contents($dstPath)); $src = imagecreatefromstring(file_get_contents($srcPath)); //獲取水印圖片的寬高 list($src_w, $src_h) = getimagesize($srcPath); //將水印圖片複製到目標圖片上，最後個引數50是設定透明度，這裡實現半透明效果 // imagecopymerge($dst, $src, 80, 125, 0, 0, $src_w, $src_h, 100); imagecopymerge($dst, $src, $dstX, $dstY, $srcX, $srcY, $src_w, $src_h, $pct); //如果水印圖片本身帶透明色，則使用imagecopy方法 //imagecopy($dst, $src, 10, 10, 0, 0, $src_w, $src_h); //輸出圖片 list($dst_w, $dst_h, $dst_type) = getimagesize($dstPath); switch ($dst_type) { case 1://GIF if (!$filename) { header('Content-Type: image/gif'); imagegif($dst); } else { imagegif($dst, $filename); } break; case 2://JPG if (!$filename) { header('Content-Type: image/jpeg'); imagejpeg($dst); } else { imagejpeg($dst, $filename); } break; case 3://PNG if (!$filename) { header('Content-Type: image/png'); imagepng($dst); } else { imagepng($dst, $filename); } break; default: break; } imagedestroy($dst); imagedestroy($src); }
第四步:合成文字資訊
/** * 新增文字到圖片上 * @param $dstPath string 目標圖片 * @param $fontPath string 字型路徑 * @param $fontSize string 字型大小 * @param $text string 文字內容 * @param $dstY string 文字Y座標值 * @param string $filename 輸出檔名，為空則在瀏覽器上直接輸出顯示 * @return string 返回檔名 */ public static function addFontToPic($dstPath, $fontPath, $fontSize, $text, $dstY, $filename = '') { ob_end_clean(); //建立圖片的例項 $dst = imagecreatefromstring(file_get_contents($dstPath)); //打上文字 $fontColor = imagecolorallocate($dst, 255, 255, 255);//字型顏色 $width = imagesx($dst); $height = imagesy($dst); $fontBox = imagettfbbox($fontSize, 0, $fontPath, $text);//文字水平居中實質 imagettftext($dst, $fontSize, 0, ceil(($width - $fontBox[2]) / 2), $dstY, $fontColor, $fontPath, $text); //輸出圖片 list($dst_w, $dst_h, $dst_type) = getimagesize($dstPath); switch ($dst_type) { case 1://GIF if (!$filename) { header('Content-Type: image/gif'); imagegif($dst); } else { imagegif($dst, $filename); } break; case 2://JPG if (!$filename) { header('Content-Type: image/jpeg'); imagejpeg($dst); } else { imagejpeg($dst, $filename); } break; case 3://PNG if (!$filename) { header('Content-Type: image/png'); imagepng($dst); } else { imagepng($dst, $filename); } break; default: break; } imagedestroy($dst); return $filename; }
外部的呼叫
/** * 根據店鋪id 和名稱 合成A5 圖片小程式圖片 * @param $shop_id * @param $shop_name * @return array */ public static function generateWeChatAppletImage($shop_id, $shop_name) { //1 生成小程式碼 //2 合成小程式碼到背景圖片 $sceneStr = '?shop_id=' . $shop_id; $weChatAppImgBaseData = WxTools::getWeChatSmallProgramCode($sceneStr); $weChatAppImgPath = './weChatAppImg/shop_code_' . $shop_id . '.jpg'; file_put_contents($weChatAppImgPath, $weChatAppImgBaseData); //合併到背景圖片中 $beiJinImgPath = './weChatAppImg/weChatBJ.jpg'; $mergeImgFile = './weChatAppImg/shop_mini_program' . $shop_id . '.jpg'; GenerateCodeImg::picMerge($beiJinImgPath, $weChatAppImgPath, 408, 714, $srcX = 0, $srcY = 0, $pct = 100, $mergeImgFile); //3 合成文字 $fontPath = './plus/fonts/SourceHanSansCN-Bold.ttf'; $fontSize = 40; $dstY = 640; GenerateCodeImg::addFontToPic($mergeImgFile, $fontPath, $fontSize, $shop_name, $dstY, $mergeImgFile); $weChatCodeImgUrL = \Yii::$app->request->hostInfo . '/weChatAppImg/shop_code_' . $shop_id . '.jpg'; $weChatAppImgUrl = \Yii::$app->request->hostInfo . '/weChatAppImg/shop_mini_program' . $shop_id . '.jpg'; return [ 'weChatCodeImgUrL' => $weChatCodeImgUrL, 'weChatAppImgUrl' => $weChatAppImgUrl, ]; }
常見的問題
1文字合併的時候出現亂碼？
第一檢測一下字型是否是正常tff字型 如果不知道去C://windows/Fonts 隨便找一個 微軟雅黑都行
2、英文阿拉布數字正常 中文亂碼
$text = mb_convert_encoding("呵呵呵","UTF-8","GBK");
$text = mb_convert_encoding("呵呵呵","html-entities","UTF-8");
設定看看