html5 实现网页截屏页面生成图片(图文)-白红宇

html5 实现网页截屏页面生成图片(图文)

阅读量：5266 次

发布时间：2019-06-14

本文共 685 字，大约阅读时间需要 2 分钟。

html2canvas通过获取页面的DOM和元素的样式信息，并将其渲染成canvas图片，从而实现给页面截图的功能。

因为每个浏览器渲染页面的方式都不尽相同，所以生成的图片也不太一样。

环境要求: jQuery

兼容性: Firefox 3.5+, Chrome, Opera, IE9

官网主页:

测试生成的图片效果，有些元素的样式没有完全展示出来

js插件实现网页截屏页面生成图片

测试代码：

            
             
                                                 Hello!        
     
                  计算机天堂测试html5页面截图            
      
jsjtt.com        
     
                        生成界面如下：

说明在测试过程中出现的问题如果页面上引用跨域的图片文件调用toDataURL的时候会出错

SecurityError: The operation is insecure.

解决方法：在跨域的服务器上设置header设置为允许跨域请求

access-control-allow-origin: *  access-control-allow-credentials: true

本文转自：http://www.jsjtt.com/webkaifa/html5/2013-10-29/42.html

转载于:https://www.cnblogs.com/dreammyle/p/4872549.html

你可能感兴趣的文章

让IE浏览器支持CSS3圆角属性的方法

查看>>

巡风源码阅读与分析---nascan.py

查看>>

LiveBinding应用 dataBind 数据绑定

TCP为什么需要3次握手与4次挥手(转载)

URAL 1002 Phone Numbers（KMP+最短路orDP）

格而知之2：UIView的autoresizingMask属性探究

寄Android开发Gradle你需要知道的知识

查看>>

简述spring中常有的几种advice？

查看>>

整理推荐的CSS属性书写顺序

查看>>

ServerSocket和Socket通信

查看>>

css & input type & search icon

查看>>