解决新版接口微信小程序获取头像信息模糊问题

2023-09-20 阅读：1627 分类：后端标签：微信小程序

一、前言：

相信很多微信小程序开发者在使用微信授权头像的时候，会发现授权得的临时图片特别模糊，以下教大家如何改善和解决图片模糊问题

二、方案流程：

1、用户授权图片后，把用户头像上传至服务器

2、微信小程序端通过图片上传接口把图片传给服务器，

3、服务器通过微信官方高清图片接口，把图片进行高清化，服务器通过接口返回给前端

4、微信小程序端把返回的高清图片进行一系列的操作

三、解决方案：

3.1、小程序端：放置获取头像按钮

<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
 <image class="avatar" src="{{avatarUrl}}"></image>
</button>

3.2、前端js接收并获取头像，并执行wx.uploadFile({})图片上传操作

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({
 data: {
 avatarUrl: defaultAvatarUrl,
 },

 onChooseAvatar(e) {
  const { avatarUrl } = e.detail 
 	var that = this
	// console.log(avatarUrl)
	// 上传图片
	wx.showLoading({
	 title: '加载中',
	})
	wx.uploadFile({
	  url: app.AppUrl +'/minwxapi/superresolution', //仅为示例，非真实的接口地址
	  filePath: avatarUrl,
	  name: 'file',
	  formData: {
	  'path': 'photo'
	  },
	  success (res){
	  wx.hideLoading()
	  var data = JSON.parse(res.data)
	  console.log(data.data)
	  if(data.code==200){
	  //图片返回成功，进行一系列操作
	   that.setData({
	   avatarUrl: data.data
	   })
	  }
	  }, error:async function() {
	  wx.hideLoading()
	  }
	})
 }
})

3.3、后端代码处理-图片上接口：

<?php
namespace App\Http\Controllers\Weixin;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use App\Http\Response\ApiErrDesc;
use App\Http\Response\ResponseJson;
use Illuminate\Support\Facades\Storage;

 public function superresolution(Request $request){
  $tmp = $request->file; //文件
  $folder = $request->path; //文件存放地址
  $path = '/static/ups'; //public下的ups
  if ($tmp->isValid()) { //判断文件上传是否有效
    $FileType = $tmp->getClientOriginalExtension(); //获取文件后缀
    $FilePath = $tmp->getRealPath(); //获取文件临时存放位置
    $FileName = $folder.'/'.date('Ymd').'/' . uniqid() . '.' . $FileType; //定义文件名
    Storage::disk('Uploads')->put($FileName, file_get_contents($FilePath)); //存储文件

    $result = $this->gaoqing('https://www.tpxhm.com'.$path.'/'.$FileName, $path.'/'.$FileName);
    return $data = [
      'code' => ApiErrDesc::UPLOAD_SUCCESS[0],
      'msg' =>ApiErrDesc::UPLOAD_SUCCESS[1] ,
      'data'=>'https://www.tpxhm.com'.$result //文件路径
    ];
  }else{
    return $data = [
      'code' => ApiErrDesc::UPLOAD_ERROR[0],
      'msg' =>ApiErrDesc::UPLOAD_ERROR[1] ,
      'data'=>[]
    ];
  }
 }
?>

3.4、后端代码处理-高清化上接口：

3.4.1、获取小程序全局唯一后台接口调用凭据，token：getAccessToken

GET https://api.weixin.qq.com/cgi-bin/token

3.4.2、处理小程序的图片高清化：（图片支持使用img参数实时上传，也支持使用img_url参数传送图片地址，由微信后台下载图片进行识别。目前支持将图片超分辨率高清化2倍，即生成图片分辨率为原图2倍大小）官方文档：superResolution接口

POST https://api.weixin.qq.com/cv/img/superresolution?access_token=ACCESS_TOKEN

代码示例：

<?php
 // 高清图片
 public function gaoqing($fileUrl,$filepath){
  $appId = Env('JYZY_APPID');
  $secret = Env('JYZY_SECRET');
  $url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$appId.'&secret='.$secret;
  $res = $this->curlRequest($url);
  $access_token = json_decode($res,true);
  $access_token = $access_token['access_token'];
  // dd($access_token);

  $url2 = 'https://api.weixin.qq.com/cv/img/superresolution?access_token='.$access_token;
  $data = [
    'img_url'=> $fileUrl
  ];
  $result = $this->curlRequest($url2,$data);
  $result = json_decode($result, true);
  if($result['errcode']==0){
   $url3 = "https://api.weixin.qq.com/cgi-bin/media/get?access_token=".$access_token."&media_id=".$result['media_id'];
   $result3 = $this->curlRequest($url3);

   // $data = file_get_contents($result3);
   $savePath = public_path().$filepath;
   $done = file_put_contents($savePath, $result3);
   if($done){
    return $filepath;
   }
  }
   
 }
    /**
   * 使用curl方式实现get或post请求
   * @param $url 请求的url地址
   * @param $data 发送的post数据 如果为空则为get方式请求
   * return 请求后获取到的数据
   */
  public function curlRequest($url, $data = '')
  {
    $ch = curl_init();
    $params[CURLOPT_URL] = $url;  //请求url地址
    $params[CURLOPT_HEADER] = false; //是否返回响应头信息
    $params[CURLOPT_RETURNTRANSFER] = true; //是否将结果返回
    $params[CURLOPT_FOLLOWLOCATION] = true; //是否重定向
    $params[CURLOPT_TIMEOUT] = 30; //超时时间
    if (!empty($data)) {
      $params[CURLOPT_POST] = true;
      $params[CURLOPT_POSTFIELDS] = $data;
    }
    $params[CURLOPT_SSL_VERIFYPEER] = false;//请求https时设置,还有其他解决方案
    $params[CURLOPT_SSL_VERIFYHOST] = false;//请求https时,其他方案查看其他博文
    curl_setopt_array($ch, $params); //传入curl参数
    $content = curl_exec($ch); //执行
    curl_close($ch); //关闭连接
    return $content;
  }
?>

以上就是新版小程序获取用户头像信息模糊问题解决方案，供大家参考和使用，有更多更好的方法欢迎下方留言评论。

Demo示例：