<!DOCTYPE html>
<html>
<head>
<title>保存为images</title>
<meta charset="utf-8" >
</head>
<body class="Body">
<div class="AllWrap relative">

    <button title="保存为图片" style="position: absolute;top:30px;left:100px;" onclick="saveCanvas()">保 存</button>
    <a href="" download="下载图.png" id="download"></a>

</div>

</body>
<script src="/common/js/util/jquery-1.9.1.min.js"></script>

<script src="https://blog-static.cnblogs.com/files/xieyongbin/html2canvas.min.js"></script>
<script>
    function saveCanvas() {
        html2canvas($(".Body")).then(function(canvas) {
            var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
            $("#download").attr("href",imgUri);
            console.log(imgUri);
            document.getElementById("download").click();
        });
    }
</script>
</html>

js 将页面保存为图片的更多相关文章

  1. 毕业论文—使用js将canvas保存为图片文件，并且自定义文件名

    该文章引用http://blog.csdn.net/qq547276542/article/details/51906741 1.从canvas中直接提取图片元数据 // 图片导出为 png 格式 v ...

  2. 使用js给页面显示的图片添加水印效果

    功能描述:使用Jquery 给页面的图片添加 版权信息水印. 这里的水印并不是真的把每一张图片上都添加了水印.而是在图片的上方添加了一个层,层中包含了水印图片效果就像是图片上加了水印. 功能原理:1, ...

  3. js将canvas保存成图片并下载

    <canvas id="canvas" width="400" height="400"></canvas> < ...

  4. 基于html2canvas实现网页保存为图片及图片清晰度优化

    一.实现HTML页面保存为图片 1.1 已知可行方案 现有已知能够实现网页保存为图片的方案包括: 方案1:将DOM改写为canvas,然后利用canvas的toDataURL方法实现将DOM输出为包含 ...

  5. 火狐浏览器FireFox 如何将整个网页保存为图片

    使用Friefox的Pearl Cresent Page Saver插件 如图所示网页有很长的滚动条 点击右下角的该插件选项,将整个页面保存为图片 在桌面上得到了这样一个文件,大小是1263×6083 ...

  6. H5 中html 页面存为图片并长按 保存

    最近接到的一个新需求:页面一个静态H5,中间有一页是输入信息,然后跳转到最后一页,自动将页面生成图片,用户可以长按图片保存到手机上. 展示一下最后一页的样子: 刚拿到这个需求,在网上看了很多文章,最普 ...

  7. 向下滚动页面加载图片的js

    js代码 scroll.photo.js : window.imgscroll = { options: { target: null, //插入图片的目标位置 img_list: null, //图 ...

  8. 手把手教小白如何用css+js实现页面中图片放大展示效果

    1.前言      很多童鞋会在项目中遇到一些上传图片,展示图片的操作,但是图片呢有大有小,为了页面的美观,有时候我们需要将图片展示成固定宽高度,但是呢,领导就会说,我想看大图片,怎么办?想看就看呀, ...

  9. JS截取页面，并保存到本地

    想截取浏览器上内容,并做成图片保存到本地. 可以使用html2canvas.js进行操作. <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. E20170425-gg

    margin  n(网页设置,CSS) 外铺,(金融,外汇交易)保证金 property n(计算机)类的属性变量 , 资产

  2. POJ2533/hdoj1950【DP】

    O(nlog(n))的方法: 定义d[k]:长度为k的上升子序列的最末元素,若有多个长度为k的上升子序列,则记录最小的那个最末元素. d中元素也是单调递增的. #include <iostrea ...

  3. weui button的使用

    1.迷你按钮的使用 <a href="javascript:;" class="weui-btn weui-btn_primary weui-btn_mini&qu ...

  4. Event Handling Guide for iOS--事件驱动指南

    事件是发送给应用程序来通知它用户动作的对象.在iOS中,事件可以有多种形式:多触摸事件,motion(,移动,手 势)事件---例如,设备的加速计(accelerometer)--和控制多媒体的事件. ...

  5. 《算法竞赛进阶指南》1.6Trie

    142. 前缀统计 给定N个字符串S1,S2-SN,接下来进行M次询问,每次询问给定一个字符串T,求S1-SN中有多少个字符串是T的前缀. 输入字符串的总长度不超过106,仅包含小写字母. 输入格式 ...

  6. asp,php,jsp 不缓存网页的办法

    ASP实例源码浏览次数:4 一般地,我们要查看Internet 网上的一个网页,那么 当您第一次访问这个网页的时候, 系统首先要将这个网页下载到您的本地计算机 的一个临时文件夹中进行缓存, 当在一定的 ...

  7. scikit-learning API

    API参考 这是scikit学习的类和函数参考.有关详细信息,请参阅完整的用户指南,因为类和功能原始规格可能不足以给出其使用的完整指导. sklearn.base:基类和效用函数 所有估计器的基类. ...

  8. JSP与Servlet的编解码

    一.java web中涉及编解码的地方 (1)浏览器端向后台发起请求时:URL.Cookie.Parameter: (2)后台响应返回数据时:页面编码,数据库数据编码:

  9. [转]VC中调用外部exe程序方式

    本文转自:http://blog.sina.com.cn/s/blog_486285690100ljwu.html 目前知道三种方式:WinExec,ShellExecute ,CreateProce ...

  10. 23中java设计模式(1)-- 策略模式

    近来不太忙,就打算抽空看下源码补充一下知识,当我看了之后我发现看源码的关键是要弄清楚类之家的关系以及为何要这样的关系,否则如果只看具体的代码那不如去学习会儿算法. 于是就打算从设计模式入手,边学习边记 ...