zhishifufei_uniapp/utils/poster.js

function renderProductPoster(target, id, bgPath, codePath, WIDTH = 600, HEIGHT = 960, site_name = "知识付费") {
    return new Promise((resolve, reject) => {
        let context = uni.createCanvasContext(id, target);

        context.fillStyle = "#FFFFFF";
        context.fillRect(0, 0, WIDTH, HEIGHT);
        context.drawImage(bgPath, 0, 0, 600, 740);
        context.drawImage(codePath, 118, 785, 130, 130);
        context.save();

        context.font = "22px sans-serif";
        context.fillStyle = "#999999";

        let text = "邀您加入" + site_name;
        let list = [];
        let start = 0;
        for (let i = 0; i <= text.length; i++) {
            if (context.measureText(text.slice(start, i)).width > 198) {
                list.push(text.slice(start, i - 1));
                start = i - 1;
            }
        }
        if (start !== text.length) {
            list.push(text.slice(start));
        }
        if (list.length > 3) {
            list.length = 3;
            for (let j = 0; j <= list[2].length; j++) {
                if (context.measureText(list[2].slice(0, j) + "……").width > 198) {
                    list[2] = list[2].slice(0, j - 1) + "……";
                    break;
                }
            }
        }
        list.push("长按识别或扫码进入");
        for (let k = 0; k < list.length; k++) {
            context.fillText(
                list[k],
                284,
                785 + 130 / list.length / 2 + (130 / list.length) * k
            );
        }
        context.draw(true, () => {
           
            uni.canvasToTempFilePath({
                canvasId: id,
                fileType: 'png',
                destWidth: WIDTH,
                destHeight: HEIGHT,
                success: (res) => {
                    resolve(res.tempFilePath);
                    context = null;
                },
                fail: err => {
                    reject(err.errMsg);
                    context = null;
                }
            }, target)
        });




    });
}

export default {
    renderProductPoster
}