如何在不同设备上通过小程序自适应生成海报

时间：2021-08-20 来源：互联网编辑：宝哥软件园浏览：次

小程序画布的API不像其他小程序一样支持小程序独有的rpx自适应大小单位，在绘制内容时使用的单位仍然是px，那么如何实现不同大小屏幕的自适应呢？

我们在开发中常用的参考屏幕尺寸(iPhone6)是：375 * 667；

那么如果想要适应其他尺寸的屏幕，只需要根据iPhone6的画图尺寸进行缩放即可：

获取系统屏幕尺寸

使用wx.getSystemInfo的API获取屏幕宽度，然后对iPhone6的屏幕宽度进行划分，得到相对单位

//调用const that=this wx . getsystem info({ 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还应该动态设置宽度和高度

canvas canvas-id=' PosterCanvas ' style=' width : { { screen _ width * 375 ' px ' } }；height : { { screen _ height * 1.21 ' px ' } } '/canvasdrawpearl(){ let CTX=wx . createcanvascontext(' PosterCanvas ')，即=this.dataConsole.log('手机型号' that.model，' width' that.screen_width*375，' height' that.screen _ height)让rpx=that . screen _ width//其中rpx是不同屏幕宽度的相对单位，实际测得的宽度就是实际测得的px像素值*rpx之后，不管是iPhone5、iPhone6、iPhone7.可以适应。CTX . setfillstyle(' # 1a 1a 1a ')CTX . fill rect(0，0，rpx * 375，that . screen _ height * 1.21)CTX . fill style=' # E8CDAA '；CTX . setfontsize(29 * rpx)CTX . font=' normal 400 Source Han Sans CN '；Ctx.fillText('Hi friend '，133*rpx，66*rpx) ctx.fillText('买车前领礼物'，84 * RPX，119 * RPX) CTX。drawimage('././img/sell _ index5.png '，314*rpx) ctx.drawImage('././img/post_car2x.png '，66 * rpx，222 * rpx，243 * rpx，145 * rpx)CTX . setfontsize(16 * rpx)CTX . font=' normal 400 Source Han Sans CN '；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)CTX . setstrokestyle(# 666666 ')CTX . setlinewidth(1 * rpx)CTX . line to(187 * rpx，602*rpx) ctx.lineTo(187*rpx，630 * rpx)CTX . stroke()CTX . fill style=' # fff ' CTX

因为它将访问一个get请求，所以它是一个异步操作，并且在get返回之前执行tx.draw()来绘制画布。只有在wx.downloadFile()中，解决方案才成功下载图片并绘制画布。

wx . downloadfile({ URL : that . data . URL，success(RES){ if(RES . statuscode==200){//activity CTX . draw image(RES . tempfile path，66 * rpx，222 * rpx，243 * rpx，11

画完图片后在draw回调函数中调用canvasToTempFilePath()在内存中零时刻产生一个链接，然后调用saveImageToPhotosAlbum()，非常简单；涉及授权。如果第一次拒绝授权，第二次进入时，iphone上不会再次提醒您授权。此时需要手动调用；附上下面的代码！

ctx.draw(true，()={//console.log('画完了)wx。canvastempfilepath()({ x : 0，y: 0，宽度： rpx * 375，高度：screen _ height * 1.21，canvasId: 'PosterCanvas '，success 3360功能(RES){//控制台。日志(RES . tempfile path)；wx。savegimagetopotsalbum({ file path : RES . tempfile path，success :(RES)={ console。日志(RES)}，失败：(err)={ })})拒绝授权后再次提醒授权的代码

mpvue。save imagetophotossalbum({ file path : _ _ path，success(RES){ mpvue。showToast({ title : ')保存成功，icon: '成功，duration: 800，mask : true })；}，fail(RES){ if(RES . errmsg==' savegimmagetopthalbum : fail : auth denied ' | | RES . errmsg==' savegimmagetopthalbum : fail auth deny ' | | RES . errmsg==' savegimmagetopthalbum : fail auth no response '){ mpvue。显示模式({ title : '提示，content: '需要您授权保存相册，showCancel: false，success : modelssuccess={ mpvue。opensetting({ success(设置数据)}//console。日志('设置数据'，设置数据)if(设置数据。authsetting['作用域。writephotosalbum ']){ mpvue。显示模式({ title : '提示，content: '获取权限成功，再次点击图片即可保存，showCancel: false，})else { mpvue。显示模式({ title : '提示，content: '获取权限失败，将无法保存到相册哦~ '，showCancel: false，}) })，fail(fail data){ console。日志('失败数据'，failData) }，完成(完成数据){控制台。log(' finish data '，finish data)} })})))；至此就算完了，能帮到你就给点个赞吧！

示例如下