软件简介

html2canvas 使你可以直接在用户浏览器上截取网页或部分网页的“屏幕快照”。屏幕截图基于DOM,因此可能无法真实表示100%的准确度,因为它无法生成实际的屏幕截图,而是根据页面上可用的信息来构建屏幕截图。

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (2)

加载中
有人解决了手机端图片模糊的问题么
2017/04/28 12:21
回复
举报
@红薯 关于Runjs广场使用截图代替iframe的问题,是否可以考虑用这个库试试。他的demo:http://html2canvas.hertzen.com/screenshots.html html2canvas
2013/05/19 17:30
回复
举报
更多评论
暂无内容
发表于大前端专区
2017/10/27 22:55

html2canvas

# [html2canvas](http://html2canvas.hertzen.com/documentation.html) > 该脚本允许您直接在用户浏览器上拍摄网页或其部分的“截图”。截图是基于DOM,因此可能不是100%准确的真实表示,因为它不会实际的截图,而是根据页面上可用的信息构建截图。

0
0
发表了博客
2019/06/05 08:20

html2canvas原理

html2canvas有2种模式,一种是利用foreignObject,一种是纯canvas绘制 1.foreignObject到canvas 步骤:   1.把要截图的dom克隆一份,过程中把getComputedStyle附上style   2.放到svg的foreignObject中   3.把svg序列化成img的src(SVG直接内联): img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(new XMLSerializer().serializeToString(svg));   4.ctx.drawImage(img, ....) 2.纯canvas 步骤: ...

0
0
发表于大前端专区
2020/11/16 19:16

带你领略 html2canvas

这个过程中如果碰到一些天坑,不用怕,小编我已经找到网上的一些解决方案了 html2canvas - 项目中遇到的那些坑点汇总(更新中...) html2canvas库使用中出现的问题及解决方案 如何安装 使用 npm or yarn npm install html2canvas yarn add html2canvas 导入 import html2canvas from 'html2canvas' 用法 html2canvas(document.body).then(function(canvas) {     document.body.appendChild(canvas); }); 所以一个基本...

0
0
发表于大前端专区
2018/02/01 15:32

html2canvas使用笔记

onrendered方法 支持图片 不支持图片背景 html2canvas(document.body, { onrendered: function(canvas) { document.body.appendChild(canvas); } }); 而使用官方例子 html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) }); 则不支持图片,支持图片背景 注意:以http开头的图片不能显示出来 图片不能在canvas中显示出来...

0
0
发表了博客
2018/04/27 21:44

关于canvas和html2canvas

          //最好将需要截图的html代码 用canvas标签包住,给标签添加样式 var getPixelRatio = function (context) { var backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1; return (window.devicePixelRatio || 1) / b...

0
0
发表于大前端专区
2020/09/23 12:21

html2canvas 使用总结

- 一些网上说的问题这里就不在说了,不支持一些熟悉,flex的-web-box不好使,还有就是box-shadow 也是, - 我遇到的问题是如果说截图之后需要对图片进行加水印效果的话,如果说页面中间添加水印有可能就无法看到,在反复的测试后找到问题所在,如果说页面滚动到底部这个时候水印添加的时候的0点位置并不是大家认为的页面的左上角而是当前窗口的左上角,导致水印无法在页面上显示,知道原因后解决就很简单了只需要把滚动的高度获...

0
0
发表了博客
2019/01/18 11:17

html2canvas 使用指南

html2canvas(document.body).then(function(canvas) { document.body.appendChild(canvas); }); 属性参数: http://html2canvas.hertzen.com/configuration 兼容性:   兼容安卓与苹果微信浏览器 注意事项:   如果需要实现长按保存功能,需要注意user-select 设置为auto   图片地址如果跨域 需要做相应设置 举例使用方式:   获取saveWrap 容器内的元素 转为canvas ,并将canvas添加到 poster-container 中,再根...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表于服务端专区
2019/09/23 13:55

如何在前端界面录屏时候,包含前端嵌套的iframe中内容?

各位大佬好, 最近在开发基于前端界面录屏的功能遇到了问题,由于需要在前端界面访问虚拟云桌面,然后采用了iframe的方式来嵌套虚拟云桌面的画面,但是在进行界面录屏的时候没办法获取到iframe中的DOM控件内容,导致录屏时候iframe的画面是白色的。 大家是否接触过这块或有更好的思路建议,可以评论交流 谢谢!

1
0
发表于服务端专区
2019/02/26 17:15

用html2canvas截取不了object标签上视频画面

用html2canvas截取不了object标签上视频画面,出现一块黑色的区域,求解

3
0
2018/08/01 15:08

浏览器打印js生成的PDF时,预览界面没有内容。

问题是这样的,用js把表格生成PDF文件,然后打印。现在在打印预览的时候发现一个bug。 这个是测试页面: 当第一次点击“预览打印 PDF”按钮时,预览界面空白。如下图: 关闭预览窗口,再次点击按钮,预览成功。 当我刷新表格之后,再次打印预览,又会出现空白。也就是说第一次点击按钮预览会出现空白。代码如下: 我alert了 newImg.src 的值,不管是第几次打开,newImg.src的值完全一样。 依赖的js:...

1
1
2016/05/10 16:59

html2canvas 只捕捉到了浏览器可视区域的内容,怎么捕捉指定dom里面的所有内容

html2canvas 只捕捉到了指定dom对象浏览器可视区域的内容,怎么捕捉指定dom里面的所有内容?就是包括滚动条下面的内容

8
0
发表了问答
2015/11/17 15:49

html2canvas截图如何解决跨域的问题?

1、问题描述 如果不跨域的话,截图正常。 如果有跨域的图片,那么js报错,报错信息如下: Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 2、代码 /** * 截图 */ function doScreenShot(){ html2canvas(document.body, { onrendered: function(canvas) { canvas.id = "mycanvas"; var image =canvas.toD...

7
3
发表了问答
2016/09/19 19:25

html2canvas的中文或者英文api的地址谁知道,给我一个

最近遇到一个导出报告,要将页面以图片pdf的形式导出,去网上搜说用itext,于是就写了一个,还是挺容易的,但是没想到遇到一个瓶颈,当页面上存在iframe的时候,生成的图片,iframe所在区域竟然是灰的,也就是说根本就没有截取到,这让我十分的诧异,去网上找寻答案没有,又找api也没有,真是头疼啊,有没有人又解决方法。

5
0
发表了问答
2015/11/14 19:48

html2canvas在ie9下不好使

用html2canvas对网页截图,在ie9下进方法又跳出,功能没实现,也没有报错。谷歌、火狐没问题,网上说这个方法是支持ie9的,不知道为什么,求大神帮忙! html2canvas(document.body, { onrendered: function(canvas) { canvas.id = "mycanvas"; // 生成base64图片数据 var dataUrl = canvas.toDataURL(); } });...

1
0
发表了问答
2015/09/13 09:33

html2canvas如何截图svg

如题,请教如何用html2canvas截图svg,我看到html2canvas插件中有关于svg的类库,不知如何用,急求!

1
0
发表了问答
2013/06/16 17:23

教你怎样在firefox os手机模拟器上写web应用程序

首先你的源文件里面要包含以下文件 .html文件 webapp配置文件 资源图片,icon应用图标 本应用实例是将HTML5画布画图实例2轻松移植到手机上,只需简单的添加webapp配置文件就能轻松的实现网页应用在手机上轻松运行! 源码下载地址

4
3
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
2 评论
57 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部