Canvas的實際應用場景1-生成一張主題分享圖片

程式碼星空發表於2018-05-21
Canvas

專案場景

在app中分享某個活動主題的時候，希望分享出一張圖片到第三方，或者有時候最好能帶上二維碼，結合一些第三方社交應用的長按圖片識別圖中二維碼等等一些場景。HTML5 Cancas 就特別適合，HTML5 canvas 標籤 可以定義圖形，作為圖形容器，使用js指令碼來繪製圖形。這些操作都是為了招新跟躍活（就是吸引新使用者跟活躍已有使用者，讓他們覺得我們們app還是有點料的之類的巴拉巴拉產品訴求），接下來我們就從技術層面上來說下實現一個主題分享圖片的基本步驟與應用過程。

需求分析

需要生成的圖片形如下圖，非常可愛的一張圖哈。技術點上主要是要在canvas上生成文字，生成圖片，並對文字與圖片進行設定（展示與定位），圖中的二維碼是使用站外生成好的圖片，並不是直接用程式碼去生成二維碼的。關於js程式碼動態生成二維碼，在今後會有專門的介紹哈。

Canvas的實際應用場景1-生成一張主題分享圖片

Canvas生成圖片

Canvas初始化

js: var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); 如果生成的圖片要在頁面展示可以先定義一個canvas在dom中，因為我們專案是不需要展示在頁面中的，所以是在js中動態建立一個canvas標籤，然後追加並且不顯示。 var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); // 圖片寬高為iphone6的2倍率 canvas.width = 750; canvas.height = 1203; 備註：圖片的寬高是以2倍率來設定，跟設計稿的設計是一樣的，也不用做單位換算，所以接下來的單位都是跟設計稿2倍率一模一樣的，生成圖片之後可以再進行大小設定，這是為了保持圖片的清晰度。

canvas 設定圖片

  1. 設定背景圖，我們的背景圖是平鋪的， ctx.fillStyle = ctx.createPattern(imgs[0], "repeat"); ctx.fillRect(0, 0, 750, 1334); 說明：ctx.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat"); createPattern() 方法在指定的方向內重複指定的元素。元素可以是圖片、視訊，或者其他canvas元素。被重複的元素可用於繪製/填充矩形、圓形或線條等等。
  2. 普通圖片 ctx.drawImage(imgs[3], 238.5, 26); 說明：ctx.drawImage(imageObj, x, y, width, height); x/y 繪製的起始座標，width/height 圖片的寬高設定，不設定寬高會以原檔案寬高展示。

canvas 設定文字

  1. 普通文字 var text1 = $(".name").text(); ctx.font = "bold 24px PingFang"; //設定文字大小 + 字型 ctx.fillStyle = "#28280B"; //設定文字顏色 var tagW5 = ctx.measureText(tag5).width; //獲取文字的寬度，主要是為了讓文字水平居中 ctx.fillText(tag5, 750 - 68 - tagW5, 855); //繪製文字 + 文字 x 和 y 的座標位置
  2. 描邊文字 ctx.font = '500 60px dateFont'; ctx.lineWidth = 4; ctx.strokeStyle = '#28280B'; // 字型描邊 ctx.letterSpace = 3; var width = ctx.measureText(text1).width; ctx.strokeText(text1, (750 - width)/2, 160); ctx.fillStyle = '#fff'; // 字型填充 ctx.fillText(text1, (750 - width)/2, 160); 說明: 需要結合strokeText與fillText達到效果

canvas畫布轉為圖片格式

獲取影象資料 URL var dataURL = ctx.toDataURL("image/jpeg"); 得到的一個base64位的圖片資料格式，"image/jpeg" 是png的圖片格式，也支援image/jpeg 或 image/webp；第二個引數可選encoderOptions 為圖片質量

其他注意點

  • 在繪製圖片的時候，要保證圖片先載入完成，載入完成再繪製
  • base 64位的圖片不符合分享的圖片要求，分享協議要求是有域名的，需要上傳到CDN，這個需要藉助介面
  • 關於圖片大小與清晰圖：圖片大小按照2倍率生成，在分享的時候可以適當的壓縮，同時圖片的質量引數也會影響到最終生成的圖片清晰圖，根據專案需求調整。

遇到的問題

  • 介面圖片併發情況下返回相同的圖片，CDN圖片命名問題，以秒級是不夠的
  • 清晰度不夠，特別是白色的字型清晰度缺失特別明顯，需要調圖片質量引數
  • 文字是專案自載入字型，不是系統預設的字型，偶爾會出現文字未正確識別的問題，偶發，但是還未有解決方案來監聽字型是否正確解析，希望有知道的小夥伴可以告知，不勝感激！

進一步學習地址

http://canvas.migong.org/html5-canvas

相關文章