之前研究过一个生成长图的插件,html2canvas,是利用把DOM结构模拟到canvas,从而把canvas转换成图片,但是呢,这个牵涉到跨域,也就是说,跨域图片会污染canvas画布,从而导致长图生成失败!
好的,其实官网上有一些代理的解决办法,但是对于微信的图片,根据我们的实际应用场景,会先抓取微信的图片链接,从而上传到我们的七牛云上。
在实际操作中,碰到了一些问题,对于一些图片的抓取失败,这就很尴尬了,前后端一起排查这个问题差不多两个周,最后发现在safari里复制过来的微信图片能正常渲染,而在chrome里复制过来的就会出现一系列错误,最后对比两个浏览器的链接才发现,chrome里比safari的链接多了一些东西,导致不能正常的识别出图片的格式类型。
我们暂且先看一下这个地址,粗略一看和safari的没有什么区别,但是
这里多了一些东西,正是
tp=webp&
的影响,才识别不出图片的格式类型,所以要做的就是把这个replace替换掉。