1.在一二月份做项目的时候，需要做一个微信小程序的自定义的二维码，在此记录与分享如何用Canvas画图怎么自定义一个美观的二维码分享图。先展示下效果：

2.展示的是一个个人中心的小demo，下文会把这个demo的地址分享，导入项目后，点击分享推荐就可得到该效果。

页面//PersonalPage.wxmlviewclass='user'viewclass='firstlayout'imagesrc="{{img}}"class='firstimagestyle'/imageviewclass='firstfontstyle'{{name}}/viewviewclass='secondlayout'viewclass='secondlayoutitem'viewclass='firstfontstyle'积分：/viewviewclass='firstfontstyle'{{scores}}/view/view!--viewclass='lineview'/view--viewclass='secondlayoutitem'viewclass='firstfontstyle'余额：/viewviewclass='firstfontstyle'{{balance}}/view/view/view/viewviewclass='user-item'viewclass='item'bindtap='bindViewTapbasic'imageclass='secondimagestyle'src='/images/personCenter/5.png'/imageviewclass='item-title'基本信息/viewimagesrc='/images/personCenter/2.png'class='thirdimagestyle'/image/viewviewclass='item'bindtap='bindViewTapaddress'imageclass='secondimagestyle'src='/images/personCenter/3.png'/imageviewclass='item-title'我的地址/viewimagesrc='/images/personCenter/2.png'class='thirdimagestyle'/image/viewviewclass='item'bindtap="bindViewTap"imageclass='secondimagestyle'src='/images/personCenter/7.png'/imageviewclass='item-title'我的订单/viewimagesrc='/images/personCenter/2.png'class='thirdimagestyle'/image/viewviewclass='item'bindtap="onShareTap"imageclass='secondimagestyle'src='/images/personCenter/4.png'/imageviewclass='item-title'分享推荐/viewimagesrc='/images/personCenter/2.png'class='thirdimagestyle'/image/viewviewclass='item'bindtap='bindViewTapsetup'imageclass='secondimagestyle'src='/images/personCenter/6.png'/imageviewclass='item-title'关于我们/viewimagesrc='/images/personCenter/2.png'class='thirdimagestyle'/image/view/view/view//二维码分享图是隐藏的viewclass="bg"bindtap='hideview'style='display:{{display}}'/viewviewclass="show"bindtap='hideview'style='display:{{display}}'viewclass='containera'imageclass="imagesa"src="{{shareImgSrc}}"/imageviewclass='fourlayoutstylea'buttonsize="{{primarySize}}"bindtap="showLocal"保存分享图片/button/viewviewclass="canvas-box"canvascanvas-id="myCanvas"style="width:100%;height:{{windowHeight}}px;"/canvas/view/view/view布局//PersonalPage.wxsspage{width:100%;height:100%;}.user{background:rgb(245,245,245);width:100%;height:100%;}.user-item{margin-top:30rpx;width:100%;display:flex;flex-direction:column;}.item{background:#fff;height:100rpx;margin-top:20rpx;line-height:100rpx;display:flex;justify-content:space-between;}.item-title{flex-grow:4;margin-left:20rpx;}.container{/*弹性模型*/display:flex;/*垂直方向列方向排布*/flex-direction:column;/*居中*//*align-items:center;*//*要从整体解决排布的问题是最好的方案*/background:rgb(245,245,245);}.containe1{margin-top:50rpx;width:100%;display:flex;flex-direction:column;}.firstlayout{/*弹性模型*/display:flex;/*垂直方向列方向排布*/flex-direction:column;/*居中*/align-items:center;/*要从整体解决排布的问题是最好的方案*/width:100%;height:400rpx;background:#21bba6;}.firstimagestyle{width:180rpx;height:180rpx;margin:20rpx;border-radius:50%;border:3pxsolid#FFFFFF;}.firstfontstyle{font-size:34rpx;color:#FFFFFF;}.secondlayout{width:550rpx;height:50rpx;/*弹性模型*/display:flex;flex-direction:row;/*居中*//*align-items:center;*/justify-content:center;margin-top:25rpx;}.secondlayoutitem{width:50%;display:flex;flex-direction:row;justify-content:center;}.lineview{width:2rpx;height:40rpx;background:#FFFFFF;margin-top:6rpx;}.secondimagestyle{width:40rpx;height:40rpx;margin:30rpx;}.fourthlayout{width:50%;height:100%;text-align:right;}.thirdimagestyle{width:60rpx;height:60rpx;margin:20rpx;}.secondfontstyle{flex-grow:4;margin-left:40rpx;}.lineviewtwo{width:100%rpx;height:1px;background:#708090;}.bg{display:none;position:absolute;top:0%;left:0%;width:100%;height:100%;background-color:black;z-index:1001;-moz-opacity:0.7;opacity:0.70;filter:alpha(opacity=70);}.show{text-align:center;position:absolute;top:5%;left:10%;width:80%;height:90%;z-index:1002;}.canvas-box{height:100%;width:100%;position:fixed;left:0;top:999999rpx;}.containera{display:flex;flex-direction:column;width:100%;height:100%;position:relative;}image{width:100%;height:75%;}.fourlayoutstylea{width:50%;height:200rpx;align-items:center;position:absolute;bottom:0;left:50%;margin-left:-25%;}Canvas画图//点击事件onShareTap:function(event){wx.showLoading({title:'生成中',})this.setData({display:"block",})varthat=this;that.onshow("溯夜","../../images/personCenter/1.jpg");//wx.getImageInfo({//src:app.globalData.img,//success:function(sres){//that.onshow(app.globalData.name,sres.path);//}//})},

3.在这里注意的是，微信小程序不能直接获取网络上的图片资源，如果想要引用网络上的图片资源，需要缓存，可以调用wx.getImageInfo方法缓存，缓存成功该方法会返回图片的地址，这个地址微信小程序可以直接引用。

onshow:function(name,img){varthat=this;//canvas绘制文字和图片，创建画图constctx=wx.createCanvasContext('myCanvas');//绘制背景图varbgImgPath='../../images/personCenter/17.jpg'varimgPath='../../images/personCenter/ma.jpg';//二维码ctx.drawImage(bgImgPath,0,0,this.data.windowWidth,280);ctx.setFillStyle('white')ctx.fillRect(0,280,300,120);ctx.drawImage(imgPath,190,290,100,100);ctx.drawImage(img,10,290,40,40)//绘制字体，颜色，与位置ctx.setFontSize(14)ctx.setFillStyle('#6F6F6F')ctx.fillText(name,63,314)ctx.setFontSize(15)ctx.setFillStyle('#111111')ctx.fillText('亲们快来使用回收利器',10,350)ctx.fillText(name+'在筑梦回收',10,370)ctx.setFontSize(10)ctx.fillText('长按扫码查看详情',10,390)//canvasToTempFilePath必须要在draw的回调中执行，否则会生成失败，官方文档有说明ctx.draw(false,setTimeout(function(){wx.canvasToTempFilePath({x:0,y:0,width:that.data.windowWidth,height:that.data.windowHeight,destWidth:that.data.windowWidth*2,destHeight:that.data.windowHeight*2,canvasId:'myCanvas',success:function(res){console.log(res.tempFilePath);wx.hideLoading();that.setData({shareImgSrc:res.tempFilePath})},fail:function(res){wx.hideLoading();wx.showToast({title:'生成失败',icon:"none"})}})},200));},

4.这里一定小心注意的是，canvasToTempFilePath必须要在draw的回调中执行，否则会生成失败，官方文档有说明。而且，为保证图片生成的清晰度，destWidth与destHeight需设置成你原来期待高度与宽度的n倍，一般两到三倍就行了，否则图片很大，生成较慢。

保存在本地//保存在本地showLocal:function(){varthat=this;console.log(that.data.shareImgSrc);wx.saveImageToPhotosAlbum({filePath:that.data.shareImgSrc,success(res){wx.showModal({title:'存图成功',content:'图片成功保存到相册了，去发圈噻~',showCancel:false,confirmText:'好哒',confirmColor:'#21bba6',success:function(res){if(res.confirm){console.log('用户点击确定');}}})},fail:function(){wx.showToast({title:'保存失败',icon:"none"})}})}})

5.

6.这里有个demo下载地址啦