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


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 相关文章推荐
Javascript打印网页部分内容的脚本
Nov 17 Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
javascript用正则表达式过滤空格的实现代码
Jun 14 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
template.js前端模板引擎使用详解
Oct 10 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
React+Antd+Redux实现待办事件的方法
Mar 14 Javascript
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
使用 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
CodeIgniter常用知识点小结
2016/05/26 PHP
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
vue实现跨域的方法分析
2019/05/21 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
[03:19]2016国际邀请赛中国区预选赛第四日TOP10镜头集锦
2016/07/01 DOTA
Python编写的com组件发生R6034错误的原因与解决办法
2013/04/01 Python
python简单实现旋转图片的方法
2015/05/30 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
numpy.array 操作使用简单总结
2019/11/08 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
结构和类有什么异同
2012/07/16 面试题
发展部经理职责规定
2014/02/22 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
中职招生先进个人材料
2014/08/31 职场文书
2014村党支部书记党建工作汇报材料
2014/11/02 职场文书
2015年清明节活动总结
2015/02/09 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
宣传稿格式范文
2015/07/23 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js