小程序开发之将页面转化为图片保存至手机相册

保存海报用到的是@sh-rep/super-poster 库

相关说明文档：https://www.npmjs.com/package/@sh-rep/super-poster

改进版：https://www.npmjs.com/package/super-poster

<!-- -------------------------------- 引入部分 --------------------------------- -->
import { getPoster } from '@sh-rep/super-poster';
// 引入配置文件（配置项较多，建议在同级目录下新建一个文件单独配置）
import { getPosterConfig } from './poster-config';
// 相册权限
import { useGetWritePhoneAuth } from '@/utils/getAlbumAuth';
<!-- -------------------------------- 相关函数 --------------------------------- -->
const { saveImg } = useGetWritePhoneAuth();
const createhonorPosterActivityImg = async () => {
    // 显示加载指示器
    showLoading({ title: '海报生成中', mask: true });
    const sourceData = {/** 你想传入的数据 */ };
    const json = getPosterConfig(sourceData);
    let res = await getPoster(json);
    // 生成海报
    let filePath = res.img;
    // 隐藏加载指示器并显示警告
    if (!filePath) {
        nextTick(hideLoading);
        return toast({ title: '图片生成失败，请再试一次' });
    }
    nextTick(hideLoading);
    // 将生成的图片保存到相册
    saveImg(filePath);
};
<!-- --------------------------------- 海报配置项 --------------------------------- -->
/**
 * @param {object} data - 包含绘制海报所需数据的对象
 * @returns {object} - 包含海报配置的对象
 */
export const getPosterConfig = (data) => {
    return {
        width: 750, //画布宽度
        height: 1560, //画布高度
        displayWidth: 670, //展示宽度
        ratio: 1.5, // 画笔缩放比
        posterFileName: 'imgname', // 图片名称
        // dom 一共有：text、texts、image、block 这几种类型
        doms: [
            {
                type: "text", //dom类型
                x: 0, //x坐标
                y: 56, //y坐标
                width: 750, //文本宽度
                value: "宇宙最强最强的小分队", //文本内容 （可以是你传入的变量，在data中取）
                fontSize: 48, //字体大小
                color: "#212224", //文本颜色
                fontWeight: "bold", //字重
                lineNum: 1, //行数
                textAlign: "center", //左右对其方式
                borderColor: "#000", //文字描边颜色
                borderWidth: 0, //文字描边宽度
                rotate: 0, //旋转角度
                zIndex: 10,
            }
        ]
    }
}

授权微信相册相关代码 

import {saveImageToPhotosAlbum } from '@tarojs/taro';

const saveImg = (filePath)=>{
    Taro.saveImageToPhotosAlbum({
        filePath,
        success: function (res) { 
            toast({ title: '保存成功' });
        }
    })
}