小程序画布识别iPhone11

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

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

  },

 
})