微信小程序使用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 相关文章推荐
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
运算符&amp;&amp;的三个不同层次
Apr 07 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
js实现简单的左右两边固定广告效果实例
Apr 10 Javascript
Javascript中的数组常用方法解析
Jun 17 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
vue监听dom大小改变案例
Jul 29 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 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
最省空间的计数器
2006/10/09 PHP
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
PHPLog php 程序调试追踪工具
2009/09/09 PHP
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
PHP模板解析类实例
2015/07/09 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
js+html制作简单验证码
2017/02/16 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
解决PyCharm中光标变粗的问题
2017/08/05 Python
设置python3为默认python的方法
2018/10/31 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
Python安装OpenCV的示例代码
2020/03/05 Python
Python自省及反射原理实例详解
2020/07/06 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
安全生产检查通报
2014/01/29 职场文书
小学生爱国演讲稿
2014/04/25 职场文书
公司投资建议书
2014/05/16 职场文书
搞笑车尾标语
2014/06/23 职场文书
好人好事演讲稿
2014/09/01 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
银行资信证明
2015/06/17 职场文书
小学见习报告
2015/06/23 职场文书
运动会加油稿30字
2015/07/21 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
教师岗位说明书
2015/09/30 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书