这次拜年祭做了一个集卡游戏的营销活动,需要分享一张获奖图片出去,我是用canvas画出来的,中间遇到了两个坑,与大家分享一下,最终图片做出来的效果如下:

【1】第1个坑是跨域的问题
一般我们图片都会放在静态资源cdn服务器上,而域名与我们项目域名一般不同,这就存在一个跨域问题。即使服务端会设置CORS的跨域响应头,但是在js中使用canvas toDataURL api时,会报这样的错

这就需要将图片设置crossOrigin属性了,img.crossOrigin = 'Anonymous';
【2】第2个坑是缓存的问题
一般为了减少带宽和提升用户体验,cdn对静态资源都会设置缓存,而我发现我们测试环境cdn服务器就设置了3年的强制缓存时间,所以导致了第2次进行加载图片的时候,浏览器根本不会发请求到服务器。又因为是跨域图片设置了crossOrigin属性,所以对图片的监听事件总是走到了error事件中(在我ios上会,在pc chrome浏览器中不会)。可以通过对请求的图片url加一个时间戳查询参数避免走浏览器缓存。
本文分享了在使用Canvas进行图片处理时遇到的跨域及缓存问题解决方案。跨域问题通过设置图片crossOrigin属性解决,缓存问题则通过在图片URL中添加时间戳查询参数避免。

被折叠的 条评论
为什么被折叠?



