微信小程序使用canvas自适应屏幕画海报并保存图片功能
小程序canvas的API并没有像其他的一样支持小程序独有的rpx自适应尺寸单位,在绘制内容时所应用的单位仍然是px,那么如何实现不同尺寸屏幕的自适应呢?
我们的在开发中常用的参考屏幕尺寸(iPhone6)为:375*667;
那么想要适应其他尺寸的屏幕时只需按照iPhone6的绘制大小按比例进行换算即可:
获取系统屏幕尺寸
先利用wx.getSystemInfo(获取系统信息)的API获取屏幕宽度,然后除iPhone6的屏幕宽度,即可得到相对单位
//在onLoad中调用 constthat=this wx.getSystemInfo({ success:function(res){ console.log(res) that.setData({ model:res.model, screen_width:res.windowWidth/375, screen_height:res.windowHeight }) } })
在绘制方法中将参数乘以相对单位即可实现自适应
这里的rpx是相对不同屏幕宽度的相对单位,测量出得实际宽度,就是实际测出的px像素值*rpx就可以了;之后无论实在iPhone5,iPhone6,iPhone7...都可以进行自适应。
这里的html也要动态的设置宽和高
drawPoster(){ letctx=wx.createCanvasContext('PosterCanvas'),that=this.data; console.log('手机型号'+that.model,'宽'+that.screen_width*375,'高'+that.screen_height) letrpx=that.screen_width //这里的rpx是相对不同屏幕宽度的相对单位,实际的宽度测量,就是实际测出的px像素值*rpx就可以了;之后无论实在iPhone5,iPhone6,iPhone7...都可以进行自适应。 ctx.setFillStyle('#1A1A1A') ctx.fillRect(0,0,rpx*375,that.screen_height*1.21) ctx.fillStyle="#E8CDAA"; ctx.setFontSize(29*rpx) ctx.font='normal400SourceHanSansCN'; ctx.fillText('Hi朋友',133*rpx,66*rpx) ctx.fillText('先领礼品再买车',84*rpx,119*rpx) ctx.drawImage('../../img/sell_index5.png',26*rpx,185*rpx,324*rpx,314*rpx) ctx.drawImage('../../img/post_car2x.png',66*rpx,222*rpx,243*rpx,145*rpx) ctx.setFontSize(16*rpx) ctx.font='normal400SourceHanSansCN'; ctx.fillText('长按扫描获取更多优惠',108*rpx,545*rpx) ctx.drawImage('../../img/code_icon2x.png',68*rpx,575*rpx,79*rpx,79*rpx) ctx.drawImage('../../img/code2_icon2x.png',229*rpx,575*rpx,79*rpx,79*rpx) ctx.setStrokeStyle('#666666') ctx.setLineWidth(1*rpx) ctx.lineTo(187*rpx,602*rpx) ctx.lineTo(187*rpx,630*rpx) ctx.stroke() ctx.fillStyle="#fff" ctx.setFontSize(13*rpx) ctx.fillText('xxx科技汽车销售公司',119*rpx,663*rpx) ctx.fillStyle="#666666" ctx.fillText('朝阳区·望京xxx科技大厦',109*rpx,689*rpx) ctx.setFillStyle('#fff') ctx.draw() },
保存到相册
很简单就是在画完图片之后的draw回调函数里调用canvasToTempFilePath()生产一个零时内存里的链接,然后在调用saveImageToPhotosAlbum()就可以了;其中牵扯到授权,如果你第一次拒绝了授权,你第二次进入的时候在iphone手机上是不会再次提醒你授权的,这时就需要你手动调用了;以下附上代码!
ctx.draw(true,()=>{ //console.log('画完了') wx.canvasToTempFilePath()({ x:0, y:0, width:rpx*375, height:that.screen_height*1.21, canvasId:'PosterCanvas', success:function(res){ //console.log(res.tempFilePath); wx.saveImageToPhotosAlbum({ filePath:res.tempFilePath, success:(res)=>{ console.log(res) }, fail:(err)=>{} }) } }) })
拒绝授权后再次提醒授权的代码
mpvue.saveImageToPhotosAlbum({ filePath:__path, success(res){ mpvue.showToast({ title:'保存成功', icon:'success', duration:800, mask:true }); }, fail(res){ if(res.errMsg==="saveImageToPhotosAlbum:fail:authdenied"||res.errMsg==="saveImageToPhotosAlbum:failauthdeny"||res.errMsg==="saveImageToPhotosAlbum:failauthorizenoresponse"){ mpvue.showModal({ title:'提示', content:'需要您授权保存相册', showCancel:false, success:modalSuccess=>{ mpvue.openSetting({ success(settingdata){ //console.log("settingdata",settingdata) if(settingdata.authSetting['scope.writePhotosAlbum']){ mpvue.showModal({ title:'提示', content:'获取权限成功,再次点击图片即可保存', showCancel:false, }) }else{ mpvue.showModal({ title:'提示', content:'获取权限失败,将无法保存到相册哦~', showCancel:false, }) } }, fail(failData){ console.log("failData",failData) }, complete(finishData){ console.log("finishData",finishData) } }) } }) } } });
总结
以上所述是小编给大家介绍的微信小程序使用canvas自适应屏幕画海报并保存图片功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!