此代码是基于mpvue写的（编写微信小程序的第三方框架）一个组件有用这个框架的可以直接用，原生的微信小程序与这个相差不大，（只需改下事件监听方式，标签，参数传递就可以了），希望对大家有所帮助，谢谢

templatedivdiv:class="['share',visible?'show':'']"@click="handleClose"canvasclass="canvas-hide"canvas-id="share":style="{'width':canvasWidth*2+'rpx','height':canvasHeight*2+'rpx'}"/divclass="content":style="responsiveScale"img@click.stop="nothing"class="canvas"@longpress="handleSave":src="imageFile":style="{'width':canvasWidth+'rpx','height':canvasHeight+'rpx'}"/div/div/div/templatescript//canvasUI以750图纸为标准canvas测量值以750rpx为标准//文档上说y轴左上角我测试是左下角//ctx.fillText(//nickName,//rpx2px(160),//rpx2px(80),//)functiongetImageInfo(url){returnnewPromise((resolve,reject)={wx.getImageInfo({src:url,success:resolve,fail:reject});});}functioncreateRpx2px(){const{windowWidth}=wx.getSystemInfoSync();returnfunction(rpx){//以rpx为单位returnwindowWidth/750*rpx*2;};}constrpx2px=createRpx2px();functioncanvasToTempFilePath(option,context){returnnewPromise((resolve,reject)={wx.canvasToTempFilePath({...option,success:resolve,fail:reject},context);});}functionsaveImageToPhotosAlbum(option){returnnewPromise((resolve,reject)={wx.saveImageToPhotosAlbum({...option,success:resolve,fail:reject});});}exportdefault{props:{visible:{type:Boolean,default:false},userInfo:{type:Object,default:{avatarUrl:"https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83erc6TL2ic66HAC7McZ0pyhr9Vb37j7uMYiadHAWpW9K9I37qM5XrdBoueD1ek8ib3l7YaSCKkUu9TdoA/132",nickName:"helloworld"}}},data(){return{responsiveScale:null,beginDraw:false,isDraw:false,canvasWidth:560,canvasHeight:780,imageFile:"",responsiveScale:"transform:scale(1);-webkit-transform:scale(1)"};},watch:{visible(visible,oldValue){console.log();if(visible!this.beginDraw){this.draw();this.beginDraw=true;}}},onShow(){constdesignWidth=375;constdesignHeight=603;//这是在顶部位置定义，底部无tabbar情况下的设计稿高度//以iphone6为设计稿，计算相应的缩放比例const{windowWidth,windowHeight}=wx.getSystemInfoSync();constresponsiveScale=windowHeight/(windowWidth/designWidth*designHeight);if(responsiveScale1){this.responsiveScale=`transform:scale(${responsiveScale});-webkit-transform:scale(${responsiveScale})`;}},methods:{nothing(){//没什么意意},handleClose(){this.$emit("close");},handleSave(){this.checkImageAuth().then(res={console.log("tag33","");constimageFile=this.imageFile;console.log("imageFile",imageFile);if(imageFile){saveImageToPhotosAlbum({filePath:imageFile}).then(()={wx.showToast({icon:"none",title:"分享图片已保存至相册",duration:2000});});}});},checkImageAuth(e){returnnewPromise((resolve,reject)={wx.getSetting({success:res={console.log("getSetting",res);if(res.authSetting["scope.writePhotosAlbum"]===false){console.log("1","");wx.showModal({title:"提示",content:"需要授权才能保存图片",showCancel:true,cancelText:"取消",cancelColor:"#000000",confirmText:"确定",confirmColor:"#000000",success:result={if(result.confirm){wx.openSetting({success:res={if(res.authSetting["scope.writePhotosAlbum"]===true){resolve();}else{reject();}}});}elseif(res.cancel){reject();}}});}else{resolve();}}});});},draw(){wx.showLoading({title:'绘制中...',});constuserInfo=this.userInfo;constcanvasWidth=this.canvasWidth;constcanvasHeight=this.canvasHeight;const{avatarUrl,nickName}=userInfo;constavatarPromise=getImageInfo(avatarUrl);constbackgroundPromise=getImageInfo("https://img.3dmgame.com/UploadFiles/201010/20101013131054394.jpg");constqrImgPromise=getImageInfo("https://timgsa.baidu.com/timg?imagequality=80size=b9999_10000sec=1575544143142di=786d79492ea1849b7105a9db6d0e7acdimgtype=0src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fc8807656f986d5352a7f9e6c436a50ea44e3b19c2396-QzGPTm_fw658");Promise.all([avatarPromise,backgroundPromise,qrImgPromise]).then(([avatar,background,qrImg])={constctx=wx.createCanvasContext("share",this);constcanvasW=rpx2px(canvasWidth);constcanvasH=rpx2px(canvasHeight);//绘制背景当然也可以是图片ctx.setFillStyle("#fff");ctx.fillRect(0,0,rpx2px(this.canvasWidth),rpx2px(this.canvasHeight));//绘制头像constradius=rpx2px(100);consty=rpx2px(140);constx=rpx2px(140);console.log(canvasW,canvasW/2-100,radius,y);ctx.drawImage(avatar.path,x-radius,y-radius,radius,radius);//绘制用户名ctx.setFontSize(rpx2px(30));ctx.setTextAlign("left");ctx.setFillStyle("#000");ctx.fillText(nickName,rpx2px(160),rpx2px(80));//绘制（你的分销上线）ctx.setFontSize(rpx2px(22));ctx.setTextAlign("left");ctx.setFillStyle("#747474");ctx.fillText("你的分销上线",rpx2px(160),rpx2px(120));//绘制主图ctx.drawImage(background.path,rpx2px(40),rpx2px(160),rpx2px(480),rpx2px(320));//绘制二维码ctx.drawImage(qrImg.path,rpx2px(40),rpx2px(510),rpx2px(128),rpx2px(128));//绘制课程名字ctx.setFontSize(rpx2px(30));ctx.setTextAlign("left");ctx.setFillStyle("#3c3c3c");ctx.fillText("美术课程",rpx2px(196),rpx2px(560));//绘制价格ctx.setFontSize(rpx2px(28));ctx.setTextAlign("left");ctx.setFillStyle("#ce6778");ctx.fillText("￥999.8",rpx2px(196),rpx2px(624));//长按分享ctx.setFontSize(rpx2px(20));ctx.setTextAlign("left");ctx.setFillStyle("#535353");ctx.fillText("长按二维码分享",rpx2px(196),rpx2px(736));ctx.draw(false,()={canvasToTempFilePath({canvasId:"share"},this).then(({tempFilePath})=(this.imageFile=tempFilePath));});wx.hideLoading();this.isDraw=true;}).catch(()={this.beginDraw=false;wx.hideLoading();});}}};/scriptstylelang="less".share{position:fixed;top:0;left:0;min-height:100vh;width:100%;background:rgba(61,61,61,0.5);visibility:hidden;opacity:0;transition:opacity0.2sease-in-out;z-index:99999;}.share.show{visibility:visible;opacity:1;}.share.content{display:flex;flex-direction:column;justify-content:center;align-items:center;transform:translate3d(0,100%,0);transition:transform0.2sease-in-out;transform-origin:50%0;}.share.show.content{transform:translate3d(0,0,0);}.share.content.footer{width:562rpx;height:100rpx;background:#fff;border-top:2rpxsolid#e9e9e9;display:flex;flex-direction:row;justify-content:center;align-items:center;font-size:28rpx;}.share.content.footer.close{width:100rpx;height:100rpx;line-height:100rpx;flex-grow:0;flex-shrink:0;text-align:center;border-left:2rpxsolid#e9e9e9;}.share.content.footer.save{height:100rpx;line-height:100rpx;flex-grow:1;flex-shrink:1;text-align:center;}.share.show.content.canvas{display:inline-block;}.share.canvas-hide{position:fixed;top:0;left:0;transform:translateX(-100%);}.share.content.canvas{display:inline-block;background:#fff;margin:60rpx000;}/style

如果觉得还可以别忘了点个赞哦