微信小程序分享之生成海报--canvas

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

首先看文档了解知识点~~（https://developers.weixin.qq.com/miniprogram/dev/component/）

githup：https://github.com/ad-skylar/wxProjece_canvas

一.画布。

1.wxml 创建canvas

canvas-id canvas 组件的唯一标识符，若指定了 type 则无需再指定该属性

 <canvas  style="width: 375px;height: 667px;position:fixed;" canvas-id="mycanvas"/>

2.js 调用wx.createCanvasContext

var context = wx.createCanvasContext('mycanvas');

3.绘制一个矩形作为背景，填充白色

CanvasContext.fillRect(x, y, width,height)；

参数依次是矩形x坐标、y坐标、图片宽、高

填充一个矩形。用 setFillStyle 设置矩形的填充色，如果没设置默认是黑色。

4.绘制图像到画布

CanvasContext.drawImage(src, x, y,width,height)

参数依次是图片地址、x坐标、y坐标、图片宽、高

5.绘制文字到画布

CanvasContext.fillText(text, x, y, maxWidth)

参数依次是文本内容、x坐标、y坐标、需要绘制的最大宽度，可选

6.设置字体颜色，大小，位置等等看看文档就ok了

二、保存图片到系统相册。调用前需要用户授权 scope.writePhotosAlbum。

wx.saveImageToPhotosAlbum({
  success(res) { }
})

代码：share.wxml

<!--pages/share/share.wxml-->
<view>
  <image src="{{img}}" mode="widthFix" class='bgImg'></image>
  <view class="shareText">
    <text class='text'>从前从前有个人爱你很久，但偏偏风渐渐把距离吹的好远。</text>
    <text class='text text2'> ———— 周杰伦《晴天》</text>
  </view>
  
  <view class='imgBox'>
    <button open-type="share" class='zfbtn'>
      <image src="{{wechat}}" class='img'></image>
       <text class='btntxt'>分享给朋友</text>
    </button>
    <button class='zfbtn m_l' bindtap='formSubmit'>
      <image src="{{xiazai}}" class='img'></image>
      <text class='btntxt'>生成海报</text>
    </button>
  </view>

  <!--生成海报  -->
    <view class='imagePathBox' hidden="{{maskHidden == false}}">
      <image src="{{imagePath}}" class='shengcheng'></image>
      <button class='baocun' bindtap='baocun'>保存相册，分享到朋友圈</button>
    </view>
   <view hidden="{{maskHidden == false}}" class="mask"></view> 
  <view class="canvas-box">
      <canvas  style="width: 375px;height: 667px;position:fixed;" canvas-id="mycanvas"/>
  </view>  
</view>

share.js

const app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    img: "../../images/me.jpg",
    wechat: "../../images/wechat.png",
    xiazai: "../../images/xiazai.png",
    share:"../../images/share.png",
    maskHidden: false,
    name: "",
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  //将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
  createNewImg: function () {
    var that = this;
    var context = wx.createCanvasContext('mycanvas');
    context.setFillStyle("#fff")
    context.fillRect(0, 0, 375, 667)
    var path = "/images/me.jpg";
    context.drawImage(path, 56, 56, 262, 349);
    var path5 = "/images/code.jpg";
    var path2 = "/images/text.png";
    var name = that.data.name;
    context.drawImage(path2, 56, 400, 263, 121);
  
    //绘制左下角文字
    context.setFontSize(14);
    context.setFillStyle('#333');
    context.setTextAlign('left');
    context.fillText("长按识别小程序", 70, 560);
    context.stroke();
    context.setFontSize(14);
    context.setFillStyle('#333');
    context.setTextAlign('left');
    context.fillText("跟我一起来学习吧~~", 70, 580);
    context.stroke();
   
    //绘制右下角小程序二维码
    context.drawImage(path5, 230, 530,80,80);

    context.draw();
    //将生成好的图片保存到本地
    setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: 'mycanvas',
        success: function (res) {
          var tempFilePath = res.tempFilePath;
          that.setData({
            imagePath: tempFilePath,
            canvasHidden: true
          });
        },
        fail: function (res) {
          console.log(res);
        }
      });
    }, 200);
  },
  //点击保存到相册
  baocun: function () {
    var that = this
    wx.saveImageToPhotosAlbum({
      filePath: that.data.imagePath,
      success(res) {
        wx.showModal({
          content: '海报已保存到相册',
          showCancel: false,
          confirmText: '确定',
          confirmColor: '#333',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
              /* 该隐藏的隐藏 */
              that.setData({
                maskHidden: false
              })
            }
          }, fail: function (res) {
            console.log(11111)
          }
        })
      }
    })
  },
  //点击生成
  formSubmit: function (e) {
    var that = this;
    this.setData({
      maskHidden: false
    });
    wx.showToast({
      title: '海报生成中...',
      icon: 'loading',
      duration: 1000
    });
    setTimeout(function () {
      wx.hideToast()
      that.createNewImg();
      that.setData({
        maskHidden: true
      });
    }, 1000)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var that = this;
    wx.getUserInfo({
      success: res => {
        console.log(res.userInfo, "huoqudao le ")
        this.setData({
          name: res.userInfo.nickName,
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (res) {
    return {
      title: "一起来学习小程序吧~",
      success: function (res) {
        console.log(res, "转发成功")
      },
      fail: function (res) {
        console.log(res, "转发失败")
      }
    }
  }
})

share.wxss

/* pages/share/share.wxss */
.bgImg{
  display: block;
  width: 70%;
  height: 366rpx;
  margin: 5% 15%;
}
.shareText{
  color: #333;
  font-size: 28rpx;
  margin-top: 50rpx;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}
.shareText .text{
  line-height: 60rpx;
  width: 100%;
  padding: 0 15%;
  box-sizing: border-box;
  display: block;
  color: #333;
}
.shareText .text2{
  text-align: right;
}
.btntxt{
   color: #333;
     font-size: 26rpx;
}
.imgBox{
  text-align: center;
  width: 100%;
  margin-top:60rpx;
  padding-bottom: 120rpx;
  display: flex;
}
.img{
  display: inline-block;
  width: 100%;
  height: 100%;
}
.m_l{
  margin-left: 180rpx;
}
.zfbtn{
  display:flex;
  flex-direction: column;
  font-size: 28rpx;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.zfbtn image{
  width: 70rpx;
  height: 70rpx;
}
button[class="zfbtn"]::after {
  border: 0;
} 
button[class="zfbtn m_l"]::after {
  border: 0;
} 
.imagePathBox{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.shengcheng{
  width: 80%;
  height: 80%;
  position: fixed;
  top: 50rpx;
  left: 50%;
  margin-left: -40%;
  z-index: 10;
}
.baocun{
  display: block;
  width: 80%;
  height: 70rpx;
  padding: 0;
  line-height: 70rpx;
  text-align: center;
  position: fixed;
  bottom: 50rpx;
  left: 10%;
  color: #fff;
  font-size: 32rpx;
  border-radius: 24rpx;
  background: #fdd668;

}
button[class="baocun"]::after{
  border: 0;
}