将DOM对象转换成图片

原创 duan602728596 随笔 javascript 815阅读 2018-03-10 23:45:22 举报

自从到北京之后,干React项目开发,好久没写动画了。前两天看到了一个动画,就琢磨着怎么简单实现一下。
我们要做的,就是将DOM的内容原原本本复制,并绘制成图片。svg的foreignObject元素可以包含html片段,这样就可以将整个DOM片段转换成svg。
然后我们可以有两个选择,第一是将svg插入到一个div中,或者将svg绘制到canvas。svg相对于canvas来说,更清晰。

不过要注意的是,在svg里面的class是无效的,样式只有style=“key: value;”才能生效。可以使用window.getComputedStyle来获取DOM的样式。如果嫌麻烦,还可以使用html2canvas库。
svg内dom节点的xmlns属性不能省略。

最后来个简单的Demo:

canvas:

svg:

参考链接:https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复