微信小程序使用canvas自适应屏幕画海报并保存图片功能


Posted in Javascript onJuly 25, 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()
 },

保存到相册

很简单就是在画完图片之后的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)
          }
         })
        }
       })
     }
     }
   });

总结

以上所述是小编给大家介绍的微信小程序使用canvas自适应屏幕画海报并保存图片功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript getElementsByClassName 和js取地址栏参数
Jan 02 Javascript
js动态给table添加/删除tr的方法
Aug 02 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
AngularJS压缩JS技巧分析
Nov 08 Javascript
详解js前端代码异常监控
Jan 11 Javascript
微信小程序 图片边框解决方法
Jan 16 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 #Javascript
JS查找孩子节点简单示例
Jul 25 #Javascript
微信小程序自定义单项选择器样式
Jul 25 #Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 #Javascript
微信小程序实现原生步骤条
Jul 25 #Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 #Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 #Javascript
You might like
php&amp;java(三)
2006/10/09 PHP
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
PHP 第二节 数据类型之数组
2012/04/28 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
JMenuTab简单使用说明
2008/03/13 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
javascript求日期差的方法
2016/03/02 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
JS二分查找算法详解
2017/11/01 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
python中list列表的高级函数
2016/05/17 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
python psutil监控进程实例
2019/12/17 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
学校采购员岗位职责
2014/01/02 职场文书
50岁生日感言
2014/01/23 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
初中教师个人工作总结
2015/02/10 职场文书
食品安全主题班会
2015/08/13 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android
vue如何清除浏览器历史栈
2022/05/25 Vue.js