小程序畫布識別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 () {

  },

 
})

posted @ 2020-07-30 15:53 小橋流水細長流閱讀(357) 評論(0) 收藏舉報

刷新頁面返回頂部