PHP小程式二維碼的獲取,以及改變小程式二維碼中間logo為使用者頭像
阿新 • • 發佈:2018-11-22
【1.背景知識】
1.小程式二維碼中間是空白部分。而有時候需求方希望,中間logo部分是使用者頭像或者其他圖片
2.微信介面給返回的二維碼是資料流。直接輸出瀏覽器是亂碼。想在瀏覽器上顯示可以這樣:
$resWxQrCode = '微信返回的二維碼資料流';
header("Content-Type: image/jpg; charset=utf-8");
echo($resWxQrCode);exit;
或者這樣base64一下:
$resWxQrCode = '微信返回的二維碼資料流'; echo "<image src='data:image/png;base64,".base64_encode($resWxQrCode)."'>";
3.場景。
①如果多個場景分享的都是一個二維碼,那可以從微信獲取到二維碼之後,儲存圖片檔案存在伺服器上,以後拿著圖片url直接用。
②如果分享的二維碼都不一樣,那麼個人認為,建議使用base64的資料流格式,這樣伺服器不用儲存具體的檔案了。這篇文章是基於這一個場景的。
【2.擴充套件閱讀】
【3.程式碼】
以下程式碼不需要在伺服器上生成任何檔案。直接複製,填參可執行。
<?php /** * 步驟: * 1.獲得微信返回的二維碼圖片資料流 * 2.把使用者頭像變成圓形,覆蓋到小程式中間的空白部分 * 3.把二維碼與圓形頭像結合 * 3.返回客戶端,或者輸出顯示 */ $appid = '你的APPID';//appid $appsecret = '你的APPSECRET';//app secret $send = array('scene'=>123, 'path' =>'pages/question/question', 'width'=>'100');//傳給微信的引數 $avatarUrl = 'http://cms-bucket.nosdn.127.net/2018/05/28/a1a44ffdc2d24f928c1860d4fbf54703.jpeg?imageView&thumbnail=550x0';//使用者頭像url //請求微信,獲取小程式二維碼 $resWxQrCode = getWxQrcode($send,$appid,$appsecret); //使用者頭像圖片變圓形 $avatar = file_get_contents($avatarUrl); $logo = yuanImg($avatar);//返回的是圖片資料流 //二維碼與頭像結合 $sharePic = qrcodeWithLogo($resWxQrCode,$logo); //這裡為了看效果,直接輸出圖片了 echo "<image src='data:image/png;base64,".base64_encode($sharePic)."'>"; /******************************* 下面是功能函式 **********************************/ /** * curl方法 * @param $url 請求url * @param $data 傳送資料,有資料時使用post傳遞 * @param type 為2時,設定json傳遞 */ function curlRequest($url,$data = null , $type = 1){ $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE); if (!empty($data)){ curl_setopt($curl, CURLOPT_POST, 1); curl_setopt($curl, CURLOPT_POSTFIELDS, $data); if($type == 2){ curl_setopt($curl, CURLOPT_HTTPHEADER, array('Content-Type: application/json','Content-Length: ' . strlen($data))); } } curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, 10); $output = curl_exec($curl); curl_close($curl); return $output; } /** * 請求微信伺服器,生成二維碼 * @param $data array('scene'=>$setid, 'path' =>'pages/question/question', 'width'=>'100'); */ function getWxQrcode($data,$appid,$appsecret){ //get access_token $wxTokenUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$appid."&secret=".$appsecret; $access_token = curlRequest($wxTokenUrl); $access_token = json_decode($access_token,true); if($access_token['errcode']) var_dump(['code'=>2004,'msg'=>'請求微信伺服器access_token失敗']); //get qrcode 微信B介面 $wxQrcodeUrl = "https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=".$access_token['access_token']; $data = json_encode($data,JSON_UNESCAPED_UNICODE); return curlRequest($wxQrcodeUrl,$data); } /** * 在二維碼的中間區域鑲嵌圖片 * @param $QR 二維碼資料流。比如file_get_contents(imageurl)返回的東東,或者微信給返回的東東 * @param $logo 中間顯示圖片的資料流。比如file_get_contents(imageurl)返回的東東 * @return 返回圖片資料流 */ function qrcodeWithLogo($QR,$logo){ $QR = imagecreatefromstring ($QR); $logo = imagecreatefromstring ($logo); $QR_width = imagesx ( $QR );//二維碼圖片寬度 $QR_height = imagesy ( $QR );//二維碼圖片高度 $logo_width = imagesx ( $logo );//logo圖片寬度 $logo_height = imagesy ( $logo );//logo圖片高度 $logo_qr_width = $QR_width / 2.2;//組合之後logo的寬度(佔二維碼的1/2.2) $scale = $logo_width / $logo_qr_width;//logo的寬度縮放比(本身寬度/組合後的寬度) $logo_qr_height = $logo_height / $scale;//組合之後logo的高度 $from_width = ($QR_width - $logo_qr_width) / 2;//組合之後logo左上角所在座標點 /** * 重新組合圖片並調整大小 * imagecopyresampled() 將一幅影象(源圖象)中的一塊正方形區域拷貝到另一個影象中 */ imagecopyresampled ( $QR, $logo, $from_width, $from_width, 0, 0, $logo_qr_width, $logo_qr_height, $logo_width, $logo_height ); /** * 如果想要直接輸出圖片,應該先設header。header("Content-Type: image/png; charset=utf-8"); * 並且去掉快取區函式 */ //獲取輸出快取,否則imagepng會把圖片輸出到瀏覽器 ob_start(); imagepng ( $QR ); imagedestroy($QR); imagedestroy($logo); $contents = ob_get_contents(); ob_end_clean(); return $contents; } /** * 剪下圖片為圓形 * @param $picture 圖片資料流 比如file_get_contents(imageurl)返回的東東 * @return 圖片資料流 */ function yuanImg($picture) { $src_img = imagecreatefromstring($picture); $w = imagesx($src_img); $h = imagesy($src_img); $w = min($w, $h); $h = $w; $img = imagecreatetruecolor($w, $h); //這一句一定要有 imagesavealpha($img, true); //拾取一個完全透明的顏色,最後一個引數127為全透明 $bg = imagecolorallocatealpha($img, 255, 255, 255, 127); imagefill($img, 0, 0, $bg); $r = $w / 2; //圓半徑 $y_x = $r; //圓心X座標 $y_y = $r; //圓心Y座標 for ($x = 0; $x < $w; $x++) { for ($y = 0; $y < $h; $y++) { $rgbColor = imagecolorat($src_img, $x, $y); if (((($x - $r) * ($x - $r) + ($y - $r) * ($y - $r)) < ($r * $r))) { imagesetpixel($img, $x, $y, $rgbColor); } } } /** * 如果想要直接輸出圖片,應該先設header。header("Content-Type: image/png; charset=utf-8"); * 並且去掉快取區函式 */ //獲取輸出快取,否則imagepng會把圖片輸出到瀏覽器 ob_start(); imagepng ( $img ); imagedestroy($img); $contents = ob_get_contents(); ob_end_clean(); return $contents; } ?>
【4.效果】
把這兩張圖片
變成