使用canvas生成含有微信头像的邀请海报没有微信头像问题-前端开发

使用Canvas生成含有微信头像的邀请海报是一项常见的需求，当中有时会遇到生成海报时，无法正确显示微信头像的问题。基于此，我编写了以下攻略来帮助您解决该问题。

使用Canvas生成含有微信头像的邀请海报是一项常见的需求，当中有时会遇到生成海报时，无法正确显示微信头像的问题。基于此，我编写了以下攻略来帮助您解决该问题。

常见问题分析

微信头像无法正确显示原因

微信头像无法正确显示，通常情况下是由于CORS的限制所导致的。在浏览器中，脚本的跨源HTTP请求通常会受到同源策略的限制，因此无法获取其他网站的数据。而我们在使用Canvas生成海报时，往往需要向微信服务器请求用户头像，由于请求url会跨域，因此会产生CORS限制，导致无法正确显示头像信息。

解决方案

1. 转换为base64格式图片

将微信头像转换为base64格式图片，然后将base64编码作为图片地址来加载头像。这种方法可以避免CORS限制，但可能会导致海报生成速度较慢、内存占用较高等问题。

const imgUrl = `${userInfo.headimgurl}?type=normal`;
// 获取头像
const img = new Image();
img.setAttribute("crossOrigin",'Anonymous')
img.src = imgUrl;
img.onload = () => {
  // 绘制头像
  ctx.drawImage(img, 20, 20, 80, 80);
  // 转换为base64格式
  const base64Img = canvas.toDataURL("image/jpeg", 1.0);
  // 加载base64图片
  const imgDom = new Image();
  imgDom.src = base64Img;
  // 插入到页面中
  document.body.appendChild(imgDom);
};

2. 代理获取头像

通过代理服务器获取微信头像，将代理服务器返回的图片数据作为图片地址来加载头像。这种方法可以同时绕开CORS限制，而且对于海报生成速度、内存占用等问题也有很好的解决方案。

const imgUrl = `${userInfo.headimgurl}?type=normal`;
// 获取头像
fetch(`/getImg?url=${encodeURIComponent(imgUrl)}`)
  .then(res => res.json())
  .then(data => {
    // 绘制头像
    const img = new Image();
    img.src = data.imgUrl;
    img.onload = () => {
      ctx.drawImage(img, 20, 20, 80, 80);
      // 加载图片成功后，执行海报生成工作
      // ...
    }
  });

示例说明

举例来说，当我们通过代理服务器获取微信头像时，可以使用koa框架实现一个简单的代理服务器。具体代码如下。

const Koa = require('koa');
const Router = require('koa-router');
const fetch = require('node-fetch');
const app = new Koa();
const router = new Router();

router.get('/getImg', async (ctx) => {
  const { url } = ctx.query;
  // 代理获取头像
  const res = await fetch(url);
  const imgBuffer = await res.buffer();
  // 返回base64格式图片
  const base64Img = `data:image/jpeg;base64,${imgBuffer.toString('base64')}`;
  ctx.body = { imgUrl: base64Img };
});

app.use(router.routes());
app.use(router.allowedMethods());

app.listen(3000);

在客户端代码中，可以使用fetch方法来发起GET请求，从而获取微信头像并在Canvas中进行绘制，具体代码如下。

const imgUrl = `${userInfo.headimgurl}?type=normal`;
// 获取头像
fetch(`/getImg?url=${encodeURIComponent(imgUrl)}`)
  .then(res => res.json())
  .then(data => {
    // 绘制头像
    const img = new Image();
    img.src = data.imgUrl;
    img.onload = () => {
      ctx.drawImage(img, 20, 20, 80, 80);
      // 加载图片成功后，执行海报生成工作
      // ...
    }
  });