seo图片转canvas_将你的 Virtual dom 衬着成 Canvas

demo 地址：https://muwoo.github.io/vnode2canvas/

从一个小的需求提及：某一天，产品提了一个这样的需求，须要制作一个微信活动页，活动页可以分享包含用户干系信息的图片。
这些信息是须要从接口取的，而且每个人都不一样。
第一次碰到这种需求的时候，基本上都会去手撸 canvasAPI 去做渲染功能，这种情形的步骤大致如下：

面临的紧张问题是复用性太差，其次是性能上也有问题，用户看到的界面不一定和正式渲染出的界面同等，可能存在渲染差异。
作为一个有追求的前端，当然得想想看有没有更好的办法。
于是乎理解到了一个 html2canvas 这样一个库。
但是总是觉得还是要转成 dom 再去绘制，而且觉得性能和稳定性也不是很好。

我们知道 vue 通过 vnode 实现了对不同真个渲染事情，那有没有可能通过 vnode 实现对 canvas 的渲染呢？也便是说，没有 vnode -> html -> canvas 而是直接vnode -> canvas。
同时利用 vue 的数据驱动，来达到绘制的数据驱动。
想法有了，下面开始履行。

这篇文章对此有详细的先容：60 FPS on the mobile web 这里大略的概括一下：

canvas 是一种立即模式的渲染办法，不会存储额外的渲染信息。
Canvas 受益于立即模式,许可直接发送绘图命令到 GPU。
但若用它来构建用户界面，须要进行一个更高层次的抽象。
例如一些大略的处理,比如当绘制一个异步加载的资源到一个元素上时会涌现问题,如在图片上绘制文本。

在 HTML 中，由于元素存在顺序，以及 CSS 中存在 z-index，因此是很随意马虎实现的。
dom 渲染是一种保留模式，保留模式是一种声明性 API，用于掩护绘制到个中的工具的层次构造。
保留模式 API 的优点是，对付你的运用程序，他们常日更随意马虎构建繁芜的场景，例如 DOM。
常日这都会带来性能本钱,须要额外的内存来保存场景和更新场景，这可能会很慢。

看来 canvas 绘制页面的研究，良久之前就已经有人付出过研究了。
而且性能还是很不错的。
那我们更要试试看，到底我们的想法能不能实现了！
越来越期待....

canvas 的渲染实在也是一种考试测验，既然古人以及做了充分的实践，那么我们便站在巨人的肩膀上去基于 vue 来实现一个数据驱动的canvas渲染。
说做就做！
(我们这里只供应思路，不做详细实现细节的谈论，由于实现起来有点繁芜，如果有兴趣可以参考我的项目实现，或者一起互换磋商 )

熟习 Vue 源码的该当都知道，Vue 通过 render 函数，传入 createElement 方法来布局出一个 vnode，通过发布--订阅模式来实现对数据的监听，重新天生 vnode。
vnode 末了被转成各平台所需的视图。
而我们要做的便是在 vnode 这一层开始。
以是，我们基于 Vue 源码的办法，实现一个监听函数，并混入 Vue 实例中：

Vue.mixin({//...created(){if(this.$options.renderCanvas){//...//监听vnode中引用的变革，重新渲染this.$watch(this.updateCanvas,this.noop)//...}},methods:{updateCanvas(){//仿照Vuerender函数//探求实例中定义的renderCanvas方法，并传入createElement方法letvnode=this.$options.renderCanvas.call(this._renderProxy,this.$createElement)}})

这样我们就可以愉快的在组件内部利用：

renderCanvas(h){returnh(...)}canvas 元素处理

render 的 vnode 我们须要做额外的一些约束，也便是说我们须要怎么样的渲染标签，来渲染对应的 canvas 元素（举个 ）：

个中这些元素类分别都继续于一个 Super 类，并且由于它们各有不同的展示办法，因此它们分别实现自己的 draw 方法，做定制化的展示。

绘制 canvas 布局最根本的写法是为 canvas 元素传入一系列坐标点和干系的根本宽高，这样写到实际项目中可能是这样的：

renderCanvas(h){returnh('view',{style:{left:10,top:10,width:100,height:100}})}

这样写确实有点未便利掩护，目前有好几种办理方案，一种是利用 css-layout去做管理。
css-layout 支持的转换属性如下：

这样也只是做了一层转换，帮我们更好的用 css 思维去写 canvas，但是如果我们很不爽 css in js 的写法，实在我们还可以写一个webpack loader 来加载外部 css：

constcss=require('css')module.exports=function(source,other){letcssAST=css.parse(source)letparseCss=newParseCss(cssAST)parseCss.parse()this.cacheable();this.callback(null,parseCss.declareStyle(),other);};classParseCss{constructor(cssAST){this.rules=cssAST.stylesheet.rulesthis.targetStyle={}}parse(){this.rules.forEach((rule)=>{letselector=rule.selectors[0]this.targetStyle[selector]={}rule.declarations.forEach((dec)=>{this.targetStyle[selector][dec.property]=this.formatValue(dec.value)})})}formatValue(string){string=string.replace(/"/g,'').replace(/'/g,'')returnstring.indexOf('px')!==-1?parseInt(string):string}declareStyle(property){return`window.${property||'vStyle'}=${JSON.stringify(this.targetStyle)}`}}

大略的来说：紧张也便是将 css 文件转成 AST 语法树，之后再对语法树做转换，转成 canvas 须要的定义形式，并以变量的形式注入到组件中。

如果我们的元素很多，须要滚动时，我们必须办理 canvas 内部元素滚动的问题。
这里我选择了利用Zynga Scroller 来仿照用户滚动方法，通过他返回的滚动坐标点，来对 canvas 进行重绘。
有兴趣的可以参考这里我的实现：

https://github.com/muwoo/vnode2canvas/blob/master/src/core/shape/scrollView.js

对付 click，touch 等 dom 事宜的仿照，我们采取的方案是根据点击区域进行检测，并找出最底层的元素，递归探求父元素并触发对应事宜处理程序，从而仿照事宜冒泡。
详细的实现可以参考这里：

https://github.com/muwoo/vnode2canvas/blob/master/src/core/event.js

canvas 绘制页面也是一种创新的考试测验，希望这里的研究对你有启示，也欢迎你的 PR。
这里也做了很多性能优化，限于篇幅不在赘述了，有兴趣也可以一起磋商。

末了：它并不虞味着完备取代基于DOM的渲染，这仍旧须要文本输入，复制/粘贴，可访问性和SEO。
出于这些缘故原由，我们可以利用canvas和基于DOM的渲染的组合。

更多干货文章，可关注小智的公众年夜众号：大迁天下 (打开微信，搜索"大众年夜众号)，里面有很多类似的文章，有须要啥资料的也可以在评论区跟我说，我会只管即便解答。