前端获取微信头像 base64 数据的踩坑实践

最新推荐文章于 2024-06-19 11:46:44 发布

weixin_48109878

最新推荐文章于 2024-06-19 11:46:44 发布

阅读量1.1k

点赞数

团队招聘

正文开始前，插播一则招聘信息。欢迎感兴趣的同学投递简历。

岗位职责：

负责快狗打车产品相关前端开发工作
通过技术提高FE团队整体效率

任职要求：

本科及以上学历
3年以上前端开发经验，负责过复杂应用的前端设计和开发
熟悉web前端技术，熟悉React/Vue等任意一种前端框架
有移动端开发经验，对前端工程化有较深的理解
熟悉小程序开发，有微信、支付宝、百度等小程序开发经验
有技术理想，致力于用技术去推动和改变前端研发
良好的团体合作精神，沟通能力强；

加分项：

熟悉任意一门服务端语言（java/php/python/ruby/golang/nodejs）
参与开源项目or对开源社区有贡献

联系方式：

地址：北京市朝阳区北苑路桑普大厦6层
邮箱：wangchao@daojia-inc.com
微信：ljh5187

简历投递请注明”来自微信公众号“

应用场景

前端生成一张图片, 一般是基于页面的内容(DOM)生成一张用于分享的海报形式的图片(例如通过 html2canvas)。不过当分享的图片要包含微信用户的头像时(图片位于 thirdwx.qlogo.cn 域名,没有转存到自己的域名下)，微信用户的头像图片相当于页面是跨域的。我们如何解决此场景下获取微信头像的问题。

原理

想要获取图片的 base64 数据, 我们大概都知道, 需要将图片绘制到 canvas 上, 再通过 toDataURL 方法拿到 DataURL 数据, 即 base64 的图片数据。

结论与重点

图片必须支持 CORS 跨域。
避免触发浏览器的缓存机制。以免浏览器拿到的是缓存数据而没有携带 CORS 策略

遇到的坑

1. 当加载图片时, 如果开启了 crossOrigin 机制, 服务器必须遵循 CORS 规范, 返回 Access-Control-Allow-Origin 头, 否则会被浏览器阻止(cancel)掉, 触发 onerror 回调。

由于微信头像默认加载时不会返回 CORS 规范, 只有在请求时开启 Origin 才会返回 CORS 规范的内容。

在 PC 端浏览器上如果不使用 Disable cache, 会加载图片失败, 触发 onerror 回调因此在移动端浏览器上测试会发现也是触发的 onerror 回调(因为我们在页面中先预览了一次微信用户的头像)。

如果需要解决这个问题, 可以在第一次加载微信用户头像的时候就开启 crossOrigin 机制(但不排除命中其他应用种下的缓存)。例如:

<img src="http://thirdwx.qlogo.cn/xx/132" crossorigin="anonymous">。

或者再次加载图片的时候带上随机参数, 避免浏览器缓存(这个方案更稳定靠谱)。

2. 加载跨域的图片时必须让浏览器执行跨域请求(CORS)(开启 crossOrigin 机制), 否则将跨域的图片绘制到 canvas 上会导致 canvas 被污染, 执行 canvas.toDataURL 会因为安全风险而导致执行失败抛出异常。

3. 开启 html2canvas 的 useCORS 选项, 理论上就是运用 CORS 机制跨域加载图片。但受缓存的影响,生成的图片会没有微信头像。因此可以先自行获取到图片的 base64 数据, 替换掉图片的 src 避免产生跨域的问题。另外，如果开启了 allowTaint 选项, 会导致生成图片失败。

补充

关于在 HTTPS 的页面中加载 HTTP 的内容, 我们的印象中是所有的 HTTP 的内容都会被浏览器阻止。例如我们常见的 CSS/JS/XHR 都会被浏览器阻止, 浏览器会给出 ERROR 级别的错误。

注意: 早期的浏览器版本(我测试的 chrome 12 版本), 混合的 HTTP 内容都可以加载成功, 不会被浏览器屏蔽, 只是有警告。

但事实并不是这样的, 但发现图片内容是可以加载成功的, 不会被浏览器阻止, 由此可以推断出媒体类无代码执行权限的内容(即纯用于显示的内容)是不会被浏览器阻止的, 只是给出 WARN 级别的警告信息。

在开发的过程中需要生成带微信头像的图片, 在 PC 端(因为开发习惯了使用 Disable cache)测试都是可以的, 一到移动端就不行了, 试过很多办法后无果(〒_〒绝望了...) 突发奇想将微信头像 URL 的 HTTPS 替换成 HTTP, 发现就能够获取到 base64 的数据了, 很是诡异. 现在理清楚背后的故事, 原来是缓存在作怪, 只要不触发浏览器的缓存就能够通过 CORS 跨域机制获取到图片的 base64 的数据。

推荐阅读