html5中canvas微信海報(bào)分享的示例分析-創(chuàng)新互聯(lián)
小編給大家分享一下html5中canvas微信海報(bào)分享的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
我們提供的服務(wù)有：網(wǎng)站制作、
成都網(wǎng)站制作、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、
七臺(tái)河ssl等。為數(shù)千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的
七臺(tái)河網(wǎng)站制作公司隨機(jī)產(chǎn)生一張圖片
拿到微信用戶的頭像和稱呢（自己調(diào)后端的接口獲?。?/p>
把用戶頭像和稱呢和隨機(jī)產(chǎn)生一張圖片合成一張海報(bào)
可能上一頁用戶還有填入的心愿文本也要填入圖片中
實(shí)現(xiàn)效果圖
記錄下在實(shí)現(xiàn)功能過程中遇到的問題
canvas在微信瀏覽器中長(zhǎng)按無效不能像img一樣長(zhǎng)按分享（那我就轉(zhuǎn)成img唄）
轉(zhuǎn)成img后在微信開發(fā)者工具中能顯示，真機(jī)無效（欲哭無淚），度娘說可能是圖片跨域^-^
用戶頭像合成還要圓角，我表示不會(huì)啊，直接看canvas api文檔了對(duì)度娘無愛了
canvas填入文字超過指定寬度也要換行，我表示只知道不超多指定寬度的各種文字對(duì)齊方式 ctx.textAlign = 'center' ;
canvas在高清屏下模糊的問題（超簡(jiǎn)單的不知道度娘怎么會(huì)那么啰嗦）不就是canvas.witdt=innerWidth*devicePixelRatio
HTML結(jié)構(gòu)
CSS
script
// js主要結(jié)構(gòu)
new Vue({
el:'imgBox',
data:{
urlParam: {},//獲取url中的傳值對(duì)象
randomNum: 1,//隨機(jī)數(shù)用于確定那個(gè)祈福頁
userName: '',//用戶稱呢
imgSrc: '',//合成最終圖片
userImg: '',//用戶頭像圖片
userMessage: '',//用戶留言
},
methods: {
// 分享到盆友圈
wxShareFriends: function () {},
// 初始化請(qǐng)求頭
wxHttp: function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
},
// 獲取隨機(jī)數(shù)[1,10]
randomNumbers() {
this.randomNum = Math.ceil(Math.random() * 10)
},
// 獲取微信用戶頭像和稱呢和用戶輸入祝福語
getUserInfo() {
var vm = this;
$.post('API請(qǐng)求地址', function (data) {
if (data.code == 1) {
vm.userImg = data.data.headimg;
vm.userName = data.data.nickname;
if (vm.randomNum % 2 == 0) {
vm.userMessage= '紅塵相遇，年華已老。歲月花開多少不在，古往今來相遇是一件既微妙。而又神圣的事情，紅塵的情網(wǎng)中'
} else {
vm.userMessage = '紅塵相遇，年華已老'
}
}
vm.$nextTick(function () {
vm.drawCanvasBgImg();
})
})
},
// 獲取頁面dpr和寬度
getWindowInfo() {
var windowInfo = {};
windowInfo.dpr = window.devicePixelRatio;
if (window.innerWidth) {
windowInfo.width = window.innerWidth;
}
else {
windowInfo.width = document.body.clientWidth;
}
return windowInfo;
},
// 畫活動(dòng)頁分享背景大圖
drawCanvasBgImg () {},
// 在背景圖片的畫布上截取一個(gè)圓然后填充入用戶頭像
drawCanvasUserImg(canvas, ctx, dpr) {},
// 填寫用戶稱呢或者用戶留言
canvasFillText (canvas, ctx, dpr, circleR) {},
// 合成base64位分享圖
convertCanvasToImage (canvas) {
this.imgSrc = canvas.toDataURL("image/jpeg");//png有毒在安卓機(jī)下識(shí)別二維碼無法跳轉(zhuǎn)
this.$Spin.hide();
}
}
})畫圖方法步驟
drawCanvasBgImg ()
drawCanvasUserImg (canvas, ctx, dpr)
canvasFillText (canvas, ctx, dpr, circleR)
convertCanvasToImage (canvas)
畫活動(dòng)頁分享背景大圖 drawCanvasBgImg ()
//拿到數(shù)據(jù)后開始畫背景大圖 想法很簡(jiǎn)單就是把圖片畫到canvas中然后在畫布上再畫頭像文字讓后轉(zhuǎn)成img
drawCanvasBgImg () {
var vm = this;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var clientWidth = this.getWindowInfo().width; //獲取屏幕寬度用于canvas寬度自適應(yīng)移動(dòng)端屏幕
var dpr = this.getWindowInfo().dpr;
ctx.globalCompositeOperation = "source-atop";//** 坑鋸齒感覺沒什么用不知道是不是用錯(cuò)地方了 **
canvas.width = dpr * clientWidth; //由于手機(jī)屏幕時(shí)retina屏，都會(huì)多倍渲染，用dpr來動(dòng)態(tài)設(shè)置畫布寬高，避免圖片模糊
canvas.height = dpr * clientWidth * 609 / 375;//去掉微信頭部的狀態(tài)欄應(yīng)該是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 (canvas, ctx, dpr)
// 在背景圖片的畫布上截取一個(gè)圓然后填充入用戶頭像
drawCanvasUserImg: function (canvas, ctx, dpr) {
var vm = this;
var circleR = 50 * dpr;//半徑
var circleX = canvas.width / 2;//圓心X坐標(biāo)
var circleY = 50 * dpr;//圓心Y坐標(biāo)
var imgX = circleX - circleR;//圖片X開始坐標(biāo)
var imgY = circleY - circleR;//圖片Y開始坐標(biāo)
var imgWidth = 2 * circleR;//圖片按圓形大小
var img = new Image();
img.crossOrigin = '';
img.src = this.userImg;
img.onload = function () {
ctx.save(); // 保存當(dāng)前ctx的狀態(tài)
ctx.arc(circleX, circleY, circleR, 0, 2 * Math.PI); //畫出圓
ctx.clip(); //裁剪上面的圓形
ctx.drawImage(img, imgX, imgY, imgWidth, imgWidth); // 在剛剛裁剪的園上畫圖
ctx.restore(); // 還原狀態(tài)
vm.canvasFillText(canvas, ctx, dpr, circleR);
}
},在canvas中畫文字
// 填寫用戶稱呢或者用戶留言
canvasFillText (canvas, ctx, dpr, circleR) {
var fontSizeThis = dpr * 20 + 'px' + ' Arial';
var userNameY = 0;//用戶名Y軸坐標(biāo)
var userMessageX = dpr * 40;//用戶留言X軸坐標(biāo)
var userMessageY = 0;//用戶留言Y軸坐標(biāo)
var lastSubStrIndex = 0;//字符串下標(biāo)
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";
// 獲取字符寬度
for (var i = 0; i < this.userMessage.length; i++) {
allTextWidth += ctx.measureText(this.userMessage[i]).width;
}
// 字符串長(zhǎng)度大于畫布區(qū)域要換行
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, i), userMessageX, userMessageY);
userMessageY += dpr * 25;//設(shè)置行高
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);
},以上是“html5中canvas微信海報(bào)分享的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
新聞名稱：html5中canvas微信海報(bào)分享的示例分析-創(chuàng)新互聯(lián)
分享鏈接：
http://weahome.cn/article/diecgp.html
重慶分公司
重慶分公司
