先聊一聊为什么要做这个项目，H5活动经常会有DOM合成图片的需求，在github上也有html2canvas这个库来实现这个问题，但计算后的 DOM properties 画到 canvas 上，难免会出现变差，就导致合出来的图片让人不满意，所以有了开发这个项目的想法。这个项目，刚起步，所以支持的功能有限，目前已经提供 image, text 的元素加入到 canvas ，之后会持续更新其他元素或属性，如果使用的过程中遇到了什么 bug 欢迎提 issues 或发送 e-mail 给我 firefly_engineer@icloud.com. github 地址 欢迎 pr，star 以及 code contribution. 谢谢大家支持。

element2canvas

英文版 English

一个把图片，文本等转成 canvas 合成图片实现截屏的工呢个，这是插件不需要计算DOM属性，也不会出现偏差，所以还原度高达99%+

---

安装

npm install elment2canvas --save or <script src="path/to/index.min.js"></script>

---

用法

详细的demo

  var canvas = new element2canvas(opts)
  canvas.init().then(() => {
    return canvas.add(opts)
  }).then(() => {
    var img = document.createEelement('img')
    img.src = canvas.toDataURL('image/jpeg', 0.8)
    img.onload = () => {
      (document.body || document.documentElement).appendChild(img)
    }
  }) 

---

配置属性

属性	说明	类型	默认值
width	canvas 的宽度	number	0
height	canvas 的高度	number	0
zIndex	和 css z-index 属性类似	number	0
container	canvas 插入的DOM位置	string / DOM	body
background	背景颜色或图片	string	transparent
crossOrigin	图片跨域	sring(anonymous)	none
elements	子元素配置	array	none

---

element properties

属性	说明	类型	默认值
width	element 的宽度	number	0
height	element 的高度	number	0
zIndex	和 css z-index 属性类似	number	0
top	和 css top 属性类似	number	0
bottom	和 css bottom 属性类似	number	0
left	和 css left 属性类似	number	0
right	和 css right 属性类似	number	0
src	图片的 src	string	none
text	文本内容	string	none
fontSize	字体大小	number	12
fontFamily	字体	string	none
color	字体颜色	string	none

---

实例的方法

方法	说明	返回	参数
init	初始化配置信息	Promise
toDataURL	转化 canvas 为base64编码的图片	image of base64	type(image/jpeg, ...), quality
add	增加一个元素	Promise	element