html5中canvas微信海报分享的示例分析

小编给大家分享一下html5中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

HTML结构

<divclass="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主要结构
newVue({
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(){
varvm=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(){
varwindowInfo={};
windowInfo.dpr=window.devicePixelRatio;
if(window.innerWidth){
windowInfo.width=window.innerWidth;
}
else{
windowInfo.width=document.body.clientWidth;
}
returnwindowInfo;
},
//画活动页分享背景大图
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)

画活动页分享背景大图 drawCanvasBgImg ()

//拿到数据后开始画背景大图想法很简单就是把图片画到canvas中然后在画布上再画头像文字让后转成img
drawCanvasBgImg(){
varvm=this;
varcanvas=document.createElement("canvas");
varctx=canvas.getContext("2d");
varclientWidth=this.getWindowInfo().width;  //获取屏幕宽度用于canvas宽度自适应移动端屏幕
vardpr=this.getWindowInfo().dpr;
ctx.globalCompositeOperation="source-atop";//**坑锯齿感觉没什么用不知道是不是用错地方了**
canvas.width=dpr*clientWidth;  //由于手机屏幕时retina屏，都会多倍渲染，用dpr来动态设置画布宽高，避免图片模糊
canvas.height=dpr*clientWidth*609/375;//去掉微信头部的状态栏应该是603没搞懂603还是不能让图片满屏直接多加到了609
varimg=newImage();
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)

//在背景图片的画布上截取一个圆然后填充入用户头像
drawCanvasUserImg:function(canvas,ctx,dpr){
varvm=this;
varcircleR=50*dpr;//半径
varcircleX=canvas.width/2;//圆心X坐标
varcircleY=50*dpr;//圆心Y坐标
varimgX=circleX-circleR;//图片X开始坐标
varimgY=circleY-circleR;//图片Y开始坐标
varimgWidth=2*circleR;//图片按圆形大小
varimg=newImage();
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);
}
},

在canvas中画文字

//填写用户称呢或者用户留言
canvasFillText(canvas,ctx,dpr,circleR){
varfontSizeThis=dpr*20+'px'+'Arial';
varuserNameY=0;//用户名Y轴坐标
varuserMessageX=dpr*40;//用户留言X轴坐标
varuserMessageY=0;//用户留言Y轴坐标
varlastSubStrIndex=0;//字符串下标
varlineWidth=0;//一行宽度
varallTextWidth=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(vari=0;i<this.userMessage.length;i++){
allTextWidth+=ctx.measureText(this.userMessage[i]).width;
}
//字符串长度大于画布区域要换行
if(allTextWidth>canvas.width-2*userMessageX){
for(vari=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;//设置行高
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微信海报分享的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道！