小程序如何在不同设备上自适应生成海报

更新日期: 2019-07-19阅读: 2.2k标签: 海报

小程序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()
  },

如果图片是线上地址 ctx.drawImage()会出错,不能画出图片
因为会访问一个get请求,是一个异步操作,还没等到get返回就执行了tx.draw()绘制画布。 解决方案 就只在 wx.downloadFile()中成功下载了图片在进行绘制画布。

wx.downloadFile({
  url: that.data.url,
  success(res) {
    if (res.statusCode === 200) {
      // 活动
      ctx.drawImage(res.tempFilePath, 66 * rpx, 222 * rpx, 243 * rpx, 145 * rpx)
      // 二维码
      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)
                }
              })
            }
          })
      }
     }
  });

至此就算完了

链接: https://www.fly63.com/article/detial/4814

H5海报制作实践

展示的时候使用html、css,这样用户看到的展示、编辑页面适配起来容易。最后生成图片的时候使用canvas,这个canvas是隐藏的,用户不可见,这样还有一个优点,最终生成的海报大小是固定的,跟手机屏幕大小无关。

小程序如何生成海报分享朋友圈

项目需求写完有一段时间了,但是还是想回过来总结一下,一是对项目的回顾优化等,二是对坑的地方做个记录,避免以后遇到类似的问题。利用微信强大的社交能力通过小程序达到裂变的目的,拉取新用户。

Vue中用canvas实现二维码和图片合成海报

在项目中经常会遇到需要将不同的二维码放到一张通用图片上,提供用户下载,简单来说,就是利用canvas将同等比例的二维码在图片上叠加,生成海报

微信小程序使用canvas实现生成海报图的功能

最近开发中要实现一个需求,用户点击分享生成一个图片海报,可以供用户发朋友圈或者其他使用(感觉没人会用~),用到了小程序canvas,和web上的功能基本一样,记录一下。

小程序海报生成工具,可视化编辑直接生成代码使用

在做小程序时候,我们经常会有一个需求,需要将小程序分享到朋友圈,但是朋友圈是不允许直接分享小程序,那我们还有其他的办法解决吗?答案肯定是有的,即 canvas 生成个性化海报分享图片到朋友圈

小程序生成海报:通过 json 配置方式轻松制作一张海报图

由于我们无法将小程序直接分享到朋友圈,但分享到朋友圈的需求又很多,业界目前的做法是利用小程序的 Canvas 功能生成一张带有二维码的图片,然后引导用户下载图片到本地后再分享到朋友圈

FabricJs:动态海报营销方案

Fabric.js是一个可以简化Canvas程序编写的库。 Fabric.js为Canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工具。Fabric.js可以做很多事情,如下:

小程序海报最佳实现思路,可视化编辑直接生成代码使用

在做小程序时候,我们经常会有一个需求,需要将小程序分享到朋友圈,但是朋友圈是不允许直接分享小程序,那我们还有其他的办法解决吗?答案肯定是有的,即 canvas 生成个性化海报分享图片到朋友圈

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!