微信小程序使用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 相关文章推荐
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 Javascript
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
利用JS轻松实现获取表单数据
Dec 06 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 Javascript
JS监听滚动和id自动定位滚动
Dec 18 Javascript
JavaScript实现图片轮播特效
Oct 23 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 flush类输出缓冲剖析
2008/10/19 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
js Math 对象的方法
2013/09/01 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
Python中异常重试的解决方案详解
2017/05/05 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
Python装饰器知识点补充
2018/05/28 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
金融管理专业毕业生求职信
2014/03/12 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
迎国庆演讲稿
2014/09/05 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
赞美教师的句子
2019/09/02 职场文书