基于canvas生成圖片

calx 發(fā)布于2019-08-22 17:01 / 2653人閱讀

摘要：本文將介紹如何生成一張海報(bào)圖片，以及可能會(huì)碰到的問題和解決方案。轉(zhuǎn)圖片目前移動(dòng)端瀏覽器對(duì)于的支持非常好，而可以通過來轉(zhuǎn)換成圖片。

隨著APP的獲客成本越來越高，很多產(chǎn)品開始從wap頁引流，而最常見的方式便是分享，尤其是在微信中。因此誕生了一些新玩法，比如生成一張海報(bào)圖片，用戶可以保存或分享到其他平臺(tái)。

本文將介紹如何生成一張海報(bào)圖片，以及可能會(huì)碰到的問題和解決方案。

canvas轉(zhuǎn)圖片

目前移動(dòng)端瀏覽器對(duì)于canvas的支持非常好，而canvas可以通過toDataURL來轉(zhuǎn)換成base64圖片。

市場(chǎng)上的一些js庫，如：html2canvas、dom-to-image，其本質(zhì)也是通過toDataURL來轉(zhuǎn)換成圖片。但我個(gè)人不太建議使用這類js庫，因?yàn)槟憧赡苄枰詈芏嗫樱Y(jié)果也并不一定能達(dá)到你的期望，所以還是老老實(shí)實(shí)用canvas畫出來吧。

外鏈圖片

最重要也是最復(fù)雜的便是對(duì)外鏈圖片的處理，canvas繪圖時(shí)不會(huì)有任何問題，但是調(diào)用toDataURL這個(gè)方法時(shí)，瀏覽器會(huì)報(bào)錯(cuò)。

跨域

你請(qǐng)求的外域圖片，可能會(huì)暴露你的隱私，所以瀏覽器為了保護(hù)你的隱私限制了這樣的請(qǐng)求。

我們可以設(shè)置crossOrigin為anonymous來允許跨域，瀏覽器會(huì)為這張圖片的請(qǐng)求頭附帶Origin信息，告訴靜態(tài)資源服務(wù)器，請(qǐng)?jiān)陧憫?yīng)頭中附帶Access-Control-Allow-Methods、Access-Control-Allow-Origin，以便瀏覽器放行。

但是有些時(shí)候，設(shè)置了crossOrigin依然會(huì)報(bào)錯(cuò)，其實(shí)不是設(shè)置了沒有作用，而是cdn緩存了服務(wù)器響應(yīng)結(jié)果，這個(gè)結(jié)果往往是沒有上述兩個(gè)字段的。這個(gè)時(shí)候可以考慮給圖片鏈接后追加時(shí)間戳，對(duì)于cdn來說，這是一個(gè)沒有請(qǐng)求過的資源，因此它會(huì)從源服務(wù)器去拿數(shù)據(jù)。

代碼示例如下：

var img = new Image()
img.crossOrigin = "anonymous"
img.onload = function () {
  // 在圖片加載完成后繪圖，避免空白和斷斷續(xù)續(xù)加載
  ctx.drawImage(img, 0, 0)
}
img.src = "https://xxxx" + "?" + (+new Date())

保存圖片

a標(biāo)簽有一個(gè)download屬性，可以將指定的資源下載下來，但該方法只適用于pc端，移動(dòng)端基本不支持（Safari會(huì)打開一個(gè)base64的網(wǎng)頁，而在微信中甚至不會(huì)有任何響應(yīng)，更不用提眾多的安卓機(jī)）。

既然不能在瀏覽器主動(dòng)保存圖片，我們只好另辟蹊徑，經(jīng)調(diào)研發(fā)現(xiàn)：現(xiàn)在絕大多數(shù)的移動(dòng)端瀏覽器都支持長(zhǎng)按圖片喚起下拉菜單來保存，因此我們可以通過文案提示用戶進(jìn)行操作，但它的弊端是沒有API來調(diào)用，也就是說只能提示用戶自發(fā)地進(jìn)行長(zhǎng)按保存操作，而我們對(duì)于用戶是否保存了圖片是無感知的。

文末總結(jié)

對(duì)于目前的產(chǎn)品需求，長(zhǎng)按圖片保存基本能夠滿足要求。所以，目前的做法是：通過canvas繪制一張海報(bào)圖片，將其轉(zhuǎn)換為base64圖片，創(chuàng)建img標(biāo)簽并渲染到視圖上，文字提示用戶長(zhǎng)按可以保存（只有在圖片上長(zhǎng)按才有效）。

示例代碼：

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) // 長(zhǎng)按圖片保存
}
img.crossOrigin = "anonymous"
img.src = "https://nos.netease.com/easyread/fle/a0df1d4009c7a2ec5fee/1524215500140/avatar.png?" + (+new Date())