微信小程序使用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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
用js判断浏览器是否是IE的比较好的办法
May 08 Javascript
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
js继承实现方法详解
Dec 16 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 Javascript
基于Vue实现微前端的示例代码
Apr 24 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 Image Resize图片大小调整的函数代码
2011/01/17 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
vue实现图片上传功能
2020/05/28 Javascript
python实现倒计时的示例
2014/02/14 Python
Python创建系统目录的方法
2015/03/11 Python
Python3写入文件常用方法实例分析
2015/05/22 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
python3 反射的四种基本方法解析
2019/08/26 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
Python Django路径配置实现过程解析
2020/11/05 Python
办公室文书岗位职责
2013/12/16 职场文书
技术合作协议书范本
2014/04/18 职场文书
搞笑的获奖感言
2014/08/16 职场文书
家具商场的活动方案
2014/08/16 职场文书
公司授权委托书范本
2014/09/18 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
2014年检验科工作总结
2014/11/22 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书