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

可以使用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. Linux下批量管理工具pssh安装和使用

    Linux下批量管理工具pssh安装和使用 pssh工具包 安装:yum -y install pssh pssh:在多个主机上并行地运行命令 pscp:把文件并行地复制到多个主机上 prsync:通 ...

  2. 一本通 一笔画问题 洛谷P1636 Einstein学画画

    P1636 Einstein学画画 相信大家都玩过一笔画这种游戏吧,这其实算得上是我们能够接触到的比较常见的数学问题,有一个很知名的就是七桥问题 这个问题包括所有的一笔画问题都是在欧拉回路的涵盖范围内 ...

  3. （转）Java并发包基石-AQS详解

    背景:之前在研究多线程的时候,模模糊糊知道AQS这个东西,但是对于其内部是如何实现,以及具体应用不是很理解,还自认为多线程已经学习的很到位了,贻笑大方. Java并发包基石-AQS详解Java并发包( ...

  4. jsp:include动作功能

    jsp:plugin动作:连接客户端的Applet或Bean插件 jsp:useBean动作:应用javaBean组件 jsp:setProperty动作:设置javaBean属性 jsp:getPr ...

  5. python11 函数的定义，调用，分类

    ## 复习 #一.什么是函数:具体特定功能的代码块 - 特定功能代码块作为一个整体,并给该整体命名,就是函数 # 二.函数的优点:# 1.减少代码的冗余# 2.结构清晰,可读性强# 3.具有复用性,开 ...

  6. keepalived 安装及配置

    简介 Keepalived是一个基于VRRP协议来实现的服务高可用方案,可以利用其来避免IP单点故障,类似的工具还有heartbeat.corosync.pacemaker. 但是它一般不会单独出现, ...

  7. Elasticsearch 快速开始

    Elasticsearch 是一个分布式的 RESTful 风格的搜索和数据分析引擎. 查询 : Elasticsearch 允许执行和合并多种类型的搜索 - 结构化.非结构化.地理位置.度量指标 - ...

  8. JavaScript数据类型 正则表达式RegExp类型

    前言 上一篇文章已经介绍了正则表达式的基础语法.javascript的RegExp类表示正则表达式,String和RegExp都定义了方法,使用正则表达式可以进行强大的模式匹配和文本检索与替换.本文将 ...

  9. LabView ModBus安装

    好久没写东西了(好菜哦...) 最近搞一个项目,开始入门LabVIEW,感觉类似于MATLAB里面的simulink 我使用LabVIEW是想用来和PLC通信的.因为PLC里面可以做ModBus,所以 ...

  10. Eclipse——在eclipse上安装Pydev插件实现python编程

    介绍:2003年7月16日,以 Fabio Zadrozny 为首的三人开发小组在全球最大的开放源代码软件开发平台和仓库 SourceForge 上注册了一款新的项目,该项目实现了一个功能强大的 Ec ...