微信小程序使用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 相关文章推荐
js 加载时自动调整图片大小
May 28 Javascript
js弹窗代码 可以指定弹出间隔
Jul 03 Javascript
读jQuery之六 缓存数据功能介绍
Jun 21 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
JS方法调用括号的问题探讨
Jan 24 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 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
咖啡语言
2021/03/03 咖啡文化
深入掌握include_once与require_once的区别
2013/06/17 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
JS查看对象功能代码
2008/04/25 Javascript
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
JavaScript中对象属性的添加和删除示例
2014/05/12 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
Python编程argparse入门浅析
2018/02/07 Python
flask session组件的使用示例
2018/12/25 Python
Python玩转Excel的读写改实例
2019/02/22 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
python和php哪个更适合写爬虫
2020/06/22 Python
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
高中生的学习总结自我鉴定
2013/10/26 职场文书
班班通校本培训方案
2014/03/12 职场文书
C++程序员求职信范文
2014/04/14 职场文书
关于军训的感想
2015/08/07 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
关于vue中如何监听数组变化
2021/04/28 Vue.js
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android
一级电子管军用接收机测评
2022/04/05 无线电
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers