微信小程序生成海报图

使用 snapshot 组件生成海报

要求：

1、在app.json里边设置

"rendererOptions": {
        "skyline": {
            "defaultDisplayBlock": true,
            "disableABTest": true,
            "sdkVersionBegin": "3.0.0",
            "sdkVersionEnd": "15.255.255"
        }
    },

2、在想使用snapshot的页面的json里设置

 "renderer": "skyline" ,

3、使用方式

//width 和 height 是要生成的海报图大小，最好使用要生成的图片大小，要不会有白边 
<snapshot id="view" width="{{ imgObj.width }}" height="{{ imgObj.height }}">
    海报内容
</snapshot>

//生成海报并下载
 this.createSelectorQuery().select("#view")
            .node().exec(res => {
                const node = res[0].node
                // 保存海报
                node.takeSnapshot({
                    type: 'arraybuffer',
                    format: 'png',
                    success: (res) => {
                        const f = `${wx.env.USER_DATA_PATH}/${util.uuid()}.png`
                        const fs = wx.getFileSystemManager();
                        // 将海报数据写入本地文件
                        fs.writeFileSync(f, res.data, 'binary')
                        this.setData({
                            img: f
                        })

                        // 把海报图片保存到本地
                        wx.saveImageToPhotosAlbum({
                            filePath: f,
                            success(data) {
                                wx.showToast({
                                    title: '图片保存成功',
                                    icon: 'none'
                                })
                            },
                            fail(err) {
                                if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
                                    wx.showModal({
                                        title: '提示',
                                        content: '需要您授权保存相册',
                                        showCancel: false,
                                        success: modalSuccess => {
                                            wx.openSetting({
                                                success(settingdata) {
                                                    if (settingdata.authSetting['scope.writePhotosAlbum']) {
                                                        console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
                                                    } else {
                                                        console.log('获取权限失败，给出不给权限就无法正常使用的提示')
                                                    }
                                                }
                                            })
                                        }
                                    })
                                }
                            }
                        })
                    },
                    fail(error) {
                        console.log("fail", error)
                    }
                })
            })

使用skyline需要注意的点：

1、开启对应模式

2、使用overflow设置view滚动不起作用，如果页面想设置滚动使用<scroll-view type="list"></scroll-view>