小程序如何在不同设备上自适应生成海报的实现方法


Posted in Javascript onAugust 20, 2019

小程序canvas的API并没有像其他的一样支持小程序独有的 rpx 自适应尺寸单位,在绘制内容时所应用的单位仍然是 px,那么如何实现不同尺寸屏幕的自适应呢?

我们的在开发中常用的参考屏幕尺寸(iPhone6)为:375*667;

那么想要适应其他尺寸的屏幕时只需按照iPhone6的绘制大小按比例进行换算即可:

获取系统屏幕尺寸

先利用wx.getSystemInfo (获取系统信息)的API获取屏幕宽度,然后除iPhone6的屏幕宽度,即可得到相对单位

// 在onLoad中调用
const that = 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也要动态的设置宽和高

<canvas canvas-id="PosterCanvas" style="width:{{screen_width*375+'px'}}; height:{{screen_height*1.21+'px'}}"></canvas>
drawPoster(){
  let ctx = wx.createCanvasContext('PosterCanvas'),that=this.data;
  console.log('手机型号' + that.model,'宽'+that.screen_width*375,'高'+ that.screen_height)
  let rpx = 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 = 'normal 400 Source Han Sans CN';
  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 = '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, 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()
 },

如果图片是线上地址 ctx.drawImage()会出错,不能画出图片

因为会访问一个get请求,是一个异步操作,还没等到get返回就执行了tx.draw()绘制画布。 解决方案 就只在 wx.downloadFile()中成功下载了图片在进行绘制画布。

wx.downloadFile({

url: that.data.url,
 success(res) {
  if (res.statusCode === 200) {
   // 活动
   ctx.drawImage(res.tempFilePath, 66 * rpx, 222 * rpx, 243 * rpx, 145 * rpx)
   // 二维码
   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:auth denied" || res.errMsg === "saveImageToPhotosAlbum:fail auth deny" || res.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {

   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)
        }
       })
      }
     })
   }
   }
 });

至此就算完了,能帮到你就给点个赞吧!

示例如下

小程序如何在不同设备上自适应生成海报的实现方法

代码如下

https://gitee.com/jgl1210/lajifenlei

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
js 获取input点选按钮的值的方法
Apr 14 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
Feb 14 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 #Javascript
基于vue手写tree插件的那点事儿
Aug 20 #Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 #Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 #Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 #Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 #Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 #Javascript
You might like
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
js 数组操作代码集锦
2009/04/28 Javascript
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
js中replace的用法总结
2013/12/27 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
Python编写屏幕截图程序方法
2015/02/18 Python
python模拟Django框架实例
2016/05/17 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
Python根据指定日期计算后n天,前n天是哪一天的方法
2018/05/29 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
毕业生个人求职自荐信
2014/02/26 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
出国签证在职证明
2014/09/20 职场文书
场地使用证明模板
2014/10/25 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书