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 的 3d 渲染引擎界面以及吸附等效果的运用

canvas绘制各种基本图形

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

如何使用html5 canvas绘制一个矩形

html5 canvas图像处理的实现代码分享

html5中globalcompositeoperation属性的详细介绍

炫丽的倒计时效果canvas绘图与动画视频的资源推荐

html文件的中文乱码问题与在浏览器中的显示问题

html5 canvas api中drawimage()方法的使用代码实例分享(图)

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




打赏

取消

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

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

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

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

评论

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