html2 canvas实现浏览器截图


本文摘自PHP中文网,作者小云云,侵删。

使用html2canvas实现浏览器截图,必须在服务器环境下才能实现。本文主要介绍了使用html2canvas实现浏览器截图的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

作用

html2canvas可以通过纯JS对浏览器端经行截屏,但截图的精确度还有待提高,部分css不可识别,所以在canvas中不能完美呈现原画面样式


1

2

3

4

5

6

7

8

9

/*多行溢出省略就不行,只能超出隐藏了*/

     .book_inf{

            position: relative;

            overflow : hidden;

            text-overflow: ellipsis;

            display: -webkit-box;

            -webkit-line-clamp: 2;

            -webkit-box-orient: vertical;

        }

支持的浏览器

  1. Firefox 3.5+

  2. Google Chrome

  3. Opera 12+

  4. IE9+

  5. Safari 6+

基本语法


1

2

3

4

5

6

7

8

9

10

11

12

/*参数:

* #screenshots 所需要截图的元素id,截图后要执行的函数,

* backgroundColor 配置项背景色

* canvas为截图后返回的最后一个canvas

*/

function screenshotsImg(){

       html2canvas(document.querySelector("#screenshots"),{

            backgroundColor: 'transparent',// 设置背景透明

        }).then(canvas => {

            canvasTurnImg(canvas) //保存的图片格式转换方法

        });

    }

可用配置项

参数名称类型默认值描述
allowTaintbooleanfalseWhether to allow cross-origin images to taint the canvas---允许跨域
backgroundstring#fffCanvas background color, if none is specified in DOM. Set undefined for transparent---canvas的背景颜色,如果没有设定默认白色此处被坑,我改为backgroundColor可用
heightnumbernullDefine the heigt of the canvas in pixels. If null, renders with full height of the window.---canvas高度设定
letterRenderingbooleanfalseWhether to render each letter seperately. Necessary if letter-spacing is used.---在设置了字间距的时候有用
loggingbooleanfalseWhether to log events in the console.---在console.log()中输出信息
proxystringundefinedUrl to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.---代理地址
taintTestbooleantrueWhether to test each image if it taints the canvas before drawing them---是否在渲染前测试图片
timeoutnumber0Timeout for loading images, in milliseconds. Setting it to 0 will result in no timeout.---图片加载延迟,默认延迟为0,单位毫秒
widthnumbernullDefine the width of the canvas in pixels. If null, renders with full width of the window.---canvas宽度
useCORSbooleanfalseWhether to attempt to load cross-origin images as CORS served, before reverting back to proxy--跨域代理

设置图片格式

阅读剩余部分

相关阅读 >>

h5 canvas实现圆形动态加载进度实例

使用canvas实现迷宫游戏

canvas 动态图表

canvas实现波浪进度图(附demo)

jquery获取浏览器类型和版本号的方法

html5 canvas标签是什么意思?canvas标签使用方法介绍

html5 canvas实现粒子时钟的示例代码

基于 html5 canvas 实现的文字动画特效

html5 canvas常用属性方法(介绍)

html5 canvas中绘制字体与图片以及图形模糊问题解决

更多相关阅读请进入《Firefox》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...