小程序画布识别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="{{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;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;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; 100vw;height: 100vh;background: #f5f5f5}

.warp_{ 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,
       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 () {

  },

 
})