<!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. 个人项目开发PSP实践-MyWCprj

    MyWCprj.exe Github仓库地址 1. What is MyWCprj.exe? wc是linux下一个非常好用的代码统计小工具,可以通过 -c .-w .-l等选项分别进行对指定文件的代 ...

  2. 洛谷P2219 [HAOI2007]修筑绿化带（单调队列）

    传送门 啧……明明以前做到过这种类型的题结果全忘了…… 这种矩阵的,一般都是先枚举行,然后对列进行一遍单调队列,搞出右下角在每一行中合法位置时的最小权值 再枚举列,对行做一遍单调队列,用之前搞出来的最 ...

  3. 黑客攻防技术宝典web实战篇：查找源代码中的漏洞习题

    猫宁!!! 参考链接:http://www.ituring.com.cn/book/885 随书答案. 1. 列出 3 种可在源代码中找到明确签名的常见漏洞. (a) 跨站点脚本(b) SQL 注入( ...

  4. Mac下怎么运行python3的py文件

    我的Mac现在是10.14.6系统,默认自带的python版本是2.7.(怎么查看版本?打开终端,输入python即可看到版本号) 由于现在需要运行python3写的py文件,需要将自带的python ...

  5. SQL中进行转列的几种方式

    SQL中进行转列 在很多笔试的程序员中会有很多写SQL的情况,其中很多时候会考察行转列.那么这个时候如果能写出来几种行转列的SQL,会给面试官留下比较好的印象. 以下是这次sql转换的表结构以及数据 ...

  6. 让VS2010也支持html5和css3语法验证

    让VS2010也支持html5和css3语法验证 步骤: 首先打开VS2010或者可自行下载均可,我这里是利用VS的扩展器 弹出如下画面,然后选在,联机库,在右上角输入css3,即可看到下面,然后选中 ...

  7. 多线程 线程间通信 wait,notify

    1. 方法wait锁释放,notify()锁不释放

  8. [LuoGu]P2664 树上游戏

    Portal 这题真的好. 看到树上路径, 脑子里就要点分治 这一题对于每个点都要计算一遍, 如果暴算实在不好算, 这样我们就可以考虑算贡献. 直接计算每种颜色的贡献. 因为一条过重心的路径中, 可能 ...

  9. [洛谷P4185] [USACO18JAN]MooTube

    题目链接: 传送门 题意: 给定一颗N个节点的树,定义两点距离为他们之间路径中边权最小值. Q次询问K,V,询问到V距离>=K的点有多少(不含V) 呃呃呃呃考试的时候直奔了T3,结果公式推挂了( ...

  10. Android课程设计第三天帧动画区间动画

    注意:课程设计只为完成任务,不做细节描述~ 点火是帧动画,发射是区间动画,于是 <?xml version="1.0" encoding="utf-8"? ...