跟着APP的獲客本錢越來越高，許多產物最先從wap頁引流，而最常見的體式格局就是分享，尤其是在微信中。因而誕生了一些新弄法，比方天生一張海報圖片，用戶可以保留或分享到其他平台。

本文將引見怎樣天生一張海報圖片，以及可以會遇到的題目和解決方案。

canvas轉圖片

如今挪動端瀏覽器關於canvas的支撐非常好，而canvas可以經由過程toDataURL來轉換成base64圖片。

市場上的一些js庫，如：html2canvas、dom-to-image，其本質也是經由過程toDataURL來轉換成圖片。但我個人不太發起運用這類js庫，由於你可以須要填許多坑，效果也並不一定能到達你的希冀，所以照樣老老實實用canvas畫出來吧。

外鏈圖片

最主要也是最龐雜的就是對外鏈圖片的處置懲罰，canvas畫圖時不會有任何題目，然則挪用toDataURL這個要領時，瀏覽器會報錯。

跨域

你要求的外域圖片，可以會暴露你的隱私，所以瀏覽器為了庇護你的隱私限定了如許的要求。

我們可以設置crossOrigin為anonymous來許可跨域，瀏覽器會為這張圖片的要求頭附帶Origin信息，通知靜態資本服務器，請在相應頭中附帶Access-Control-Allow-Methods、Access-Control-Allow-Origin，以便瀏覽器放行。

然則有些時刻，設置了crossOrigin依舊會報錯，實在不是設置了沒有作用，而是cdn緩存了服務器相應效果，這個效果往往是沒有上述兩個字段的。這個時刻可以斟酌給圖片鏈接后追加時候戳，關於cdn來講，這是一個沒有要求過的資本，因而它會從源服務器去拿數據。

代碼示例以下：

var img = new Image()
img.crossOrigin = 'anonymous'
img.onload = function () {
  // 在圖片加載完成后畫圖，防止空缺和斷斷續續加載
  ctx.drawImage(img, 0, 0)
}
img.src = 'https://xxxx' + '?' + (+new Date())

保留圖片

a標籤有一個download屬性，可以將指定的資本下載下來，但該要領只適用於pc端，挪動端基礎不支撐（Safari會打開一個base64的網頁，而在微信中以至不會有任何相應，更不必提浩瀚的安卓機）。

既然不能在瀏覽器主動保留圖片，我們只好另闢蹊徑，經調研發明：如今絕大多數的挪動端瀏覽器都支撐長按圖片喚起下拉菜單來保留，因而我們可以經由過程案牘提醒用戶舉行操縱，但它的弊病是沒有API來挪用，也就是說只能提醒用戶自覺地舉行長按保留操縱，而我們關於用戶是不是保留了圖片是無感知的。

文末總結

關於如今的產物需求，長按圖片保留基礎可以滿足要求。所以，如今的做法是：經由過程canvas繪製一張海報圖片，將其轉換為base64圖片，建立img標籤並襯着到視圖上，筆墨提醒用戶長按可以保留（只要在圖片上長按才有用）。

示例代碼：

var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')

canvas.width = 300
canvas.height = 300

// 畫圓
ctx.fillStyle = 'yellow'
ctx.fillRect(0, 0, 50, 100)

ctx.strokeStyle = 'blue'
ctx.strokeRect(0, 120, 50, 100)

var img = new Image()
img.onload = () => {
  // 畫圖片
  ctx.drawImage(img, 60, 0)
  // toImage
  var dataImg = new Image()
  dataImg.src = canvas.toDataURL('image/png')
  document.body.appendChild(dataImg) // 長按圖片保留
}
img.crossOrigin = 'anonymous'
img.src = 'https://nos.netease.com/easyread/fle/a0df1d4009c7a2ec5fee/1524215500140/avatar.png?' + (+new Date())