PC屏幕快照

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ming_221/article/details/82805510

利用屏幕快照做毛玻璃效果。flter: blur(5px)只有作用在根节点或图片上才有毛玻璃的效果,但是作用在根节点body上的时候所有元素无法跳出文档流跳出毛玻璃,这才想到生成一张屏幕快照,模糊之后放在底下。

不可以把dom转成canvas,但是可以把dom转成svg,然后再把svg画到canvas里面去。为什么要先把dom转成svg呢?这可能是因为svg使用xml表示、结构和dom一致吧。

屏幕快照

图片必须要同源,否则生成的快照没有图片

html2canvas

http://html2canvas.hertzen.com/documentation

rasterizeHTML.js 知乎-右下角问题反馈快照

// 未解决	
rasterizeHTML.allinone.js:11 Blocked script execution in 'http://localhost:5000/Report' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

可以利用before、after伪类做毛玻璃效果。前提是毛玻璃和弹窗必须是两个并列的节点

------------ 2018.6.6

猜你喜欢

转载自blog.csdn.net/ming_221/article/details/82805510
PC:
今日推荐