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

可以使用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. 常规 nginx 代理apache

    nginx: server { server_name www.xx.com xx.com; access_log /data/wwwlogs/www.xx.com_nginx.log combine ...

  2. $.ajax居然触发popstate事件?

    我使用$.ajax用来实现一个搜索效果 近段时间因为苹果上微信浏览器的不知明原因需要处理返回事件,因此加多了popstate事件监听用来分别处理苹果跟安卓的返回. 可是居然影响到了我前面的ajax搜索 ...

  3. Docker 入门篇

    Docker 简介 作为一种新兴的虚拟化方式,Docker 跟传统的虚拟化方式相比具有众多的优势. 更高效的利用系统资源 更快速的启动时间 一致的运行环境 持续交付和部署 更轻松的迁移 更轻松的维护和 ...

  4. EnableEurekaServer基本配置

    pom.xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  5. 从Docker 到Jenkins 到Ansible的部署经验

    从Docker 到Jenkins 到Ansible的部署经验 工作中,除了开发功能,还负责系统的部署工作.我从频繁的部署工作中,逐渐找到了一些偷懒的方法.从传统的Java -jar命令启动服务,到通过 ...

  6. Kettle日志中BootFeaturesInstaller错误

    到新公司接手了别人的Kettle ETL作业. 发现每次启动 Kettle ,日志中都会出现下面的错误,虽然不影响运行结果,但是看着不爽: 18:41:15,327 INFO [KarafInstan ...

  7. node服务端口被占用Error listen EADDRINUSE :::3000

    Error: listen EADDRINUSE: address already in use :::3000,出现这个报错说明3000端口被占用 解决方法:找到占用该端口的程序,kill杀掉它就可 ...

  8. LINUX 常用命令（二）

    B0.用户相关配置文件 用户信息文件:        /etc/passwd密码文件:               /etc/shadow用户组文件:           /etc/group用户组密 ...

  9. Linux 文本去重 之 命令sort 与 uniq

    sort [-fbMnrtuk] [file or stdin] 选项与参数: -f :忽略大小写的差异,例如 A 与 a 视为编码相同: -b :忽略最前面的空格符部分: -M :以月份的名字来排序 ...

  10. 常见JS写法

    1.在DIV中找某个CLASS $('.doc_input', 'div')