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


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 相关文章推荐
IE6下出现JavaScript未结束的字符串常量错误的解决方法
Nov 21 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
详解vue前后台数据交互vue-resource文档
Jul 19 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
详解如何在Vue项目中导出Excel
Apr 19 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
es6函数name属性功能与用法实例分析
Apr 18 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
资料注册后发信小技巧
2006/10/09 PHP
PHP实现货币换算的方法
2014/11/29 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
javascript强制点击广告的方法
2015/02/06 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
Python 调用DLL操作抄表机
2009/01/12 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
python 构造三维全零数组的方法
2018/11/12 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
外贸采购员求职的自我评价
2013/11/26 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
升学宴家长答谢词
2015/09/29 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
springboot中一些比较常用的注解总结
2021/06/11 Java/Android
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server