1.跨域圖片無法展示

我們的圖片資源是走cdn的，所以導致了圖片的連結域名與網頁的域名不一致，而產生了跨域問題，可能導致圖片無法展示。

解決： 步驟1：將html2canvas中的引數設定中的useCORS屬性改為true，使html2canvas接受處理跨域資源。 步驟2： 使圖片資源允許跨域（響應頭中加上 Access-Control-Allow-Origin: *） 這樣就能顯示跨域圖片了~

第三方跨域圖片處理： 自己的圖片實現允許跨域還是比較容易的，但如果用到了第三方的不允許跨域的圖片（如微信頭像）呢，這時候需要我們再多做一下處理，將那張圖片變成允許跨域的啦....

看別人的做法是：在伺服器上實現第三方圖片的代理

為了一個活動而修改伺服器的nginx配置，是不是不太好（慫=.=）。

所以我們活動裡換了另一種方式。

後端不直接返回微信頭像，而是一個能對應相關微信頭像的連結（這個連結的資源允許跨域），當後端接收到這個連結的請求時，拉取微信頭像資訊，再返回給前端這個頭像的圖片資訊。[這裡的後端指的活動中的後端程式碼，與上面的改nginx配置不是一個做法]

後來發現，這個拉取微信頭像的操作有時會超時，所以我們又做了層處理，在第一次獲取微信頭像後，將這個頭像上傳到自己的圖片庫中（非同步操作），以後訪問頁面，需要微信頭像時，就返回圖片庫中的圖片連結（當然，這個圖片庫連結也是可以跨域的）。

2.生成的分享圖片不清晰

這裡的不清晰指的有兩方面：

1. 整張分享圖片的清晰度不夠
2. 原分享頁面中的圖片在生成的分享圖片中的清晰度不夠

整張分享圖片清晰度不夠問題解決： 這裡的清晰度不夠的問題，是由於圖片的實際物理畫素點不夠的原因造成的，這裡我的處理方法修改html2canvas的scale屬性，增大繪製時的縮放比例，從而提高清晰度

html2canvas($snapshot, {
    useCORS: true,
    scale: window.devicePixelRatio*2 // 預設值是window.devicePixelRatio
    backgroundColor: null,
    logging: false
});
複製程式碼
 

原分享頁面中的圖片在生成圖片中清晰度不夠問題解決

我們在分享頁面中有用到兩種方式展示圖片：

1. 使用img標籤元素引入圖片
2. 使用元素中的背景圖片引入圖片

但從實際生成的圖片的效果發現，使用頁面中使用背景圖片的部分，在分享快照中會特別的不清晰，而且背景圖片的底部會有一些原頁面中沒有的小刺點（如下圖的背景圖裡，生成的圖片中富途logo下有一條類似的白色細線，但原頁面中卻沒有）。

而使用img標籤元素引入圖片則不會存在這種情況。

• 縮放過的背景圖片

  

• img元素的圖片

  

從圖中可以看出，兩張圖的頁面截圖（上部分圖）顯示的清晰度是差不多的，但通過html2canvs生成圖片之後，明顯看出，背景圖的那張圖片的清晰度差好多，而且周圍還有些渣渣小點。

so: 如果分享快照中有用到圖片的話，還是儘量使用img標籤，而不是用背景圖，以保證分享圖片的清晰度。

分享圖片頁面中雪碧圖 在重構分享圖片頁面時，裡面有個vs的內容，裡面的陣營圖片會根據使用者的陣營選擇和最終獲勝陣營的結果而展示不同的內容，而我們為了頁面的效能問題，還有開發的方便，將這些陣營圖片拼成了一張雪碧圖，通過class控制展示不同的圖片。 一開始我也沒想到怎麼用img元素去展示雪碧圖，就還是用了背景圖來顯示陣營選擇這塊內容，後來就時不時被產品童鞋吐槽分享圖片中那部分內容太模糊了....。

後來想了想，如果使用的是雪碧圖的話，也是可以改成用img標籤展示的：

<span class="emoji emoji01"><img src="/emoji.png" alt=""></span>

<style>
.emoji{
    width: 10px;
    height: 10px;
    /*固定大小，超過的隱藏*/
    overflow: hidden;
    display: block;
    position: relative;
}
.emoji.emoji01 img{
    position: absolute;
    /*使用top,left 偏移img圖片使之展示對應的位置*/
    top: 0;
    left: -20px;
}
</style>
複製程式碼

3.img 圖片對 transform屬性的相容性不是很好

html2canvas的官方文件中，有列了一些相容性不是很好的css屬性，所以自己多測試一下，不能支援的屬性，就換一種寫法啦~。

在活動中遇到的是，img元素中的transform的實現不太好。

例子中是想將圖片居中展示，所以給img元素加了以下的css：

img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
}
複製程式碼

但實際上出來的效果是這樣的...。

轉載連結：https://juejin.im/post/5ba1ab97e51d450e8a65f9ac