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

項目場景

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

需求分析

須要生成的圖片形以下圖，很是可愛的一張圖哈。技術點上主要是要在canvas上生成文字，生成圖片，並對文字與圖片進行設置（展現與定位），圖中的二維碼是使用站外生成好的圖片，並非直接用代碼去生成二維碼的。關於js代碼動態生成二維碼，在從此會有專門的介紹哈。

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