【原创】小程序生成图片或者生成海报功能
发布于 15 天前 作者 dduan 3205 次浏览 最后一次编辑是 14 天前 来自 分享

对于开发者来说,对于文档已是很长时间的事情了,就是不熟悉,尤其是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

1 回复
回到顶部