canvars画布画的图片不能使用线上地址，只能使用本地地址
canvars不支持是用component
结构
<viewclass="modal-wrap"style="position:fixed;left:{{wrap}}px;"><viewclass="modal-box"><canvasclass='canvas'style="height:{{_heigth}}px;width:{{_width*375-75+'px'}};background- color:#fff"id="myCanvas"type="2d"></canvas><viewclass="btns-box"><buttonclass="btns"bindtap='saveImg'>保存到相册</button><buttonbindtap='closePos'class='btn'>取消</button></view></view><!--遮罩层--><viewclass="mask"bindtap="close"></view>
css结构
.modal-wrap{position:fixed;top:0;left:0;right:0;bottom:0;z-index:100;}.mask{position:absolute;top:0;left:0;right:0;bottom:0;z-index:10;background-color:rgba(0,0,0,.5);}.modal-box{position:absolute;width:80%;left:50%;top:50%;transform:translate3d(-50%,-50%,0);min-height:200rpx;background-color:#ffffff;border-radius:20rpx;z-index:20;}.close-btn{position:absolute;top:20rpx;right:20rpx;z-index:10;width:60rpx;height:60rpx;display:flex;align-items:center;justify-content:center;}/*保存到相册*/.modal-wrap.btns-box{display:flex;justify-content:space-around;margin:0010rpx20rpx;}.modal-wrap.btns-box.btns{background-color:#2a82e4;/*margin:0;*//*padding:0;*/width:240rpx;border-radius:32rpx;font-size:28rpx;color:#ffff;}.modal-wrap.btns-box.btn{border:#ffffff2rpxsolid;background-color:#cccc;border-radius:32rpx;width:240rpx;color:#ffff;font-size:28rpx;}
js部分
Page({data:{loadType:false,//canvas是否显示_width:0,//画布屏宽_heigth:0,//画布屏高model:"",//手机型号Text:"好窝装修",wrap:900,loadImagePath:'',//下载的图片title:'',//动态的title的值//改变的title的值modifyTitleVal:''},/***生命周期函数--监听页面加载*/onLoad:function(options){},/***生命周期函数--监听页面初次渲染完成*///画布canvas(){this.setData({wrap:0})console.log("this.data.wrap",this.data.wrap)},onReady:function(){this.getSysInfo()constquery=wx.createSelectorQuery()query.select('#myCanvas').fields({id:true,node:true,size:true}).exec(this.init.bind(this));},init(res){constcanvas=res[0].nodeconstctx=canvas.getContext('2d')constdpr=wx.getSystemInfoSync().pixelRatio//新接口需显示设置画布宽高；canvas.width=res[0].width*dprcanvas.height=res[0].height*dprctx.scale(dpr,dpr);ctx.fillStyle="#fff";ctx.fillRect(0,0,canvas.width,canvas.height);this.setData({canvas,ctx});this.canvasDraw();//向画布载入图片的方法this.txte();//文字this.drew();//导出图片console.log(res)},canvasDraw(){letrpx=this.data._widththis.data.ctx.fillRect(0,0,rpx*375,this.data_height*1.21)letimg2=this.data.canvas.createImage();//创建img对象img2.onload=()=>{//plete表示图片是否加载完成，结果返回true和false;console.log(plete);//truethis.data.ctx.drawImage(img2,190*rpx,28*rpx,100*rpx,100*rpx);};img2.src="/images/team.png";console.log(plete);letimg=this.data.canvas.createImage();//创建img对象img.onload=()=>{this.data.ctx.drawImage(img,67*rpx,160*rpx,168*rpx,168*rpx);};img.src="/images/code.jpg";},txte(){letrpx=this.data._widththis.data.ctx.fillRect(0,0,rpx*375,this.data_height*1.21)this.data.ctx.font="16pxsans-serif";this.data.ctx.fillStyle='#999999';//this.data.ctx.setTextAlign='center';this.data.ctx.fillText(this.data.Text,15*rpx,38*rpx,);this.data.ctx.fillStyle='#505050';this.data.ctx.fillText('刘文峰',15*rpx,66*rpx,);this.data.ctx.fillStyle='#999999';this.data.ctx.fillText('总经理',15*rpx,92*rpx,);this.data.ctx.fillText('手机号：13112345678',15*rpx,117*rpx,);this.data.ctx.fillText('所在地：四川成都',15*rpx,138*rpx,);this.data.ctx.font="14pxsans-serif";this.data.ctx.fillStyle='#505050';this.data.ctx.fillText('长按识别小程序码，马上认识我',60*rpx,357*rpx,);console.log("this.data",this.data)},//获取手机宽高getSysInfo(){letthat=thiswx.getSystemInfo({success(res){let_width=res.windowWidth/375;let_height=res.windowHeight-200;console.log("12345679",res)console.log("res.windowWidth",res.windowWidth)console.log("res.windowHeight",res.windowHeight)that.setData({model:res.model,_width:_width,_heigth:_height,canvasType:true,})console.log("_width",that.data._width)console.log("_heigth",that.data._heigth)}})},//导出图片（生成图片）drew(){let_ctx=this.data.ctx;letself=this;console.log("_ctx",_ctx);//this.drew();setTimeout(function(){console.log("保存图片")wx.canvasToTempFilePath({width:self.data._width*375-70,height:self.data._heigth*1.21,fileType:"jpg",//canvasId:'mycanvas',canvas:self.data.canvas,success:function(res){console.log("res",res)//lettempFilePath=res.tempFilePath;self.setData({loadImagePath:res.tempFilePath,});console.log("self.data.loadImagePath",self.data.loadImagePath)},fail:function(res){console.log(res);}})},500);},//保存到相片saveImg(){letself=this;console.log("100")wx.saveImageToPhotosAlbum({filePath:self.data.loadImagePath,success(res){self.setData({wrap:900})console.log('res1',res);//filePath:this.data.loadImagePath,wx.showToast({title:'已保存到相册',icon:'success',duration:3000})}})console.log("filePath",this.filePath)},//取消closePos(){console.log("123123")this.setData({wrap:900})},})
如果觉得《微信小程序canvar画布生成图片及保存图片》对你有帮助，请点赞、收藏，并留下你的观点哦！
