詳解html5 canvas 微信海報分享（個人爬坑）

本文介紹了canvas 微信海報分享，分享給大家，具體如下：

1. 隨機產生一張圖片
2. 拿到微信用戶的頭像和稱呢（自己調後端的介面取得）
3. 把使用者頭像和稱呢和隨機產生一張圖片合成一張海報
4. 可能上一頁使用者還有填入的心願文字也要填入圖片中

1. canvas在微信瀏覽器中長按無效不能像img一樣長按分享（那我就轉成img唄）
2. 轉成img後在微信開發者工具中能顯示，真機無效（欲哭無淚），度娘說可能是圖片跨域^-^
3. 使用者頭像合成還要圓角，我表示不會啊，直接看canvas api文檔了對度娘無愛了
4. canvas填入文字超過指定寬度也要換行，我表示只知道不超多指定寬度的各種文字對齊方式ctx.textAlign = 'center' ;
5. canvas在高畫質螢幕下模糊的問題（超簡單的不知道度娘怎麼會那麼囉嗦）不就是canvas.witdt=innerWidth*devicePixelRatio

<div class=imgBox v-cloak> <img :src='imgSrc' v-if=imgSrc /></div>

CSS

 <style> *{ margin:0; padding:0; } body, html { width: 100%; height: 100%; } .imgBox { width: 100%; height: 100%; } img { width: 100%; display: block; }</style>

script

 // js主要結構new Vue({ el:'imgBox', data:{ urlParam: {},//取得url中的傳值物件randomNum: 1,//隨機數用於確定那個祈福頁userName: '' ,//使用者稱為呢imgSrc: '',//合成最終圖片userImg: '',//使用者頭像圖片userMessage: '',//使用者留言}, methods: { //分享到盆友圈wxShareFriends: function () {}, // 初始化請求頭wxHttp: function () { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name=csrf-token ]').attr('content') } }); }, // 取得隨機數[1,10] randomNumbers() { this.randomNum = Math.ceil(Math.random() * 10) }, // 取得微信使用者頭像和稱呢和使用者輸入祝福語getUserInfo() { var vm = this; $.post('API請求位址' , function (data) { if (data.code == 1) { vm.userImg = data.data.headimg; vm.userName = data.data.nickname; if (vm.randomNum % 2 == 0) { vm.userMessage= '紅塵相遇，年華已老。 else { vm.userMessage = '紅塵相遇，年華已老' } } vm.$nextTick(function () { vm.drawCanvasBgImg(); }) }) }, // 取得頁面dpr和寬度getWindowInfo() { var windowInfo = {}; windowInfo.dpr = window.devicePixelRatio; if (window.innerWidth) { window.devicePixelRatio; if (window.innerWidth) { windowInfo.width = window. innerWidth; } else { windowInfo.width = document.body.clientWidth; } return windowInfo; }, // 畫活動頁分享背景大圖drawCanvasBgImg () {}, // 在背景圖片的畫布上截取一個圓然後填入使用者頭像drawCanvasUserImg(canvas, ctx, dpr ) {}, // 填入使用者名稱或使用者留言canvasFillText (canvas, ctx, dpr, circleR) {}, //合成base64位元分享圖convertCanvasToImage (canvas) { this.imgSrc = canvas.toDataURL(image/jpeg);//png有毒在安卓機下辨識二維碼無法跳轉this.$Spin.hide(); } }} )

1. drawCanvasBgImg ()
2. drawCanvasUserImg (canvas, ctx, dpr)
3. canvasFillText (canvas, ctx, dpr, circleR)
4. convertCanvasToImage (canvas)

 //拿到資料後開始畫背景大圖想法很簡單就是把圖片畫到canvas中然後在畫布上再畫頭像文字讓後轉成img drawCanvasBgImg () { var vm = this; var canvas = document.createElement( canvas); var ctx = canvas.getContext(2d); var clientWidth = this.getWindowInfo().width;//取得螢幕寬度用於canvas寬度自適應移動端螢幕var dpr = this.getWindowInfo().dpr; ctx.globalCompositeOperation = source-atop;//** 坑鋸齒感覺沒什麼用不知道是不是用錯地方了** canvas.width = dpr * clientWidth;//由於手機螢幕時retina屏，都會多倍渲染，用dpr來動態設定畫布寬高，避免圖片模糊canvas.height = dpr * clientWidth * 609 / 375;//去掉微信頭部的狀態欄應該是603 沒搞懂603還是不能讓圖片滿屏直接多加到了609 var img = new Image(); img.crossOrigin = '';//死坑的圖片跨域（img.crossOrigin = Anonymous這種寫法還是不能顯示base64格式圖片） img.src = http://xxx + this.randomNum + .jpg; img.onload = function () { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); vm.drawCanvasUserImg(canvas, ctx, dpr); }},

 // 在背景圖片的畫布上截取一個圓然後填入使用者頭像drawCanvasUserImg: function (canvas, ctx, dpr) { var vm = this; var circleR = 50 * dpr;//半徑var circleX = canvas.width / 2 ;//圓心X座標var circleY = 50 * dpr;//圓心Y座標var imgX = circleX - circleR;//圖片X開始座標var imgY = circleY - circleR;//圖片Y開始座標var imgWidth = 2 * circleR;//圖片依圓形大小var img = new Image(); img.crossOrigin = ' '; img.src = this.userImg; img.onload = function () { ctx.save(); //儲存目前ctx的狀態ctx.arc(circleX, circleY, circleR, 0, 2 * Math.PI); //畫出圓ctx.clip(); //裁切上面的圓形ctx.drawImage(img, imgX, imgY, imgWidth, imgWidth); // 在剛剛裁切的花園畫圖ctx.restore(); //還原狀態vm.canvasFillText(canvas, ctx, dpr, circleR); }},

// 填寫使用者名稱或使用者留言canvasFillText (canvas, ctx, dpr, circleR) { var fontSizeThis = dpr * 20 + 'px' + ' Arial'; var userNameY = 0;//使用者名稱Y軸座標var userMessageX = dpr * 40;//使用者留言X軸座標var userMessageY = 0;//使用者留言Y軸座標var lastSubStrIndex = 0;//字串下標var lineWidth = 0;//一行寬度var allTextWidth = 0;//所有字元寬度ctx.font = fontSizeThis; // 需要使用者名稱是寫入使用者名稱if (this.userName ) { userNameY = circleR * 2.5; ctx.fillStyle = #0094ff; ctx.textAlign = 'center'; ctx.fillText(this.userName, canvas.width / 2, userNameY); } if (this.userMessage) { userMessageY = userNameY + dpr * 35; ctx.fillStyle = #000; // 取得字元寬度(var i = 0; i < this.userMessage.length; i++) { allTextWidth += ctx.measureText(this.userMessage[i]).width; } // 字串長度大於畫布區域要換行if (allTextWidth > canvas.width - 2* userMessageX) { for (var i = 0; i < this.userMessage.length; i++) { lineWidth += ctx.measureText(this.userMessage[i]).width; if (lineWidth > canvas.width - 2*userMessageX) { ctx.textAlign = 'left'; ctx.fillText(this.userMessage.substring(lastSubStrIndex, ix.userMessage.substring(lastSubStrIndex, iiSubStr. userMessageX, userMessageY); userMessageY += dpr * 25;//設定行高lineWidth = 0; lastSubStrIndex = i; } if (i == this.userMessage.length - 1) { ctx.fillText(this.userMessage.substring(lastSubStrIndex, i + 1), userMessageX, userMessageY); } } } else { //小於者居中顯示ctx.textAlign = 'center'; ctx.fillText(this.userMessage, canvas.width / 2, userMessageY); } } this.convertCanvasToImage(canvas);},

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。