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

可以使用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. 【BZOJ4029】[HEOI2015]定价（贪心）

    [BZOJ4029][HEOI2015]定价(贪心) 题面 BZOJ 洛谷 题解 每次加上十进制下的\(lowbit\)就行了??? #include<iostream> #include ...

  2. Docke--Dockerfile实践

    Dockerfile 实践 nginx镜像构建 先查看下本地的镜像,选取官网的centos作为base image: [root@server ~]# docker images REPOSITORY ...

  3. python实现猜字游戏

    import randomx = random.randint(0,99)while(True): num = input("please input a number\n") i ...

  4. iframe内document事件监听

    //监听iframe子页面,关闭menu $("iframe").on("load", function(event){//判断 iframe是否加载完成 $( ...

  5. Linux VPS通过安装CPULimit来限制CPU使用率

    说明:我们手上经常有很多廉价的VPS,有时候使用某些软件应用的时候,会出现CPU跑满的情况,而长时间跑满会被VPS商家停掉,所以这里我们需要想办法来限制进程CPU使用率,这里就说个教程. 简介 cpu ...

  6. 小白之微信小程序第一次完成搭建本地服务与页面进行交互

    如果忘记了搭建json-server的过程,可看上一篇随笔 1. index.xml  代码 <!--index.wxml--> <swiper indicator-dots=&qu ...

  7. java下载远程文件到本地

    java下载远程文件到本地(转载:http://www.cnblogs.com/qqzy168/archive/2013/02/28/2936698.html)   /**       * 下载远程文 ...

  8. eclipse搭建elastic-job

    1.官网下载eclipse----面向Java EE企业级开发的Eclipse IDE for Java EE Developers:2.官网下载maven,并配置环境变量---MAVEN_HOME: ...

  9. Request method 'POST' not supported解决办法

    (1)考虑拦截器是否将该链接拦截

  10. 2018-2019-2 20165337《网络攻防技术》Exp5 MSF基础应用

    一.实践目标 1.一个主动攻击实践 ms08_067 2.一个针对浏览器的攻击 ms13-069 3.一个针对客户端的攻击 adobe (Adobe_toolbutton客户端漏洞) 4.成功应用任何 ...