#x1f3c6;数年电商行业从业经验#xff0c;历任核心研发工程师#xff0c;项目技术负责…

作者简介黑夜开发者CSDN领军人物全栈领域优质创作者✌阿里云社区专家博主2023年6月csdn上海赛道top4。

本文已收录于专栏100个JavaScript的小应用微信公众号开发。

点赞✍评论⭐收藏

中秋节是我国的重要传统节日今年直接和国庆节凑到了一起放一个8天的小长假是不是很兴奋呢。

为了增加节日气氛许多人会更换自己的社交媒体头像如微信头像。

使用与中秋或者国庆主题相关的图片。

本篇博文将介绍如何使用PHP通过微信公众号获取用户头像并且将头像传递给JavaScript开发一个实现换中秋头像的功能。

熟悉了解微信公众号的基本开发流程。

学习到微信公众号网页授权获取用户基本信息这个板块的开发。

基本掌握htmlcss等网页前端的组成与基本开发流程。

Javascript,

canvas用于图片合成头像生成的场景使用。

学习到一部分PHP相关的后端知识

二、开发流程概述

首先我们得通过微信公众号开发获取到用户的头像然后我们需要准备一些素材。

这个图片素材需要是镂空图

PNG用来镶嵌在用的真实头像上面。

接下来我们需要创建一个HTML页面并在其中引入一个JavaScript文件。

我们将使用JavaScript来操作DOM元素和Canvas元素实现换装功能。

如果您熟悉HTML和JavaScript的基本知识那就更好了。

三、配置微信公众号

AppId和AppSecret得先获取到请看下图记得一定要保存好AppSecret。

3.1

网页授权域名是必须要添加的否则公众号是不回允许在没有通过的域名下面进行授权。

如果你遇到了一些问题可以排查一下是不是这个地方的配置。

在公众号设置功能设置里面添加加域名就行。

这里可能要传文件验证如果传了文件还是有问题可以检查一下文件权限啥的或者看看能不能手动访问。

3.3

白名单主要是添加自己服务器所在的IP地址到公众号后台这样只有指定的服务器才允许与公众号接口通信。

如果白名单没有设置获取access_token的时候可能会报如下错误。

xxx

6503251e-14033bf0-774d3d3e}在安全中心IP白名单处进行设置白名单设置了可能会有短暂的延时生效如果当时不能访问可以等会再试一下。

四、功能开发

这个部分主要通过PHP进行开发核心是如何与公众号进行API交互。

4.1.1

构建一个URL用户点击后将跳转到微信授权页面同时携带着您设置的回调URL。

$redirect_uri

urlencode(http://your-domain.com/callback.php);

回调URL需要urlencode

https://open.weixin.qq.com/connect/oauth2/authorize?appid{$appid}redirect_uri{$redirect_uri}response_typecodescope{$scope}state{$state}#wechat_redirect;

header(Location:

跳转到授权页面在到达callback.php之前如果已经关注了公众号的用户可以直接获取到用户头像否则则会提示授权用户同意之后才能获取头像这便是网页授权获取用户头像的核心功能。

授权的情况可以见下图真实案例。

4.1.2

用户同意授权后微信会重定向到您设置的回调URL并携带一个code参数。

在回调页面callback.php中获取到该code并使用它来换取access_token和openid。

$code

https://api.weixin.qq.com/sns/oauth2/access_token?appid{$appid}secret{$secret}code{$code}grant_typeauthorization_code;

$token_data

json_decode(file_get_contents($token_url),

true);$access_token

使用获取到的access_token和openid可以调用以下API来获取用户基本信息

$userinfo_url

https://api.weixin.qq.com/sns/userinfo?access_token{$access_token}openid{$openid}langzh_CN;

$userinfo_data

json_decode(file_get_contents($userinfo_url),

true);$nickname

https://www.xxx.wang/index.html?avatar_url

$headimgurl上面代码的最后一句是重点将获取到的微信头像传递给index.html后面javascript会用到。

4.2

typefile元素来让用户选择要上传的头像文件。

同时我们还需要一个canvas/canvas元素来绘制新的头像。

!DOCTYPE

srcmain.js/scriptscriptloadImage()/script

/body

/html这里我用photoshop制作这么一个相框图片里面加载头像就是上面的head0.png。

4.2.2

其中avatar_template就是我们的头像相框avatar_img就是我们的微信头像通过下面的方式来讲头像放到img标签里面。

并且将拼接好的图片放到finishedImg里面。

function

headImgHD(imgUrl);$(#avatar_img).attr(src,

imgUrl);$(#avatar_img).attr(crossOrigin,

anonymous);curImage

$(#avatar_template).attr(src);drawToCanvas(imgUrl,

curImage,

document.getElementById(cvs);let

showSize

Image;image1.setAttribute(crossOrigin,

img1;image1.onload

2;document.getElementById(avatar_img).style.showSize

width

px;document.getElementById(avatar_img).style.showSize

height

px;document.getElementById(avatar_img).style.marginLeft

px;document.getElementById(avatar_img).style.marginTop

-x,

Image;image2.setAttribute(crossOrigin,

img2;image2.onload

document.getElementById(cvs);//获取二维码中的图片地址let

src_xp

canvas.toDataURL(image/jpeg);$(showObj).attr(src,

src_xp)}}

当用户完成头像换装后我们可以提供一个按钮来让用户生成新的头像。

这里我们可以使用html2canvas方法将页面元素转化为一个整体的图片并将其显示在页面中。

这个时候我们可以长按图片保存然后上传到我的头像就完成了换头像的功能。

(ev)

{html2canvas(document.getElementById(avatar),

400,useCORS:

{document.body.appendChild(canvas);var

canvas

canvas.toDataURL(image/jpeg);console.log(src_xp);$(#finishedImg).attr(src,

src_xp)$(.avatar-final).show();$(#avatar-control).hide();$(canvas).hide();},});

五、总结

本篇博文介绍了如何使用JavaScript开发一个实现换中秋头像功能的应用程序。

我们通过与微信公众号头像打通并使用Html进行页面绘制。

最后通过Canvas进行图片整合并提供一个生成按钮让用户一键生成新的头像。

如果你想直接体验换头像的功能可以关注下面公众号回复【换头像】。

今天的内容就到这里我们下次见。