html2canvas.js 这个js有个强大的功能,就是能将html 对应的dom生成canvas。

这样,我们就可以通过生成的canvas转化成 base64 图片,从而实现截屏功能;

核心代码如下(同时也解决了一个bug,生成的图片不高清):

//以下乘以3是将画布和画布的内容放大3被,从而使生成的图片变清晰
var canvas = document.createElement("canvas");
canvas.height = $(window).height()*3
canvas.width = $(window).width()*3
var context = canvas.getContext("2d");
//然后将画布缩放,将图像放大两倍画到画布上
context.scale(3,3);
html2canvas(document.getElementById('view'), {
canvas: canvas,
onrendered: function(canvas) {
var _h = $(window).height()*2/3;
var _w = $(window).width()*2/3; _src = canvas.toDataURL('image/png');
var img = new Image();
img.src = _src;
img.onload = function(){
var $wrap = $('#showSreenShot .wrap');
$wrap.height(_h)
$wrap.width(_w)
$wrap.css({
marginTop: -_h*2/3,
marginLeft: -_w/2
})
$('#showSreenShot .wrap').prepend($(img));
$('#showSreenShot').fadeIn(200);
}
}

html2canvas.js 下载地址 https://github.com/niklasvh/html2canvas/tree/master/dist

js 截屏保存图片的更多相关文章

  1. 搭建前端监控系统(六)JS截屏和录屏篇

    怎样定位前端线上问题,一直以来,都是很头疼的问题,因为它发生于用户的一系列操作之后.错误的原因可能源于机型,网络环境,接口请求,复杂的操作行为等等,在我们想要去解决的时候很难复现出来,自然也就无法解决 ...

  2. html2canvaces用法,js截屏并且下载

    1.首先自己下载引入html2canvaces和jquery(我的demo路径是自己本地的) 2.点击截屏按钮后,跳出层的其他部分是取消保存,点击截取获得的图片区域,表示保存 <!DOCTYPE ...

  3. js截屏

    <html><head> <meta name="layout" content="main"> <meta http ...

  4. vue中使用html2canvas及解决html2canvas截屏图片模糊问题

    最近在项目中用到了html2canvas插件,遇到的一些坑写下来,与大家共勉. html2canvas  官方网站http://html2canvas.hertzen.com/index.html 这 ...

  5. 使用 JavaScript 截屏

    经常在微博上看到很多内容使用的什么长微博截图,并且截图上还附加了很多其他的信息.之前对纯前端截图有些研究,正好本博客有这个需求,今天就把这东西实现了下. 需要声明的是,JavaScript 目前还不能 ...

  6. JS实现网页选取截屏 保存+打印 功能(转)

    源码地址: 1.1 确定截图选取范围 用户在开始截图后,需要在页面上选取一个截图范围,并且可以直观的看到,类似如下效果: image 我们的选取范围就是鼠标开始按下的那个点到鼠标拖动然后松开的那个点之 ...

  7. js 利用canvas + flv.js实现视频流 截屏 、本地下载功能实现,兼容火狐,谷歌;canvas截屏跨域问题,无音频视频流加载不显示问题

    项目:物联网监控项目----后台视频流管理(前端实现视频截屏功能) 本文就不同视频源分情况展示: 1 本地视频(项目同目录视频)截屏(canvas.getContext("2d).drawI ...

  8. php结合phantomjs实现网页截屏、抓取js渲染的页面

    首先PhantomJS快速入门 PhantomJS是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, ...

  9. js利用clipboardData在网页中实现截屏粘贴的功能

    目前仅有高版本的 Chrome 浏览器支持这样直接粘贴,其他浏览器目前为止还无法粘贴,不过火狐和ie11浏览器在可编辑的div中能够粘贴截图的图片也是base64位和Chrome利用clipboard ...

随机推荐

  1. 你真的了解 Cookie 和 Session 吗

    我在做面试官的时候,曾经问过很多朋友这个问题: Cookie 和 Session 有什么区别呢?大部分的面试者应该都可以说上一两句,比如:什么是 Cookie?什么是 Session?两者的区别等. ...

  2. Windows环境下main()函数传入参数

    最近几天在写一个模仿windows自带的ping程序,也从网上找过一些源码,但大都需要向主函数main中传入参数,这里简单总结一下向主函数中传参的方法. 方法一:项目->属性->调试-&g ...

  3. lr录制选项设置代理

    解决录制时浏览器打不开录制时录不到脚本等浏览器兼容问题一.lr录制选项设置代理1.点击Options 2.点击Port Mapping→Newentrv 3.lr代理设置 ·Socket Servic ...

  4. 洛谷 P3811 题解

    题面 利用暴力快速幂O(nlogn)会TLE掉: 所以对于求1~n的所有逆元要用递推公式: #include <bits/stdc++.h> using namespace std; ]; ...

  5. Ubuntu18.04服务器使用netplan网络构建桥接kvm虚拟机

    参考链接 Ubuntu 18.04 LTS安装KVM虚拟机 如何在 Ubuntu 18.04 服务器上安装和配置 KVM KVM日常管理和克隆 KVM详解 1.准备工作 首先需要检查一下CPU是否支持 ...

  6. 【iOS】The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods install

    从 github 下载的项目经常会遇到这个问题, 如图所示: 参考: iOS 'The sandbox is not sync with the Podfile.lock'问题解决 尚未解决…………

  7. Could not load NIB in bundle: 'NSBundle.....

    学习NSNotification时遇到了这个问题,错误日志如下: 2015-08-28 17:47:24.617 NSNotificationDemo[7158:786614] *** Termina ...

  8. Hexo结合github制作博客

    https://blog.csdn.net/Hoshea_chx/article/details/78826689 hexo(themes) vuePress jekylly

  9. Placement_pools on Rados-GW

    The purpose of this test is to map a RadosGw Bucket to a specific Ceph pool. For exemple, if using a ...

  10. containerd与kubernetes集成

    kubernetes集群三步安装 概念介绍 cri (Container runtime interface) cri is a containerd plugin implementation of ...