跨域微信头像图片生成海报的踩坑实践

2024-01-13 03:01:46

介绍

前端生成一张图片，一般是基于页面的内容（DOM）生成一张用于分享的海报形式的图片（例如通过 html2canvas）。不过当分享的图片要包含微信用户的头像时（图片位于 thirdwx.qlogo.cn 域名，没有转存到自己的域名下），微信用户的头像图片相当于页面是跨域的。

我们使用 html2canvas 将页面内容转为海报图片的方案时遇到无法使用微信头像的问题。通过排除，发现微信头像所在的域与海报生成的页面域不同，存在跨域问题，而 html2canvas 对于跨域图片的处理默认是不允许的。

问题分析

首先，我们需要明白为什么会出现跨域问题。跨域问题是指在一个网页或 Web 应用程序中，由于安全策略的限制，不允许从一个域请求另一个域的资源。在我们的案例中，海报生成的页面域是我们的网站域，而微信头像所在的域是 thirdwx.qlogo.cn。这两个域不同，因此存在跨域问题。

其次，我们需要知道 html2canvas 是如何处理跨域图片的。html2canvas 默认是不允许跨域图片的，因为这违反了同源策略。同源策略是一项安全策略，它规定只有来自相同来源的脚本才能访问彼此的 DOM。在我们的案例中，海报生成的页面和微信头像所在的域不同，因此违反了同源策略。

解决方案

为了解决跨域问题，我们需要修改后端允许页面访问微信头像所在的域，并设置 blob URL 来解决跨域问题。

首先，我们需要在后端配置 CORS（跨域资源共享）来允许页面访问微信头像所在的域。CORS 是一种允许不同源的网页进行跨域请求的技术。具体来说，我们需要在后端的 CORS 配置中添加我们的网站域为允许的来源。

其次，我们需要在前端设置 blob URL 来解决跨域问题。Blob URL 是一个临时性的 URL，它允许我们访问存储在内存中的二进制数据。在我们的案例中，我们可以将微信头像的二进制数据存储在内存中，然后创建一个 blob URL 来访问它。这样，我们就可以在海报中使用微信头像的 blob URL 来加载图片。