<!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. E20180410-hm

    preface  n. 序言,引语; 开端,前奏; [宗] (弥撒的) 序诵,序祷;        vi. 作序; 作为…的序言,作为…的开端; 给…作序; 开始,导致; continue vi. 持 ...

  2. Codeforces 1000 (A~E)

    A Codehorses T-shirts 相同长度之间互相转化即可 #include<iostream> #include<cstdio> #include<cstri ...

  3. 【UVA - 540】Team Queue （map,队列）

    Team Queue Descriptions: Queues and Priority Queues are data structures which are known to most comp ...

  4. luogu P1095守望者的逃离【dp】By cellur925

    题目传送门 考虑dp,设f[i]表示到第i时间,能到达的最远距离.因为题目涉及了三种操作:1,补血消耗魔法值:2, 等待增加魔法值:3,直接向前走.而1,3和2,3的操作是可以同时进行没有冲突的,所以 ...

  5. 关于协程：nodejs和golang协程的不同

    nodejs和golang都是支持协程的,从表现上来看,nodejs对于协程的支持在于async/await,golang对协程的支持在于goroutine.关于协程的话题,简单来说,可以看作是非抢占 ...

  6. pwa-serviceWorker与页面通信postMessage

    https://ppt.geekbang.org/list/gmtc2018?from=groupmessage&amp%3Bisappinstalled=0 http://www.sohu. ...

  7. java 替换字符串模板(模板渲染)

    java渲染字符串模板,也就是说在java字符串模板中设置变量字符串,使用变量去渲染指定模板中设置好的变量字符串.下面介绍4种替换模板方式: 1.使用内置String.format String me ...

  8. #219. 【NOI2016】优秀的拆分

      如果一个字符串可以被拆分为 AABBAABB 的形式,其中 AA 和 BB 是任意非空字符串,则我们称该字符串的这种拆分是优秀的. 例如,对于字符串 aabaabaa,如果令 A=aabA=aab ...

  9. 分层开发之C#分层

    假如没有用分层开发,仔细分析三人的开发过程,很容易发现其中的问题: >三人排队式的轮番工作,花费的时间是三人工作时间之和. >后面开发的人基本都是要先花费时间熟悉前面人的代码,否则开发难以 ...

  10. Android提供的对话框

    1.普通对话框: 给出提示信息,有yes.no两个按钮. AlertDialog dialog=new AlertDialog.Builder(this) //this代表当前Activity对象,表 ...