之前研究過一個(gè)生成長圖的插件,html2canvas,是利用把DOM結(jié)構(gòu)模擬到canvas,從而把canvas轉(zhuǎn)換成圖片,但是呢,這個(gè)牽涉到跨域,也就是說,跨域圖片會(huì)污染canvas畫布,從而導(dǎo)致長圖生成失敗!
好的,其實(shí)官網(wǎng)上有一些代理的解決辦法,但是對(duì)于微信的圖片,根據(jù)我們的實(shí)際應(yīng)用場(chǎng)景,會(huì)先抓取微信的圖片鏈接,從而上傳到我們的七牛云上。
在實(shí)際操作中,碰到了一些問題,對(duì)于一些圖片的抓取失敗,這就很尷尬了,前后端一起排查這個(gè)問題差不多兩個(gè)周,最后發(fā)現(xiàn)在safari里復(fù)制過來的微信圖片能正常渲染,而在chrome里復(fù)制過來的就會(huì)出現(xiàn)一系列錯(cuò)誤,最后對(duì)比兩個(gè)瀏覽器的鏈接才發(fā)現(xiàn),chrome里比safari的鏈接多了一些東西,導(dǎo)致不能正常的識(shí)別出圖片的格式類型。

我們暫且先看一下這個(gè)地址,粗略一看和safari的沒有什么區(qū)別,但是

這里多了一些東西,正是
tp=webp&的影響,才識(shí)別不出圖片的格式類型,所以要做的就是把這個(gè)replace替換掉。