微信小程序--canvas 画海报转发好友下载本地

爱吃水果的白马

已于 2022-09-14 09:46:36 修改

阅读量323

点赞数

分类专栏：微信小程序文章标签：微信小程序前端

于 2022-08-24 11:52:14 首次发布

本文链接：https://blog.csdn.net/qq_48957847/article/details/126501382

版权

获取本地手机的屏幕宽高（宽高需要按照自己实际需求计算）

  toCanvas() {
   
    let that = this
    wx.getSystemInfo({
   
      success: function(res) {
   
        console.log(res);
        console.log(res.windowWidth / 750)
        let company = res.windowWidth / 750
        that.setData({
   
          company:company
        })
      }
    })
    let windowWidth = wx.getSystemInfoSync().windowWidth; //可使用窗口宽度，单位px
    let windowHeight = wx.getSystemInfoSync().windowHeight-90; // 可使用窗口高度，单位px
    // console.log('windowWidth',windowWidth);
    // console.log('windowHeight',windowHeight);
    this.setData({
   
      windowWidth:windowWidth,
      windowHeight:windowHeight,
    })
    this.canvasFunction()
  },

画canvas海报（设置按照自己的需求）

  <view class="canvasHe">
    <canvas canvas-id="myCanvas" style='width:100%;height:{
       {
       windowHeight}}px;' ></canvas>
  </view>
wxss
.canvasHe{
  width: 750rpx;
  /* height: 510px; */
  padding: 0rpx 15rpx;
  box-sizing: border-box;
  position: relative;
}

  canvasFunction(params) {
   
    // 创建Canvas绘图上下文对象CanvasContext
    let windowWidth = this.data.windowWidth-15;
    let windowHeight = this.data.windowHeight;
    let company = this.data.company;

    let name=this.data.name;
    let phone = this.data.phone;
    
    let ewcode = this.data.ewcode;//图片路径
    let ewcodeW = this.data.ewcodeW;
    let ewcodeH = this.data.ewcodeH;


    const ctx =  wx.createCanvasContext('myCanvas')
    let bgPicturePath = "../../../static/canvasBeiJing.png";//图片路径不要出错
    ctx.drawImage(bgPicturePath, 0, 0, windowWidth