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--跨域代理

设置图片格式

阅读剩余部分

相关阅读 >>

如何在html5画布中绘制文本图形

canvas绘制奥运五环代码分享

使用html5 canvas api中的clip()方法裁剪区域图像代码实例

图文详解如何用html5 canvas画一条直线

canvas是什么意思

canvas绘制工作流之绘制节点

canvas实现旋转风车的绘制

html5 canvas实现文本对齐的代码总结

canvas橡皮筋式线条绘图的方法介绍(代码示例)

html5中globalcompositeoperation属性的详细介绍

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




打赏

取消

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

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

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

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

评论

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