对于开发者来说，对于文档已是很长时间的事情了，就是不熟悉，尤其是canvas上面，真的是头疼的很。在百度里面搜出来的就是渣渣，都是过期的案例了。下面是福利了。文档地址

基础使用步骤：

第一步：下载或者克隆

（下载方式，不懂自行百度），下载好后，在项目中找到 components 目录中 wx_poster 文件夹，进行拷贝放入到自己项目中。比如我放入在 components 文件夹下面。

第二步：引入组件

找到自己想要引入的页面 .json文件。然后将 usingComponents 里面进行添加上 wx_poster 。比如如下（注意组件路径）：

{
  "usingComponents": {
    "wx_poster": "/components/wx_poster/wx_poster"
  }
}

第三步：在 .wxss 文件中使用

<wx_poster id="wx_poster"  showPoster="{{true}}"></wx_poster>

<!-- 下面是渲染使用的 image  -->
 <image style="width: {{width}}rpx;height: {{height}}rpx" src="{{imgSrc}}"></image>

第四步：在 .js 中使用

此处是重点啊。咱们必须在 onReady 中调用初始化

// pages/demo/index.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        imgUrl: '',
        height: '',
        width: '',
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
        var that = this;
        // 1、获取到页面中的dom对象
        var wx_poster = this.selectComponent('#wx_poster')
        // 2、调用inits 初始化
        wx_poster.inits(function (){ 
            console.log('初始化完成')
            // 3、添加海报宽度高度、图片、文字等方法在此处添加  
            wx_poster.addImg('https://uploadfile.bizhizu.cn/2015/0723/20150723061023750.jpg');
            wx_poster.setFont('我是文本内容')
            wx_poster.draw(function () { // 绘制成功
                // 导出图片
                wx_poster.generatePic(function (obj) {
                    if(obj.status) { // 导出成功
                        consle.log('导出成功')
                        that.setData({
 // 设置视图宽度和高度。
                            width: obj.w,
                            height: obj.h
,
                             imgSrc: obj.tempFilePath
                        })
                    }else {
                        // 导出失败
                        consle.log('导出失败')
                    }
                })
            })
        })
    },
    // ....代码块
})

更多文档： https://www.kancloud.cn/my_love1/wx_poster/1688453