domtoimage--html 转化为图⽚
html 转化为图⽚
前⾔
这段时间的⼯作中，⼀直在做类的H5，开发的过程中很关键的⼀部分是将dom节点转化为图⽚。起初是⽤html2canvas来做的，做完之后感觉图⽚清晰度的效果不是很好，然后就再GitHub上到 domtoimage这个js插件换了之前html2canvas。更换后不仅清晰度有所提⾼，能够⽀持的图⽚格式和dom节点样式也⽐html2canvas要多。
简洁的domtoimage
domtoimage 主要代码才700多⾏，⽅法和属性都⽐较少，下载之后看⼀下就知道怎么⽤，有些什么功能。虽然html2canvas 代码3000多⾏，调⽤其实也是不难，但相对来说代码确实⽐domtoimage多了很多。
domtoimage 主要的⽅法有：
1
2
3
4
56
7
8
9
10
11
12
1
2
3
45
6
7
8function  filter  (node ) {    return  (node.tagName !== 'i');}ElementById('my-node'), {filter : filter})    .then(function  (dataUrl ) {        /* do something */    });
1
2
3
4
5
6
7
8
1
2
3
4
5
domtoimage 主要的属性有：svg canvas
filter ： 过滤器节点中默写不需要的节点；
bgcolor ： 图⽚背景颜⾊；
height, width ： 图⽚宽⾼；
style ：传⼊节点的样式，可以是任何有效的样式；
quality ： 图⽚的质量，也就是清晰度；
cacheBust ： 将时间戳加⼊到图⽚的url中，相当于添加新的图⽚；
imagePlaceholder ： 图⽚⽣成失败时，在图⽚上⾯的提⽰，相当于img标签的alt；
domtoimage 和html2canvas 对⽐
兼容更多的样式和标签
在我做的那个H5中，节点不仅包含有渐变，滤镜，阴影等⽐较难渲染的样式，还包含有各种svg标签，同时svg具有描边和填充等属性。两者都是直接调⽤借⼝没进⾏任何处理，通过对⽐可以看出，domtoimage⽐html2canvas多了能够兼容滤镜，阴影（box-shadow）等样式，能够更好的⽀持svg。
⽣成的图⽚⽐较清晰
同样⽤最简单的⽅法调⽤两个⽅法⽣成图⽚，能够看得出通过domtoimage⽣成出来的图⽚明显的⽐html2canvas要清晰很多
稍微放⼤后对⽐，就能⾮常清楚的看出差别
domtoimage 不⾜点
domtoimage也不是所有的样式都能够兼容，到⽬前为⽌我发现的兼容不了的属性有，图形遮罩mask-box-image，和svg 的阴影drop-shadow。因为项⽬所需，所⾃⼰处理了图形遮罩的兼容问题，⽽svg阴影drop-shadow，实在是有点难度，暂时也就放置了。图形遮罩的兼容代码在下⾯第⼆个dome中。这⾥就不多讲了
var  node = ElementById('my-node');PixelData(node)    .then(function  (pixels ) {        for  (var  y = 0; y < node.scrollHeight;  y) {          for  (var  x = 0; x < node.scrollWidth;  x)
{            pixelAtXYOffset = (4 * y * node.scrollHeight)  (4 * x);            /* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */            pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset  4);          }        }    });
1
2
3
4
5
6
7
8
9
10
11
12
13
总结
domtoimage 性能还是很不错，优于html2canvas，代码少，性能⾼，应⽤简单。如果有其他好⽤的插件，或编写有错的地⽅欢迎留⾔赐教，谢谢！
【猿2048】www.mk2048
更多专业前端知识，请上 【猿2048】www.mk2048

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。