js实现纯前端截屏(可以对iframe的内容进行截取)

       1. 最近在碰到一个需求需要,在系统中增加一个可以对系统页面进行自由截图的功能,又不通过后端辅助,开始在网上找资源发现一个叫kscreenshot的插件可以实现截屏(https://github.com/kejiacheng/kscreenshot),这个工具已经集成了添加标注等功能,比较接近qq和微信自带的截图功能,但是坑爹的是这个工具不能在ie下运行,也不能对iframe下的内容进行截取,无法满足需求,次数pass掉,只能另谋它路了。

       2. 继续找资源,发现可以使用cropper.js(https://github.com/fengyuanchen/cropperjs)进行截图,这个插件可以在ie下运行,但是只能对img标签元素进行截取,其他的元素不生效,所以大体思路是在截图的时候将其他元素转为img的图片格式,退出截图后还原为原来的标签格式。根据这个思路所以需要使用html2canvas(https://github.com/niklasvh/html2canvas),因为html2canval中使用promise异步函数,所以想要在ie下运行还需要bluebird.js(http://bluebirdjs.com/docs/api-reference.html),此时需要的工具都已经齐全了,开始写示例。

步骤:

 1. 将iframe的内容转换成canvas返回给父页面

子页面中引入bluebird.js和html2canvas.min.js,然后定义函数getContent接受一个回调函数作为参数,将iframe的内容转成的canvas返回出去

  function getContent(callback){
         html2canvas(document.querySelector(".jimu-main-font"), {//jimu-main-font是iframe的内容的类名
                x:window.pageXOffset, //页面在水平方向的滚动距离
                y:window.pageYOffset,//页面在垂直方向的滚动距离
                foreignObjectRende

  • 1
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
要在前端实现页面截图功能,可以使用 HTML5 的 Canvas 和 JavaScript。以下是一个简单的示例代码: HTML: ```html <!DOCTYPE html> <html> <head> <title>页面截图示例</title> </head> <body> <h1>页面截图示例</h1> <button onclick="captureScreenshot()">截图</button> <canvas id="screenshotCanvas"></canvas> <img id="screenshotImage" alt="页面截图"> <script src="screenshot.js"></script> </body> </html> ``` JavaScript(screenshot.js): ```javascript function captureScreenshot() { // 获取需要截图的元素 const targetElement = document.documentElement; // 创建一个 Canvas 元素 const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); // 设置 Canvas 的宽高与页面一致 canvas.width = targetElement.scrollWidth; canvas.height = targetElement.scrollHeight; // 绘制页面内容到 Canvas context.drawWindow(window, 0, 0, canvas.width, canvas.height, 'rgb(255,255,255)'); // 将 Canvas 转换为图片 const screenshotImage = document.getElementById('screenshotImage'); screenshotImage.src = canvas.toDataURL('image/png'); } ``` 这个示例代码中,我们使用 `captureScreenshot` 函数来实现页面截图功能。首先,我们获取需要截图的元素(在这里是整个页面),然后创建一个 Canvas 元素,并将其宽高设置为页面的宽高。接下来,我们使用 `context.drawWindow` 方法将页面内容绘制到 Canvas 上。最后,我们将 Canvas 转换为图片,并将其显示在一个 `<img>` 元素中。 请注意,由于涉及到跨域问题,如果你要截图的页面存在跨域资源,可能无法正常截图。另外,由于涉及到页面渲染的操作,可能会有性能方面的考虑。如果需要更复杂的功能,你可能需要考虑使用第三方库或服务来实现
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值