想截取浏览器上内容,并做成图片保存到本地。

可以使用html2canvas.js进行操作。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="~/Jquery/jquery-1.10.2.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
</head>
<body>
@*原始图片*@
<div class="my-div">
<img style="width: 400px; height: 300px" src="~/Img/longmao.jpg" />
</div>
<br />
<input type="button" onclick="set()" value="截图" /> @*截取后存放图片的位置*@
<img id="img" /> <script>
function set() {
//要转换为图片的dom对象
var element = document.querySelector('.my-div');
//要显示图片的img标签
var image = document.querySelector('#img');
//调用html2image方法
html2image(element, image); function html2image(element, image) {
html2canvas(element).then(function (canvas) {
var imageData = canvas.toDataURL(1);
//此时图片已经可以显示了
image.src = imageData;
});
}
}
</script>
</body>
</html>

把数据传入后台,将图片保存到本地。传输后台的数据是Base64的数据,需要转换

        public string Set(string imgdata)
{
try
{
var strbase64 = imgdata;
string dummyData = strbase64.Trim().Replace("data:image/png;base64,", "").Replace("%", "").Replace(",", "").Replace(" ", "+");
if (dummyData.Length % 4 > 0)
{
dummyData = dummyData.PadRight(dummyData.Length + 4 - dummyData.Length % 4, '=');
}
byte[] arr = Convert.FromBase64String(dummyData); MemoryStream ms = new MemoryStream(arr);
Bitmap bmp = new Bitmap(ms);
var imagePath = AppDomain.CurrentDomain.BaseDirectory + "123.png";
bmp.Save(imagePath, System.Drawing.Imaging.ImageFormat.Png); ms.Close();
}
catch (Exception ex)
{
Console.WriteLine(ex);
return TAjaxCallBack.ERROR;
}
}

JS截取页面,并保存到本地的更多相关文章

  1. 如何优雅的爬取 gzip 格式的页面并保存在本地(java实现)

    1. 引言 在爬取汽车销量数据时需要爬取 html 保存在本地后再做分析,由于一些页面的 gzip 编码格式, 获取后要先解压缩,否则看到的是一片乱码.在网络上仔细搜索了下,终于在这里找到了一个优雅的 ...

  2. JS 将canvas画布保存到本地

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...

  3. node.js抓取网上图片保存到本地

    用到两个模块,http和fs var http = require("http");var fs = require("fs"); var server = h ...

  4. JS去空格、截取页面url

    1.  去掉字符串前后所有空格: 代码如下: function Trim(str) { return str.replace(/(^\s*)|(\s*$)/g, ""); } 说明 ...

  5. Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地

    由于客户的需求,将js写出来的一个统计能够保存到本地.作为码奴的我只能慢慢搬砖咯!一开始使用的是html2canvas.js.功能是可以实现,但是有缺陷.话不多说开始搞! 1.引入几个JS库 ①:jq ...

  6. js截图及绕过服务器图片保存至本地(html2canvas)

    今天要分享的是用html2canvas根据自己的需求生成截图,并且修复html2canvas截图模糊,以及绕过服务器图片保存至本地. 只需要短短的几行代码,就能根据所需的dom截图,是不是很方便,但是 ...

  7. 下载远程(第三方服务器)文件、图片,保存到本地(服务器)的方法、保存抓取远程文件、图片 将图片的二进制字节字符串在HTML页面以图片形式输出 asp.net 文件 操作方法

    下载远程(第三方服务器)文件.图片,保存到本地(服务器)的方法.保存抓取远程文件.图片   将一台服务器的文件.图片,保存(下载)到另外一台服务器进行保存的方法: 1 #region 图片下载 2 3 ...

  8. 使用Js将页面打印或保存为Pdf

    很久没有写前端的文章了,今天就来说说js一个比较方便的功能,打印当前页面或保存成pdf吧. js有一个原生的函数,print(),顾名思义就是打印.但是有时候我们需要打印页面某些部分,所以需要对页面进 ...

  9. F12修改html进行本地js操作页面元素

    F12修改html进行本地js操作页面元素

随机推荐

  1. vim常用快捷键整理

    搜索快捷键 /  关键字n 向下匹配N 向上匹配 移动光标快捷键 gg 命令将光标移动到文档开头,等同于 1GG 命令将光标移动到文档末尾0 或功能键[Home] 这是数字『 0 』:移动到这一行的最 ...

  2. jatoolsprinter html实现每隔几秒获取数据直接后台打印不弹窗

    1.流程说明 jatoolspringter 必须要能在html代码里面看到  id =page1 page2 page3..... 才能打印,所以无法动态打印,必须先把要打印的内容放到页面某个地方隐 ...

  3. 【JVM】JVM随笔索引

    JVM目录 [JVM]Java内存模型 [JVM]类加载机制 [JVM]深度分析Java的ClassLoader机制(源码级别) [JVM]关于类加载器准备阶段的一道面试题目 [JVM]JVM垃圾收集 ...

  4. cookie session token

    HTTP    HTTP是无状态(stateless)的网络协议.HTTP协议自身不对请求和响应之间的通信状态进行保存.也就是说HTTP协议对于发送过的请求或响应都不做持久化处理. 为了实现保持状态功 ...

  5. (N叉树 递归) leetcode 590. N-ary Tree Postorder Traversal

    Given an n-ary tree, return the postorder traversal of its nodes' values. For example, given a 3-ary ...

  6. freetypeLCD显示

    目录 freetypeLCD显示 安装交叉编译环境 配置 头文件和库的位置 编译安装 复制到PC编译工具链 复制到文件系统 运行测试 LCD显示 编码转换问题 简单显示 角度旋转 换行显示 居中显示 ...

  7. OAuth2

    OAuth2: 适合To C的应用场景, 比如我们开发一个app, 可以借用微信/微博用户认证开放接口, 达到免注册登陆, 企业内部系统没有必要引入. OAuth2的步骤较多, 角色也较多, 涉及到a ...

  8. docker部署archery

    一.centos7部署docker 1 通过 uname -r 命令查看你当前的内核版本 uname -r 2  确保 yum 包更新到最新. yum update 3 卸载旧版本 yum remov ...

  9. react图工具集成

    背景 调查了react下的图工具库, 并继承到项目中, 经过调研列出如下两个图工具库,可以同时使用. data-ui react-c3js 在一个工具中没有所需的图时候, 可以使用另一个替代. dat ...

  10. VMware 虚拟机 linux执行 ifconfig 命令 eth0没有IP地址(intet addr、Bcast、Mask) UP BROADCAST MULTICAST 问题

    VMware 虚拟机 linux执行 ifconfig 命令 eth0没有IP地址(intet addr.Bcast.Mask) UP BROADCAST MULTICAST 问题 eth0:网络接口 ...