题材网前段时间冤家圈里经常有看到这样的的头像
既然这么火，各人要图又这么难，作为顺序员的本人固然要本人入手完成视频题材一个。
老例子，先看效果图
细心研讨了下，意外发现完成起来并不难，中心代码只要上面10行。
wx.ca影视题材nva四季题材sToTempFilePath{
x:0,
y:0,
width:num,
height:num,
de作文题材stWidth:num,
destHeight:num,
canvasId:\’shareImg\’,
that.s影视题材etData{
prurl:res.tempFilePath
}
wx.hideLoad
},
fail:functionre{
wx.hideLoad
}
}
一，先要创立瀑布题材一个小程序
至于怎样创立小程序，这里就不在细讲了也有写过创立小程序的文章，也有路过相关的去学习视频，去翻下我历史的文章找找就行。
二，创立好小程序后，就开端来布局
规划很简单，作文题材只要上面几行代码。
天生头像1
天生头像2
天生头像3
天生头像4
保管分享图
完成好效果图如下
三，运用canva来画图
实在我完成微信头像挂红旗短片题材，基学生题材本原理很简单，就是把头像放在上面，接着把有红旗的相框盖在头像下面
上面就直接把把中心代码贴给大家
letpromi小说题材se1=newP学生题材romisfunctionresolve,reject{
wx.getImageInfo{
src:”../../images/xiaoshitou.jpg”,
success:functionre{
console.log”promise1″,re
resolvre;
}
}
};
letpromise2=newPromisfunctionresolve,reject{
wx.getImageInfo{
src:`../../images/head${index}.png`,
success:functionre{
console.logre
resolvre;
}
}
};
Promise.al[
promise1,promise2
].thenre=>{
console.log”Promise.all”,re
//次要就是盘算好各个图文的地位
letnum=1125;
ctx.drawImag\’../../\’+res[0].path,0,0,num,num
ctx.drawImag\’../../\’+res[1].path,0,0,num,num
ctx.stroke
ctx.drawfalse,=>{
wx.canvasToTempFilePath{
x:0,
y:0,
width:num,
height:num,
destWidth:num,
destHeight:num,
canvasId:\’shareImg\’,
success:functionre{
that.setData{
prurl:res.tempFilePath
}
wx.hideLoad
},
fail:functionre{
wx.hideLoad
}
}
}
}
来看下画出来的好效果图
四，头像加红旗画好以后，就要想方法把图片保存到当地了
保管图片的代码也很简单。
save:function{
varthat=this
wx.saveImageToPhotosA lbum{
filePath:that.data.prurl,
successre{
wx.showMod{
content:\’图片已保存到相册，赶忙晒一下吧~\’,
showCancel:false,
confirmText:\’好哒\’,
confirmColor:\’#72B9C3\’,
success:functionre{
ifres.confirm{
console.log\’用户点击确定\’;
}
}
}
}
}
}
来看下保存后的好效果图
这里，微信头像就成功的加上了小红旗了
源码我也曾经给各人预备好了有需要的同窗在文末留言即可。
前面我预备录制一门视频课程出，来详尽教各人完成这个功用，敬请关注更多。
原文链接：https://blog.csdn.net/weixin_34546240/article/details/117866618?ops_request_misc=%257B%短片题材2522request%255Fid%2522%253A %2522166856496116782作文题材388081138%2522%252C%2522scm%2522%253A %252220140713.130102334.pc%255Fblog.%2522%257D&request_id=166856496116782388081138&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_e小说题材cpm_v1~times_rank-5-117866618-null-null.nonecase&utm_term=%E9%A 2%98%E6%9D%90
未经允许不得转载：题材网 » html国庆节代码,小程序10行代码完成微信头像挂红旗，国庆节特性化头像
