背景

一个常见的需要，在开发微信小程序时，前端须要生成海报图分享，目前常见解决方案如下：

  1. 应用htmlCanvas库，利用dom来生成图片
  2. 前端应用ctx的api一个一个的画进去，或者借助一些绘图工具
  3. 利用puppeteer后端服务，关上相应界面截图

毛病:

  1. 这个库自身并不能在小程序应用，因为波及到dom，在web端也有各种兼容性问题比方某个属性不反对
  2. 这个计划，额。。。可能这就是程序员头发少的起因吧。费尽含辛茹苦画好，万一视觉调整一下。。这个计划开发费时费力，不好保护。尽管web端有react-canvas，小程序也有一些工具，但目前都只是封装了绘制矩形、文字等办法，对于布局来说还是须要手动计算宽高以及地位，没有齐全解决痛点。
  3. 这种计划对前端来说是最完满的，也举荐大家有条件用这个计划，前端写好页面放到服务上，而后再挂一个服务拜访这个页面来截图，因为开发和截图的都是chromium，根本不存在兼容性问题。然而这种计划会十分消耗服务器资源，每次截图都要关上一个新的浏览器tab，并且截图耗时比拟长，对于一些公司来说可能无奈承受。

简介

easy-canvas实现了在canvas中创立文档流，并且能够很轻松的反对组件化开发，并且没有第三方依赖，只有反对规范的canvas就能够应用，在实现基本功能的根底上增加了事件、scroll-view等反对。根底版反对小程序、web。

无图无假相 DEMO

我的项目地址easy-canvas

vue组件版本vue-easy-canvas

如果应用过render函数的必定很相熟应用形式了，相干属性在我的项目里以及示例里都有介绍，本篇文章就不过多介绍，根本应用如下：

npm install easy-canvas-layout --save
    import easyCanvas from 'easy-canvas-layout'    // 首先绑定图层    const layer = easyCanvas.createLayer(ctx, {      dpr: 2,      width: 300,      height: 600,      canvas   // 小程序环境必传    })    // 创立node     // c(tag,options,children)    const node = easyCanvas.createElement((c) => {      return c('view', {         styles: { backgroundColor:'#000' }, // 款式        attrs:{},                           // 属性 比方src        on:{}                               // 事件 如click load       },       [        c('text',{color:'#fff'},'Hello World')      ])    })    // mount    node.mount(layer)

vue中应用

另外在根底版本上，封装了相应的vue组件,相比render函数，要简洁易懂很多，根本应用如下:

npm install vue-easy-canvas --save
import easyCanvas from 'vue-easy-canvas'Vue.use(easyCanvas)
<ec-canvas :width="300" :height="600">    <ec-scroll-view :styles="{height:600}">    <ec-view :styles="styles.imageWrapper">        <ec-image             src="https://tse1-mm.cn.bing.net/th/id/OIP.Dkj8fnK1SsPHIBmAN9XnUAHaNK?pid=Api&rs=1"             :styles="styles.image"             mode="aspectFill"></ec-image>        <ec-view :styles="styles.homeTitleWrapper">        <ec-text>easyCanvas</ec-text>        </ec-view>    </ec-view>    <ec-view :styles="styles.itemWrapper"         v-for="(item,index) in examples"         :key="index"        :on="{        click(e){            window.location.href = host + item.url        }        }">        <ec-view :styles="styles.title">        <ec-text>{{item.title}}</ec-text>        </ec-view>        <ec-view :styles="styles.desc">        <ec-text>{{item.desc}}</ec-text>        </ec-view>    </ec-view>    </ec-scroll-view></ec-canvas>

Ending

本篇文章次要介绍我的项目背景以及根本应用，也是为了给本人打个广告吧:) 前面会写实现原理以及一些坑，欢送各位交换，感激浏览！