背景是常见的需求。开发微信小程序时，前端需要生成海报进行分享。目前常见的解决方法有以下几种：使用htmlCanvas库，使用dom来使用前端的ctxapi一张一张生成图片，或者使用一些绘图工具使用puppeteer后台服务打开图片的截图相应的接口。缺点：这个库本身不能用在小程序中，因为涉及到dom，web端有各种。一种兼容性问题，比如某个属性不支持这个方案，呃。..也许这就是程序员头发少的原因吧。千辛万苦把它画好，以防万一我需要在视觉上调整它。.这种方案的开发费时费力，而且不易维护。虽然网上有react-canvas，小程序里也有一些工具，但是只是封装了绘制矩形和文字的方法。对于布局，仍然需要手动计算宽高和位置，并没有彻底解决痛点。这个方案对于前端来说是最完美的，推荐有条件的大家使用这个方案。前端写好页面放到服务上，然后连接一个服务访问这个页面进行截图，因为开发和截图都是chromium，基本没有兼容性问题。但是，这种解决方案消耗了大量的服务器资源。每次截图都需要打开一个新的浏览器标签页，而且截图时间很长，这对于一些公司来说可能是无法接受的。简介easy-canvas实现了在canvas中创建文档流，可以轻松支持组件化开发，无第三方依赖。只要支持标准画布就可以使用。在基本功能的基础上增加事件和滚动。-查看和其他支持。基础版支持小程序和网页。无图无真相DEMO项目地址easy-canvasvue组件版vue-easy-canvas如果你用过render功能，想必熟悉使用方法。相关属性在项目和例子中都有介绍，本文不再过多介绍。基本用法如下：npminstalleasy-canvas-layout--saveimporteasyCanvasfrom'easy-canvas-layout'//先绑定图层constlayer=easyCanvas.createLayer(ctx,{dpr:2,width:300,height:600,canvas//必须传递小程序环境})//创建节点//c(tag,options,children)constnode=easyCanvas.createElement((c)=>{returnc('view',{styles:{backgroundColor:'#000'},//styleattrs:{},//src等属性on:{}//点击加载等事件},[c('text',{color:'#fff'},'HelloWorld')])})//vue中使用的挂载node.mount(layer)另外，在基础版本上，封装了相应的vue组件。与render函数相比，简洁易懂的多。基本用法如下：npminstallvue-easy-canvas--saveimporteasyCanvasfrom'vue-easy-canvas'Vue.use(easyCanvas)
