MemHtmlCanvas 海报图合成工具

将html dom渲染成海报图，前端开发0成本上手。 依赖xtemplate模板预发，可以学习其基本语法 xtemplate 如果不使用模板渲染没关系，可以直接使用已有dom进行渲染，详情情看文档

• 安装
• 用法
• 文档
• 注意事项

安装

$ npm install mem-htmlcanvas --save

用法

new MemHtmlCanvas(xtpl, [options]); MemHtmlCanvas.renderFragment(dom, [options]);

import MemHtmlCanvas from 'mem-htmlcanvas';
import shareXtpl from './share.xtpl';

const canvasObj = new MemHtmlCanvas(shareXtpl);

const data = {
    nick: '哆啦A梦',
    tel: 18815583912
}
canvasObj.render(data).then(({imgUrl}) => {
    // imgUrl则为生成海报图的base64编码
});

// 或者

MemHtmlCanvas.renderFragment(document.querySelect('#box')).then(({imgUrl}) => {
    // imgUrl则为生成海报图的base64编码
});

文档

OPTIONS

preview ： true（默认）/false

是否开启预览功能，如果为true，则可以用previewDom.show();预览渲染结果，如果为false，则只输出canvas对象。

canvasObj.render(data).then(({imgUrl, previewDom}) => {
    previewDom.show();
});

onlyCanvas ： true/false（默认）

是否只渲染canvas，如果为true，则不会有imgUrl生成。

const canvasObj = new MemHtmlCanvas(shareXtpl, {
    onlyCanvas: true,
});

canvasObj.render(data).then(({imgUrl, previewDom}) => {
    previewDom.show();
});

scale: 2(默认)

canvas画布默认放大比例，一般不修改。

注意事项

• canvas不支持多行文本溢出截取的属性，本模块输出textOverflow方法可以给你处理此ui问题，用法如下：

import {textOverflow} from 'mem-htmlcanvas';
let title = textOverflow({
    width: 320, // 容器的宽度
    fontSize: 36, // 文本字体
    line: 2, // 文本显示多少行
    lineHeight: 42, // 行高
    text: '舒比奇动动乐舞曲小内裤M22/L20/XL18/XXL18片【1包装】'
})