小程序画布识别iPhone11

时间:2020-07-30 16:42:48   收藏:0   阅读:25

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 () {

  },

 
})

 

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!