??作者簡介，黑夜開發(fā)者，CSDN領(lǐng)軍人物，全棧領(lǐng)域優(yōu)質(zhì)創(chuàng)作者?，阿里云社區(qū)專家博主，2023年6月csdn上海賽道top4。
??數(shù)年電商行業(yè)從業(yè)經(jīng)驗，歷任核心研發(fā)工程師，項目技術(shù)負責(zé)人。
??本文已收錄于專欄：100個JavaScript的小應(yīng)用，微信公眾號開發(fā)。
??歡迎 ??點贊?評論?收藏
??一、前言
中秋節(jié)是我國的重要傳統(tǒng)節(jié)日，今年直接和國慶節(jié)湊到了一起，放一個8天的小長假，是不是很興奮呢。為了增加節(jié)日氣氛，許多人會更換自己的社交媒體頭像，如微信頭像。使用與中秋或者國慶主題相關(guān)的圖片。本篇博文將介紹如何使用PHP通過微信公眾號獲取用戶頭像，并且將頭像傳遞給JavaScript開發(fā)一個實現(xiàn)換中秋頭像的功能。
通過本篇文章的閱讀，您將獲取如下的實戰(zhàn)知識：
- 熟悉了解微信公眾號的基本開發(fā)流程。
- 學(xué)習(xí)到微信公眾號網(wǎng)頁授權(quán)獲取用戶基本信息這個板塊的開發(fā)。
- 基本掌握html，css等網(wǎng)頁前端的組成與基本開發(fā)流程。
- Javascript, canvas用于圖片合成，頭像生成的場景使用。
- 學(xué)習(xí)到一部分PHP相關(guān)的后端知識
??二、開發(fā)流程概述
首先我們得通過微信公眾號開發(fā)獲取到用戶的頭像，然后我們需要準(zhǔn)備一些素材。這個圖片素材需要是鏤空圖 PNG，用來鑲嵌在用的真實頭像上面。接下來，我們需要創(chuàng)建一個HTML頁面，并在其中引入一個JavaScript文件。我們將使用JavaScript來操作DOM元素和Canvas元素，實現(xiàn)換裝功能。如果您熟悉HTML和JavaScript的基本知識那就更好了。
??三、配置微信公眾號
??3.1 AppId和AppSecret獲取
AppId和AppSecret得先獲取到，請看下圖，記得一定要保存好AppSecret。
??3.1 添加網(wǎng)頁授權(quán)域名
網(wǎng)頁授權(quán)域名是必須要添加的，否則公眾號是不回允許在沒有通過的域名下面進行授權(quán)。如果你遇到了一些問題，可以排查一下是不是這個地方的配置。在公眾號設(shè)置>功能設(shè)置里面添加，加域名就行。
這里可能要傳文件驗證，如果傳了文件還是有問題，可以檢查一下文件權(quán)限啥的，或者看看能不能手動訪問。
??3.3 白名單設(shè)置
白名單主要是添加自己服務(wù)器所在的IP地址到公眾號后臺，這樣只有指定的服務(wù)器才允許與公眾號接口通信。如果白名單沒有設(shè)置，獲取access_token的時候可能會報如下錯誤。
{"errcode":40164,"errmsg":"invalid ip xxx ipv6 ::ffff:xxxx, not in whitelist rid: 6503251e-14033bf0-774d3d3e"}
在安全中心>IP白名單處進行設(shè)置，白名單設(shè)置了可能會有短暫的延時生效，如果當(dāng)時不能訪問，可以等會再試一下。
??四、功能開發(fā)
??4.1 獲取用戶微信頭像
這個部分主要通過PHP進行開發(fā)，核心是如何與公眾號進行API交互。
??4.1.1 引導(dǎo)用戶進入授權(quán)頁面
構(gòu)建一個URL，用戶點擊后將跳轉(zhuǎn)到微信授權(quán)頁面，同時攜帶著您設(shè)置的回調(diào)URL。
$redirect_uri = urlencode('http://your-domain.com/callback.php'); // 回調(diào)URL，需要urlencode
$appid = 'Your Appid'; // 公眾號AppID
$scope = 'snsapi_userinfo'; // snsapi_base或snsapi_userinfo
$state = 'STATE'; // 自定義參數(shù)，可不填
$auth_url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid={$appid}&redirect_uri={$redirect_uri}&response_type=code&scope={$scope}&state={$state}#wechat_redirect";
header('Location: ' . $auth_url); // 跳轉(zhuǎn)到授權(quán)頁面
在到達callback.php之前，如果已經(jīng)關(guān)注了公眾號的用戶，可以直接獲取到用戶頭像，否則則會提示授權(quán)，用戶同意之后才能獲取頭像，這便是網(wǎng)頁授權(quán)獲取用戶頭像的核心功能。授權(quán)的情況可以見下圖真實案例。
??4.1.2 獲取授權(quán)code并換取access_token
用戶同意授權(quán)后，微信會重定向到您設(shè)置的回調(diào)URL，并攜帶一個code參數(shù)。在回調(diào)頁面（callback.php）中獲取到該code，并使用它來換取access_token和openid。
$code = $_GET["code"]; // 授權(quán)code
$appid = 'Your Appid'; // 公眾號AppID
$secret = 'Your App Secret'; // 公眾號App Secret
// 通過code換取access_token
$token_url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid={$appid}&secret={$secret}&code={$code}&grant_type=authorization_code";
$token_data = json_decode(file_get_contents($token_url), true);
$access_token = $token_data['access_token']; // 獲取到的access_token
$openid = $token_data['openid']; // 用戶的openid
??4.1.3 獲取用戶基本信息
使用獲取到的access_token和openid，可以調(diào)用以下API來獲取用戶基本信息：
$userinfo_url = "https://api.weixin.qq.com/sns/userinfo?access_token={$access_token}&openid={$openid}&lang=zh_CN";
$userinfo_data = json_decode(file_get_contents($userinfo_url), true);
$nickname = $userinfo_data['nickname']; // 用戶昵稱
$headimgurl = $userinfo_data['headimgurl']; // 用戶頭像鏈接
// 可以根據(jù)需要獲取其他用戶信息字段
header('Location: https://www.xxx.wang/index.html?avatar_url=' . $headimgurl
上面代碼的最后一句是重點，將獲取到的微信頭像傳遞給index.html，后面javascript會用到。
??4.2 JavaScript實現(xiàn)用戶換頭像
??4.2.1 創(chuàng)建HTML結(jié)構(gòu)(index.php)
在HTML文件中，我們可以使用<input type="file">元素來讓用戶選擇要上傳的頭像文件。同時，我們還需要一個<canvas></canvas>元素來繪制新的頭像。
<!DOCTYPE html>
<html>
<head>
<title>頭像換裝</title>
</head>
<body>
<h1>頭像換裝</h1>
<div id="avatar">
<img src="./img/head0.png" alt="0" id="avatar_template" style="z-index: 1000;pointer-events: none;">
<img src="" alt="" id="avatar_img" class="pinch-zoom">
</div>
<p class="hide">
<canvas style="width:500px;height:500px;" id="cvs"></canvas>
</p>
<div style="display: none;" class="avatar-final">
<div class="finished-img">
<img id="finishedImg" src=""/>
<br>
</div>
<p class="control">
<a class="css_btn_create" id="download">生成</a>
</p>
</div>
<script src="main.js"></script>
<script>loadImage()</script>
</body>
</html>
這里我用photoshop制作這么一個相框圖片，里面加載頭像，就是上面的head0.png。
??4.2.2 拼接頭像和相框
其中avatar_template就是我們的頭像相框，avatar_img就是我們的微信頭像，通過下面的方式來講頭像放到img標(biāo)簽里面。并且將拼接好的圖片放到finishedImg里面。
// 將url的圖片加載到頁面
function loadImage() {
let imgUrl = getQueryString('avatar_url');
// 通過路徑解析處高清圖像
imgUrl = headImgHD(imgUrl);
$('#avatar_img').attr('src', imgUrl);
$('#avatar_img').attr('crossOrigin', 'anonymous');
curImage = $('#avatar_template').attr('src');
drawToCanvas(imgUrl, curImage, $('#finishedImg'));
}
// 開始整合繪制圖片到finishedImg里面
function drawToCanvas(img1, img2, showObj) {
let cvs = document.getElementById('cvs');
let showSize = 230;
let size = 800;
cvs.width = size;
cvs.height = size;
let ctx = cvs.getContext('2d');
let image1 = new Image;
image1.setAttribute('crossOrigin', 'anonymous');
image1.src = img1;
image1.onload = function () {
let width = image1.width < image1.height ? size : size * (image1.width / image1.height);
let height = image1.width > image1.height ? size : size * (image1.height / image1.width);
let x = image1.width < image1.height ? 0 : (size * (image1.width / image1.height) - size) / 2;
let y = image1.width > image1.height ? 0 : (size * (image1.height / image1.width) - size) / 2;
document.getElementById('avatar_img').style.showSize = width + 'px';
document.getElementById('avatar_img').style.showSize = height + 'px';
document.getElementById('avatar_img').style.marginLeft = -x + 'px';
document.getElementById('avatar_img').style.marginTop = -y + 'px';
ctx.drawImage(image1, -x, -y, width, height);
let image2 = new Image;
image2.setAttribute('crossOrigin', 'anonymous');
image2.src = img2;
image2.onload = function () {
ctx.drawImage(image2, 0, 0, size, size);
let canvas = document.getElementById('cvs');
//獲取二維碼中的圖片地址
let src_xp = canvas.toDataURL('image/jpeg');
$(showObj).attr('src', src_xp)
}
}
}
??4.2.3 生成頭像為一個圖片
當(dāng)用戶完成頭像換裝后，我們可以提供一個按鈕來讓用戶生成新的頭像。這里，我們可以使用html2canvas方法將頁面元素轉(zhuǎn)化為一個整體的圖片，并將其顯示在頁面中。這個時候我們可以長按圖片保存，然后上傳到我的頭像就完成了換頭像的功能。
$('#download').click(function (ev) {
takeScreenShot();
});
function takeScreenShot() {
html2canvas(document.getElementById('avatar'), {
allowTaint:false,
dpi: 400,
useCORS: true,
onrendered: function(canvas) {
document.body.appendChild(canvas);
var canvas = $('canvas')[1];
//獲取二維碼中的圖片地址
let src_xp = canvas.toDataURL('image/jpeg');
console.log(src_xp);
$('#finishedImg').attr('src', src_xp)
$('.avatar-final').show();
$('#avatar-control').hide();
$(canvas).hide();
},
});
}
最后，一起來看看最終的頭像效果。
??五、總結(jié)
本篇博文介紹了如何使用JavaScript開發(fā)一個實現(xiàn)換中秋頭像功能的應(yīng)用程序。我們通過與微信公眾號頭像打通，并使用Html進行頁面繪制。最后，通過Canvas進行圖片整合，并提供一個生成按鈕讓用戶一鍵生成新的頭像。
文章來源：http://www.zghlxwxcb.cn/news/detail-719831.html
如果你想直接體驗換頭像的功能，可以關(guān)注下面公眾號回復(fù)【換頭像】。今天的內(nèi)容就到這里，我們下次見。文章來源地址http://www.zghlxwxcb.cn/news/detail-719831.html
到了這里，關(guān)于千里共嬋娟 ｜ 結(jié)合微信公眾號用JavaScript完整開發(fā)實現(xiàn)換中秋頭像的功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
