1.1.点击分享弹出一个动画出现分享类型2.canvas绘制文字和图片到画布3.给用户展示画布，画布转成图片4.当用户点击保存卡片时，将图片保存到相册wxml:

viewviewanimation="{{animationData}}"class="buydes-dialog-container"wx:if="{{showModalStatus}}"viewclass="buydes-dialog-container-top"bindtap="hideModal"canvascanvas-id="shareImg"/canvas/viewviewclass="buydes-dialog-container-bottom"viewclass="flbottom-image-fen"buttonopen-type="share"hover-class="other-button-hover"class="button-bg"imagesrc="../../img/weixin.png"style="width:80rpx;height:80rpx;"class="bottom-img"/imageviewclass="image-txt"发送好友/view/button/viewviewclass="flbottom-image-fen"viewstyle="margin-top:5rpx;"bindtap="saveShareImg"imagesrc="../../img/down.png"style="width:60rpx;height:60rpx;"class="bottom-img-right"/imageviewclass="image-txt"保存卡片/view/view/viewviewclass="clear"/viewviewbindtap="hideModal"class="buydes-dialog-container-bottom-item"取消/view/view/viewimagebindtap="showModal"bindload="imageLoad"style="width:200px;"src="../../img/xingli.png"//view

2.js:

constconfig=require("../../utils/config.js");letanimationShowHeight=300;Page({data:{animationData:"",showModalStatus:false,imageHeight:0,imageWidth:0,shareImgHidden:false,shareImgSrc:'',//画布转成图片的临时地址},/***//显示遮罩层*/showModal:function(){letthat=this;letanimation=wx.createAnimation({duration:200,timingFunction:"linear",});that.animation=animation;animation.translateY(animationShowHeight).step();that.setData({animationData:animation.export(),showModalStatus:true});setTimeout(function(){animation.translateY(0).step();that.setData({animationData:animation.export()})}.bind(that),200);//canvas绘制文字和图片constctx=wx.createCanvasContext('shareImg');letbgImg='../../img/car.png';letheadImg='../../img/headImg.png';letxcxImg='../../img/weixin2.png';letImgHeight=250;letImgWidth=250;//首图位置ctx.drawImage(bgImg,53,10,ImgWidth,ImgHeight);ctx.setFillStyle('white');ctx.fillRect(30,10,23,ImgHeight);ctx.setFillStyle('white');ctx.fillRect(303,10,23,ImgHeight);ctx.setFillStyle('white');ctx.fillRect(30,ImgHeight+10,296,180);//头像位置ctx.setFillStyle('#ececec');ctx.fillRect(42,ImgHeight-10,60,60);ctx.setFillStyle('white');ctx.fillRect(40,ImgHeight-12,60,60);ctx.drawImage(headImg,45,ImgHeight-7,50,50);//昵称ctx.setFontSize(14);ctx.setFillStyle('#888888');ctx.fillText('昵称',110,ImgHeight+25);ctx.setFontSize(14);ctx.setFillStyle(config.fontColor);ctx.fillText('“快来跟我一起抢”',105,ImgHeight+45);ctx.setFontSize(15);ctx.setFillStyle('#333333');letstr='RumbaTime时尚手表潮流时装女表电子钢带石英表美国正品进口表';letheight=that.drawText(ctx,str,45,ImgHeight+70,30,265);//调用行文本换行函数ctx.setFontSize(13);ctx.setFillStyle(config.fontColor);ctx.fillText('￥',45,ImgHeight+65+height);ctx.setFontSize(20);ctx.setFillStyle(config.fontColor);ctx.fillText('1999.00',60,ImgHeight+65+height);ctx.setFillStyle('#999999');ctx.setFontSize(12);ctx.fillText('￥',140,ImgHeight+65+height);ctx.setFontSize(16);ctx.fillText('1999.00',150,ImgHeight+65+height);ctx.moveTo(140,ImgHeight+60+height);ctx.lineTo(210,ImgHeight+60+height);ctx.stroke('#999999');ctx.setFontSize(14);ctx.setFillStyle('#888888');ctx.fillText('长按识别小程序码访问',45,ImgHeight+85+height);//二维码ctx.drawImage(xcxImg,240,ImgHeight+height+30,70,70);ctx.draw();//canvas画布转成图片setTimeout(function(){wx.canvasToTempFilePath({x:30,y:10,width:300,height:430,destWidth:900,//生成图片的大小设置成canvas大小的3倍destHeight:1290,canvasId:'shareImg',success:function(res){that.setData({shareImgSrc:res.tempFilePath});},fail:function(res){wx.showToast({title:res.errMsg,icon:'none',duration:1000,});}});},500);that.setData({shareImgHidden:true,});},/***保存到相册*/saveShareImg:function(){letthat=this;console.log(that.data.shareImgSrc);setTimeout(function(){wx.saveImageToPhotosAlbum({filePath:that.data.shareImgSrc,success:function(res){},fail:function(error){console.log(error.errMsg);wx.showModal({title:'提示',content:'请允许保存图片到相册',});},});},500);},/***绘制多行文本*@paramctxcanvas对象*@paramstr文本*@paramleftWidth距离左侧的距离*@paraminitHeight距离顶部的距离*@paramtitleHeight文本的高度*@paramcanvasWidth文本的宽度*@returns{*}*/drawText:function(ctx,str,leftWidth,initHeight,titleHeight,canvasWidth){letlineWidth=0;letlastSubStrIndex=0;//每次开始截取的字符串的索引for(leti=0;istr.length;i++){lineWidth+=ctx.measureText(str[i]).width;if(lineWidthcanvasWidth){ctx.fillText(str.substring(lastSubStrIndex,i),leftWidth,initHeight);//绘制截取部分initHeight+=22;//22为文字大小20+2lineWidth=0;lastSubStrIndex=i;titleHeight+=22;}if(i==str.length-1){//绘制剩余部分ctx.fillText(str.substring(lastSubStrIndex,i+1),leftWidth,initHeight);}}//标题border-bottom线距顶部距离titleHeight=titleHeight+10;returntitleHeight;},/***//隐藏遮罩层*/hideModal:function(){letthat=this;letanimation=wx.createAnimation({duration:200,timingFunction:"linear",delay:0});that.animation=animation;animation.translateY(animationShowHeight).step();that.setData({animationData:animation.export(),});setTimeout(function(){animation.translateY(0).step();that.setData({animationData:animation.export(),showModalStatus:false})}.bind(that),200);},onShow:function(){letthat=this;wx.getSystemInfo({success:function(res){animationShowHeight=res.windowHeight;}});},/***转发*/onShareAppMessage:function(){letthat=this;return{title:that.data.shopName,path:'/pages/detail/detail?id='+5,}},});

3.

4.参考：https://blog.csdn.net/baozhuona/article/details/78570483