小程序画布识别iPhone11

wxml:

<scroll-view class="warp_" scroll-y="true">
    <view style=\'\' style=\'position: absolute;z-index: 2;top:0;left:0;right:0;\'>
        <canvas canvas-id="myCanvas"  style="width:{{335 * rpx}}px;height:{{580 * rpx}}px;margin: 30rpx auto 50rpx;"/>
        <cover-view style=\'padding-bottom: 0;box-sizing: border-box;background:#fff;position: fixed;bottom:0;left:0;width:100%;z-index:9999\'>           
            <cover-view bindtap=\'saveImg\' class=\'btn\'>保存图片</cover-view>
        </cover-view>
    </view>
    <view class=\'pop_bg_fix\'></view>
</scroll-view>

wxss:

.warp_ .btn{height: 80rpx;line-height: 80rpx;font-size: 28rpx;border-radius: 70rpx;background: #fbe600;text-align: center;margin:20rpx auto;width:calc(100% - 2*30rpx);}
.warp_ image{border-radius: 0 !important;}
.warp_ .note{text-align: center;color: #fff;margin-bottom: 28rpx;font-size: 28rpx;margin-top: 60rpx;}
.pop_bg_fix{position: absolute;top: 0;left: 0;width: 100vw;height: 100vh;background: #f5f5f5}

.warp_{width: 100vw;height: 100vh;box-sizing: border-box;line-height: 1.5;position: fixed;top: 0;left: 0;z-index: 9999991;background: #fff;}

wxjs:

Page({

  /**
   * 页面的初始数据
   */
  data: {

       isPhone11:false

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //这里是isPhone11兼容知识点
    let _this = this
    wx.getSystemInfo({
      success: res => {
        let modelmes = res.model;
        console.log(res.model)
        let iphoneArr = [ \'iPhone 11\']
        iphoneArr.forEach(function (item) {
          if (modelmes.search(item) != -1) {
            // _this.globalData.isIphoneX = true
            console.log(res.model)
          }
        })    
      }
    })
  },

canvasImg() {

    let that = this;

    var ress = wx.getSystemInfoSync()

    var rpx = ress.windowWidth / 375

    that.setData({

      rpx: ress.windowWidth / 375

    })

    const ctx = wx.createCanvasContext(\'myCanvas\');

    ctx.setFillStyle(\'#fff\');                             //为创建的canvans上下文添充颜色  如果没有设置 fillStyle，默认颜色为 black。

    ctx.fillRect(0, 0, 335 * rpx, 580 * rpx)

    

    // ctx.setFillStyle(\'#d5313a\');                             //为创建的canvans上下文添充颜色  如果没有设置 fillStyle，默认颜色为 black。

    // ctx.fillRect(20 * rpx, 100 * rpx, 295 * rpx, 350 * rpx)

    ctx.drawImage(that.data.headimgurls, 0 * rpx, 0 * rpx, 335 * rpx, 335 * rpx);

    //ctx.drawImage(that.data.bgWhite, 20 * rpx, 400 * rpx, 295 * rpx, 180 * rpx);

    ctx.save(); // 先保存状态 已便于画完圆再用

    ctx.beginPath(); //开始绘制

    //先画个圆

    ctx.arc(38 * rpx, 374 * rpx, 25 * rpx, 0, Math.PI * 2, false);  //false代表顺时针  图片的位置加半径

    ctx.setStrokeStyle(\'#fff\')

    ctx.stroke();

    ctx.clip();//画了圆 再剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内

    ctx.drawImage(that.data.headimgurl, 13 * rpx, 348 * rpx, 50 * rpx, 50 * rpx); // 推进去图片

    ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下文即状态 可以继续绘制

    ctx.setFillStyle("#000");

    ctx.setFontSize(14 * rpx);                               //字大小

    ctx.setTextAlign(\'left\');                        //是否居中显示，参考点画布中线

    ctx.fillText(that.data.user.nickname, 76 * rpx, 370 * rpx);

    ctx.setFillStyle("#bbb");

    ctx.setFontSize(12 * rpx);                               //字大小

    ctx.setTextAlign(\'left\');                        //是否居中显示，参考点画布中线

    ctx.fillText(\'向您推荐了一个好东西!\', 76 * rpx, 390 * rpx);

    ctx.setFillStyle("#3D3D3D");

    ctx.setFontSize(14 * rpx);                               //字大小

    ctx.setTextAlign(\'left\');                        //是否居中显示，参考点画布中线

    ctx.fillText(\'今天我走了\', 13 * rpx, 430 * rpx);

    ctx.setFillStyle("#f03725");                           //字大小

    ctx.setTextAlign(\'left\');                        //是否居中显示，参考点画布中线

    ctx.setFontSize(18 * rpx);

    ctx.fillText(that.data.users.walkstep+\'\', 84 * rpx, 430 * rpx);

    ctx.setFillStyle("#3D3D3D");

    ctx.setFontSize(14 * rpx);                               //字大小

    ctx.setTextAlign(\'left\');                        //是否居中显示，参考点画布中线

    ctx.fillText(\'步,\',  (that.data.users.walkstep.toString().length*11+86) * rpx, 430 * rpx);

    ctx.setFillStyle("#3D3D3D");

    ctx.setFontSize(14 * rpx);                               //字大小

    ctx.setTextAlign(\'left\');                        //是否居中显示，参考点画布中线

    

    ctx.fillText(\'共走了\', (that.data.users.walkstep.toString().length*11+115) * rpx, 430 * rpx);

    ctx.setFillStyle("#f03725");                           //字大小

    ctx.setTextAlign(\'left\');                        //是否居中显示，参考点画布中线

    ctx.setFontSize(18 * rpx);

    //这里是isPhone11兼容知识点

    if(that.data.isPhone11){

      ctx.fillText(that.data.walk_km+\'\', (that.data.users.walksteps.toString().length*11+125+that.data.walk_sumk.toString().length*11) * rpx, 430 * rpx);

    }else{

      ctx.fillText(that.data.walk_km+\'\', (that.data.users.walksteps.toString().length*11+105+that.data.walk_sumk.toString().length*11) * rpx, 430 * rpx);

    }

    

    ctx.setFillStyle("#3D3D3D");

    ctx.setFontSize(14 * rpx);                               //字大小

    ctx.setTextAlign(\'left\');                        //是否居中显示，参考点画布中线

    

    //这里是isPhone11兼容知识点

    if(that.data.isPhone11){

      ctx.fillText(\'公里\', (that.data.users.walksteps.toString().length*11+120+that.data.walk_sumk.toString().length*11*2) * rpx, 430 * rpx);

    }else{

      ctx.fillText(\'公里\', (that.data.users.walksteps.toString().length*11+90+that.data.walk_sumk.toString().length*11*2) * rpx, 430 * rpx);

    }

    ctx.setFillStyle("#3D3D3D");

    ctx.setFontSize(14 * rpx);                               //字大小

    ctx.setTextAlign(\'left\');                        //是否居中显示，参考点画布中线

    ctx.fillText(\'总里程距离\', 13 * rpx, 460 * rpx);

    ctx.setFillStyle("#f03725");                           //字大小

    ctx.setTextAlign(\'left\');                        //是否居中显示，参考点画布中线

    ctx.setFontSize(18 * rpx);

    ctx.fillText(that.data.walk_sumk+\'\', 85 * rpx, 460 * rpx);

    

    

    ctx.setFillStyle("#3D3D3D");

    ctx.setFontSize(14 * rpx);                               //字大小

    ctx.setTextAlign(\'left\');                        //是否居中显示，参考点画布中线

    

    //这里是isPhone11兼容知识点

    if(that.data.isPhone11){

      ctx.fillText(\'公里,\', (that.data.users.walksteps.toString().length*11+102) * rpx, 460 * rpx);

    }else{

      ctx.fillText(\'公里,\', (that.data.users.walksteps.toString().length*11+68) * rpx, 460 * rpx);

    }

    ctx.setFillStyle("#3D3D3D");

    ctx.setFontSize(14 * rpx);                               //字大小

    ctx.setTextAlign(\'left\');                        //是否居中显示，参考点画布中线

    ctx.fillText(\'总共打卡\', (that.data.walk_sumk.toString().length*11+120) * rpx, 460 * rpx);

    ctx.setFillStyle("#f03725");                           //字大小

    ctx.setTextAlign(\'left\');                        //是否居中显示，参考点画布中线

    ctx.setFontSize(18 * rpx);

     

    //这里是isPhone11兼容知识点

    if(that.data.isPhone11){

      ctx.fillText(that.data.signnum+\'\', (that.data.users.walksteps.toString().length*11+190+that.data.signnum.toString().length*11) * rpx, 460 * rpx);

    }else{

      ctx.fillText(that.data.signnum+\'\', (that.data.users.walksteps.toString().length*11+142+that.data.signnum.toString().length*11) * rpx, 460 * rpx);

    }

    

    ctx.setFillStyle("#3D3D3D");

    ctx.setFontSize(14 * rpx);                               //字大小

    ctx.setTextAlign(\'left\');                        //是否居中显示，参考点画布中线

    

    //这里是isPhone11兼容知识点

    if(that.data.isPhone11){

      ctx.fillText(\'次\', (that.data.users.walksteps.toString().length*11+148+that.data.walk_sumk.toString().length*11*2) * rpx,460 * rpx);

    }else{

      ctx.fillText(\'次\', (that.data.users.walksteps.toString().length*11+100+that.data.walk_sumk.toString().length*11*2) * rpx,460 * rpx);

    }

    

     

    

    ctx.setFillStyle(\'#f5f5f5\')

    ctx.fillRect(13* rpx, 480 * rpx, 310 * rpx, 90 * rpx)

    ctx.drawImage(that.data.code,26 * rpx, 496 * rpx, 60 * rpx, 60 * rpx);

  

    ctx.setFillStyle("#333");

    ctx.setFontSize(12 * rpx); //字大小

    ctx.setTextAlign(\'left\'); //是否居中显示，参考点画布中线

    ctx.fillText(that.data.user.nickname, 100 * rpx, 510 * rpx);

    ctx.drawImage("/image/add.png", 100 * rpx, 521 * rpx, 12 * rpx, 12 * rpx)

    ctx.setFillStyle("#333");

    ctx.setFontSize(12 * rpx); //字大小

    ctx.setTextAlign(\'left\'); //是否居中显示，参考点画布中线

    ctx.fillText(that.data.user.cityname, 116 * rpx, 531 * rpx);

    ctx.setFillStyle("#333");

    ctx.setFontSize(12 * rpx); //字大小

    ctx.setTextAlign(\'left\'); //是否居中显示，参考点画布中线

    ctx.fillText(\'球心圆运动平台\', 100 * rpx, 552 * rpx);

    

    ctx.draw();

  },

  saveImg() {

    let that = this;

    var res = wx.getSystemInfoSync()

    var rpx = res.windowWidth / 375

    that.setData({

      rpx: res.windowWidth / 375

    })

    wx.canvasToTempFilePath({

      x: 0,

      y: 0,

      width: 335 * rpx,                     //画布宽高

      height: 580 * rpx,

      destWidth: 1005 * rpx,                 //画布宽高*dpr 以iphone6为准

      destHeight: 1740 * rpx,                //放大2倍以上，解决保存的图片模糊的问题

      canvasId: \'myCanvas\',

      success: function (res) {

        console.log(res.tempFilePath) //生成的临时图片路径

        wx.saveImageToPhotosAlbum({

          filePath: res.tempFilePath,

          success: function (res) {

            console.log(res);

            wx.showToast({

              title: \'保存成功\',

            })

          },

          fail: function () {

            console.log(\'a\')

          }

        })

      }

    })

  },

/**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

 
})