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

可以使用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. [CIDR]calculate CIDR network capacity / 计算CIDR子网的网络容量

    题目: 答案: 过程: 以B为例,192.168.9.140/27 /27 掩码是 8 8 8 111 00000 192.168.9.140是这个网段里的一个地址 140是 10001100 所以这 ...

  2. [BJOI2017]树的难题

    题目描述 给你一棵 n 个点的无根树. 树上的每条边具有颜色.一共有 m 种颜色,编号为 1 到 m.第 i 种颜色的权值为 ci. 对于一条树上的简单路径,路径上经过的所有边按顺序组成一个颜色序列, ...

  3. MATLAB模型预测控制（MPC,Model Predictive Control）

    模型预测控制是一种基于模型的闭环优化控制策略. 预测控制算法的三要素:内部(预测)模型.参考轨迹.控制算法.现在一般则更清楚地表述为内部(预测)模型.滚动优化.反馈控制. 大量的预测控制权威性文献都无 ...

  4. hyper发送表单数据

    前言 某个美丽的下午,运维把服务器上的nginx升级了,http协议也变成了http2.0,我本地的requests再也连接不到服务器,然后就找到了额hyper 但是hyper的文档写的很简单,而且相 ...

  5. 年月日时分秒毫秒+随机数getSerialNum

    package com.creditharmony.apporveadapter.core.utils; import java.io.ByteArrayInputStream; import jav ...

  6. Tomcat系列(5)——Tomcat配置详细部分

    Tomcat的架构图 Tomcat的组织结构 Tomcat是一个基于组件的服务器,它的构成组件都是可配置的,其中最外层的是Catalina servlet容器,其他组件按照一定的格式要求配置在这个顶层 ...

  7. python之路（12）网络编程

    前言 基于网络通信(AF_INET)的socket(套接字)实现了TCP/UDP协议 目录 基于TCP协议的socket 基于UDP协议的socket TCP协议下粘包现象及处理 使用socketse ...

  8. 开源顶级持久层框架——mybatis（ibatis）——day02

    mybatis第二天    高级映射 查询缓存 和spring整合          课程复习:         mybatis是什么?         mybatis是一个持久层框架,mybatis ...

  9. Java compiler 并行编译思考

    一.问题 最近基于JSR269做的代码插桩有一个编译问题需要定位,而且问题不是每次都能复现,需要多编译几次才行,出问题的项目是Maven构建的,相对较大,每次构建耗时就比较长.所以我就想,是否有什么配 ...

  10. java笔试要点（java.sql包）

    提供JAVA存取数据库能力的包是 ( ) A: java.sql B: java.awt C: java.lang D: java.swing 解析: A,java.sql包提供Java存取数据库能力 ...