关于vue.js:在canvas中使用文档流布局快速生成朋友圈分享图

背景

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

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

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