千里共婵娟 ｜ 结合微信公众号用JavaScript完整开发实现换中秋头像的功能

news2024/11/24 8:03:21

在这里插入图片描述

🏆作者简介，黑夜开发者，CSDN领军人物，全栈领域优质创作者✌，阿里云社区专家博主，2023年6月csdn上海赛道top4。
🏆数年电商行业从业经验，历任核心研发工程师，项目技术负责人。
🏆本文已收录于专栏：100个JavaScript的小应用，微信公众号开发。
🎉欢迎 👍点赞✍评论⭐收藏

文章目录

  • 🚀一、前言
  • 🚀二、开发流程概述
  • 🚀三、配置微信公众号
    • 🔎3.1 AppId和AppSecret获取
    • 🔎3.1 添加网页授权域名
    • 🔎3.3 白名单设置
  • 🚀四、功能开发
    • 🔎4.1 获取用户微信头像
      • 🍁4.1.1 引导用户进入授权页面
      • 🍁4.1.2 获取授权code并换取access_token
      • 🍁4.1.3 获取用户基本信息
    • 🔎4.2 JavaScript实现用户换头像
      • 🍁4.2.1 创建HTML结构(index.php)
      • 🍁4.2.2 拼接头像和相框
      • 🍁4.2.3 生成头像为一个图片
  • 🚀五、总结

🚀一、前言

中秋节是我国的重要传统节日，今年直接和国庆节凑到了一起，放一个8天的小长假，是不是很兴奋呢。为了增加节日气氛，许多人会更换自己的社交媒体头像，如微信头像。使用与中秋或者国庆主题相关的图片。本篇博文将介绍如何使用PHP通过微信公众号获取用户头像，并且将头像传递给JavaScript开发一个实现换中秋头像的功能。

在这里插入图片描述

通过本篇文章的阅读，您将获取如下的实战知识：

  1. 熟悉了解微信公众号的基本开发流程。
  2. 学习到微信公众号网页授权获取用户基本信息这个板块的开发。
  3. 基本掌握html，css等网页前端的组成与基本开发流程。
  4. Javascript, canvas用于图片合成，头像生成的场景使用。
  5. 学习到一部分PHP相关的后端知识

🚀二、开发流程概述

首先我们得通过微信公众号开发获取到用户的头像，然后我们需要准备一些素材。这个图片素材需要是镂空图 PNG，用来镶嵌在用的真实头像上面。接下来，我们需要创建一个HTML页面，并在其中引入一个JavaScript文件。我们将使用JavaScript来操作DOM元素和Canvas元素，实现换装功能。如果您熟悉HTML和JavaScript的基本知识那就更好了。

🚀三、配置微信公众号

🔎3.1 AppId和AppSecret获取

AppId和AppSecret得先获取到，请看下图，记得一定要保存好AppSecret。
在这里插入图片描述

🔎3.1 添加网页授权域名

网页授权域名是必须要添加的，否则公众号是不回允许在没有通过的域名下面进行授权。如果你遇到了一些问题，可以排查一下是不是这个地方的配置。在公众号设置>功能设置里面添加，加域名就行。

在这里插入图片描述

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

🔎3.3 白名单设置

白名单主要是添加自己服务器所在的IP地址到公众号后台，这样只有指定的服务器才允许与公众号接口通信。如果白名单没有设置，获取access_token的时候可能会报如下错误。

{"errcode":40164,"errmsg":"invalid ip xxx ipv6 ::ffff:xxxx, not in whitelist rid: 6503251e-14033bf0-774d3d3e"}

在这里插入图片描述

在安全中心>IP白名单处进行设置，白名单设置了可能会有短暂的延时生效，如果当时不能访问，可以等会再试一下。

🚀四、功能开发

🔎4.1 获取用户微信头像

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

🍁4.1.1 引导用户进入授权页面

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

$redirect_uri = urlencode('http://your-domain.com/callback.php'); // 回调URL，需要urlencode
$appid = 'Your Appid'; // 公众号AppID
$scope = 'snsapi_userinfo'; // snsapi_base或snsapi_userinfo
$state = 'STATE'; // 自定义参数，可不填
$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); // 跳转到授权页面

在到达callback.php之前，如果已经关注了公众号的用户，可以直接获取到用户头像，否则则会提示授权，用户同意之后才能获取头像，这便是网页授权获取用户头像的核心功能。授权的情况可以见下图真实案例。

在这里插入图片描述

🍁4.1.2 获取授权code并换取access_token

用户同意授权后，微信会重定向到您设置的回调URL，并携带一个code参数。在回调页面（callback.php）中获取到该code，并使用它来换取access_token和openid。

$code = $_GET["code"]; // 授权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，可以调用以下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']; // 用户头像链接
// 可以根据需要获取其他用户信息字段
header('Location: https://www.xxx.wang/index.html?avatar_url=' . $headimgurl

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

🔎4.2 JavaScript实现用户换头像

🍁4.2.1 创建HTML结构(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标签里面。并且将拼接好的图片放到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 生成头像为一个图片

当用户完成头像换装后，我们可以提供一个按钮来让用户生成新的头像。这里，我们可以使用html2canvas方法将页面元素转化为一个整体的图片，并将其显示在页面中。这个时候我们可以长按图片保存，然后上传到我的头像就完成了换头像的功能。

$('#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();
    },
  });
}

最后，一起来看看最终的头像效果。

在这里插入图片描述

🚀五、总结

本篇博文介绍了如何使用JavaScript开发一个实现换中秋头像功能的应用程序。我们通过与微信公众号头像打通，并使用Html进行页面绘制。最后，通过Canvas进行图片整合，并提供一个生成按钮让用户一键生成新的头像。

在这里插入图片描述

如果你想直接体验换头像的功能，可以关注下面公众号回复【换头像】。今天的内容就到这里，我们下次见。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1015455.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基于SpringBoot+Vue+协同过滤算法的电影推荐系统（可随意更改项目主题如音乐、美食、商品、小说等）

基于SpringBoot+Vue+协同过滤算法的电影推荐系统（可随意更改项目主题如音乐、美食、商品、小说等）

toc 一、前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&#xff0c;博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f447;&…
阅读更多...
[矩阵的乘法运算] m*M = c

[矩阵的乘法运算] m*M = c

另人给的一道题&#xff0c;一时没弄出来&#xff0c;后来看WP&#xff0c;复现一下。 对于矩阵运算 m*M c 求m 的情况。 满秩差1半秩 import os import secret import hashlib from Crypto.Util.number import getPrime from Crypto.Util.Padding import padLEN 32def xo…
阅读更多...
three3D的vite+vue版本基础代码

three3D的vite+vue版本基础代码

自己稍微处理一下目录结构 <script setup>// 导入three.js import * as THREE from three// 创建场景 const scene new THREE.Scene();// 创建相机 const camera new THREE.PerspectiveCamera(45, //视角window.innerWidth / window.innerHeight, //宽高比0.1, // 近平…
阅读更多...
基于matlab求两个数最大公约数函数gcd

基于matlab求两个数最大公约数函数gcd

一、gcd函数 在MATLAB中&#xff0c;可以使用内置函数gcd()来求两个数的最大公约数。 二、示例 以下是使用MATLAB求两个数最大公约数的示例代码&#xff1a; % 定义两个数 a 36; b 48; % 求最大公约数 gcd_result gcd(a, b); % 输出结果 fprintf(最大公约数为&#xff1…
阅读更多...
百度SEO优化策略与经验分享（提升百度排名的8大步骤）

百度SEO优化策略与经验分享（提升百度排名的8大步骤）

百度关键词优化策略介绍&#xff1a;蘑菇号https://www.mooogu.cn/ 百度搜索引擎优化&#xff0c;简称为百度SEO&#xff0c;是一种通过优化网站结构和内容&#xff0c;提高网站在百度搜索引擎中的排名&#xff0c;从而获得更多有价值的流量和销售机会的行业术语。百度SEO的核…
阅读更多...
项目上线部署--》服务器部署流程（一）

项目上线部署--》服务器部署流程（一）

目录 &#x1f31f;准备工作 服务器购买 域名购买 域名解析&#xff08;配置 DNS&#xff09; &#x1f31f;服务器环境搭建 配置服务器 安装 CentOS 开发人员相关包 ​编辑 配置免密登陆 &#x1f31f;写在最后 &#x1f31f;准备工作 服务器购买 国内服务器&#x…
阅读更多...
【Android知识笔记】进程通信（三）

【Android知识笔记】进程通信（三）

在上一篇探索Binder通信原理时，提到了内存映射的概念，其核心是通过mmap函数，将一块 Linux 内核缓存区映射到一块物理内存（匿名文件），这块物理内存其实是作为Binder开辟的数据接收缓存区。这里有两个概念，需要理解清楚，那就是操作系统中的虚拟内存和物理内存，理解了这两…
阅读更多...
【深度学习】Pytorch 系列教程（十三）：PyTorch数据结构：5、数据加载器（DataLoader）

【深度学习】Pytorch 系列教程（十三）：PyTorch数据结构：5、数据加载器（DataLoader）

目录 一、前言 二、实验环境 三、PyTorch数据结构 0、分类 1、张量&#xff08;Tensor&#xff09; 2、张量操作&#xff08;Tensor Operations&#xff09; 3、变量&#xff08;Variable&#xff09; 4、数据集&#xff08;Dataset&#xff09; 5、数据加载器&#x…
阅读更多...
ERP与MES系统概述

ERP与MES系统概述

一、MES能为制造企业解决什么问题&#xff1f; 制造执行系统&#xff08;manufacturing execution system&#xff0c;简称MES&#xff09;&#xff1b;是一套面向制造企业车间执行层的生产信息化管理系统。MES可以为企业提供包括制造数据管理、计划排程管理、生产调度管理、库…
阅读更多...
【蓝桥杯选拔赛真题61】Scratch小猫照镜子 少儿编程scratch图形化编程 蓝桥杯选拔赛真题解析

【蓝桥杯选拔赛真题61】Scratch小猫照镜子 少儿编程scratch图形化编程 蓝桥杯选拔赛真题解析

目录 scratch小猫照镜子 一、题目要求 编程实现 二、案例分析 1、角色分析
阅读更多...
LeetCode(力扣)56. 合并区间Python

LeetCode(力扣)56. 合并区间Python

LeetCode56. 合并区间 题目链接代码 题目链接 https://leetcode.cn/problems/merge-intervals/description/ 代码 class Solution:def merge(self, intervals: List[List[int]]) -> List[List[int]]:result []if len(intervals) 0:return resultintervals.sort(keylam…
阅读更多...
模型建出来后，位于测区边缘的区域出现图上这个情况是什么原因？

模型建出来后，位于测区边缘的区域出现图上这个情况是什么原因？

答&#xff1a;这是因为边缘区域照片重叠度不够导致的。 DasViewer是由大势智慧自主研发的免费的实景三维模型浏览器,采用多细节层次模型逐步自适应加载技术,让用户在极低的电脑配置下,也能流畅的加载较大规模实景三维模型,提供方便快捷的数据浏览操作。#DasViewer##实景三维##…
阅读更多...
孙宇晨出席米尔肯研究院亚洲峰会:持续推动行业破圈 亚洲将成重要加密中心

孙宇晨出席米尔肯研究院亚洲峰会:持续推动行业破圈 亚洲将成重要加密中心

9月14日,波场TRON创始人、火币HTX全球顾问委员会成员孙宇晨受邀出席2023米尔肯研究院亚洲峰会(2023 Milken Institute Asia Summit),与前美国驻新加坡大使、Wagar Global Advisors咨询公司主席Kirk Wagar就加密行业未来趋势相关问题进行了深度对话。孙宇晨在对谈中表示,稳定币作…
阅读更多...
二进制安全虚拟机Protostar靶场（4）写入shellcode，基础知识讲解 Stack Five

二进制安全虚拟机Protostar靶场（4）写入shellcode，基础知识讲解 Stack Five

前言 这是一个系列文章&#xff0c;之前已经介绍过一些二进制安全的基础知识&#xff0c;这里就不过多重复提及&#xff0c;不熟悉的同学可以去看看我之前写的文章 二进制安全虚拟机Protostar靶场 安装,基础知识讲解,破解STACK ZERO https://blog.csdn.net/qq_45894840/artic…
阅读更多...
八、硬改之设备画像

八、硬改之设备画像

前言正文 前言 1&#xff1a;root检测 2&#xff1a;框架检测 3&#xff1a;模拟器检测在这三项检测都通过后,恭喜你&#xff01; 18罗汉铜人阵最后一关&#xff1a;设备画像检测 正文 大厂的机型库数据非常完善,获取所有属性,上报手机所有参数项,APP无需申请权限,根据参数项做…
阅读更多...
java:逆序排序的三种方法

java:逆序排序的三种方法

// 逆序第一种方法 public static void main(String[] args) {int arr[] {11, 22, 33, 44, 55, 66};for (int i arr.length-1; i > 0; i--) {System.out.print("\t"arr[i]);}}缺点&#xff1a;这个是直接逆转&#xff0c;如果里面是随机数没办法比较 逆序第二种…
阅读更多...
【入门篇】ClickHouse 数据类型

【入门篇】ClickHouse 数据类型

文章目录 1. 引言2. ClickHouse 数据类型2.1 基本数据类型2.1.1 整型2.1.2 浮点型2.1.3 字符串型 2.2 复合数据类型2.2.1 数组2.2.2 枚举类型2.2.3 元组2.2.4 Map2.2.5 Nullable 2.3 特殊数据类型2.3.1 日期和时间类型2.3.2 UUID2.3.3 IP 地址2.3.4 AggregateFunction 2.4 数据…
阅读更多...
ChatGLM2-6B Lora 微调训练医疗问答任务

ChatGLM2-6B Lora 微调训练医疗问答任务

一、ChatGLM2-6B Lora 微调 LoRA 微调技术的思想很简单&#xff0c;在原始 PLM (Pre-trained Language Model) 增加一个旁路&#xff0c;一般是在 transformer 层&#xff0c;做一个降维再升维的操作&#xff0c;模型的输入输出维度不变&#xff0c;来模拟 intrinsic rank&…
阅读更多...
【简单教程】利用Net2FTP构建免费个人网盘，实现便捷的文件管理

【简单教程】利用Net2FTP构建免费个人网盘，实现便捷的文件管理

文章目录 1.前言2. Net2FTP网站搭建2.1. Net2FTP下载和安装2.2. Net2FTP网页测试 3. cpolar内网穿透3.1.Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 1.前言 文件传输可以说是互联网最主要的应用之一&#xff0c;特别是智能设备的大面积使用&#xff0c;无论是个人…
阅读更多...
深入理解右值引用与移动语义

深入理解右值引用与移动语义

文章目录 写在前面1. 什么是右值&#xff0c;什么是左值&#xff1f;1.1右值引用可以引用左值吗1.2 左值引用、右值引用本身是左值还是右值&#xff1f;1.3 特殊的 const 左值引用 2. 右值引用与移动构造的意义3. 移动构造函数的使用4. move的实现原理5. 完美转发 写在前面 本…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023