js 将页面保存为图片
<!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 将页面保存为图片的更多相关文章
- 毕业论文—使用js将canvas保存为图片文件,并且自定义文件名
该文章引用http://blog.csdn.net/qq547276542/article/details/51906741 1.从canvas中直接提取图片元数据 // 图片导出为 png 格式 v ...
- 使用js给页面显示的图片添加水印效果
功能描述:使用Jquery 给页面的图片添加 版权信息水印. 这里的水印并不是真的把每一张图片上都添加了水印.而是在图片的上方添加了一个层,层中包含了水印图片效果就像是图片上加了水印. 功能原理:1, ...
- js将canvas保存成图片并下载
<canvas id="canvas" width="400" height="400"></canvas> < ...
- 基于html2canvas实现网页保存为图片及图片清晰度优化
一.实现HTML页面保存为图片 1.1 已知可行方案 现有已知能够实现网页保存为图片的方案包括: 方案1:将DOM改写为canvas,然后利用canvas的toDataURL方法实现将DOM输出为包含 ...
- 火狐浏览器FireFox 如何将整个网页保存为图片
使用Friefox的Pearl Cresent Page Saver插件 如图所示网页有很长的滚动条 点击右下角的该插件选项,将整个页面保存为图片 在桌面上得到了这样一个文件,大小是1263×6083 ...
- H5 中html 页面存为图片并长按 保存
最近接到的一个新需求:页面一个静态H5,中间有一页是输入信息,然后跳转到最后一页,自动将页面生成图片,用户可以长按图片保存到手机上. 展示一下最后一页的样子: 刚拿到这个需求,在网上看了很多文章,最普 ...
- 向下滚动页面加载图片的js
js代码 scroll.photo.js : window.imgscroll = { options: { target: null, //插入图片的目标位置 img_list: null, //图 ...
- 手把手教小白如何用css+js实现页面中图片放大展示效果
1.前言 很多童鞋会在项目中遇到一些上传图片,展示图片的操作,但是图片呢有大有小,为了页面的美观,有时候我们需要将图片展示成固定宽高度,但是呢,领导就会说,我想看大图片,怎么办?想看就看呀, ...
- JS截取页面,并保存到本地
想截取浏览器上内容,并做成图片保存到本地. 可以使用html2canvas.js进行操作. <!DOCTYPE html> <html lang="en"> ...
随机推荐
- UVaLive 6585 && Gym 100299F Draughts (暴力+回溯)
题意:给定一个 10*10的矩阵,每一个W可以跳过一个B向对角走到#并把B吃掉,并且可以一直跳直到不能动为止,现在是W走的时候,问你最多吃几个B. 析:直接暴力+回溯,深搜就好. 代码如下: #pra ...
- 分析自己遇到的Excel导出报NullpointException问题
此文已由作者叶富宏授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 昨天一个商务反馈说报价信息导出失败,查看了一下日志发现是导出记录到Excel的时候报了NullpointEx ...
- 51nod 1004 【快速幂】
思路: 掐住最后一位,快速幂一发就好了 #include<cstdio> #include <map> #include<iostream> #include< ...
- bzoj 1187: [HNOI2007]神奇游乐园【插头dp】
要判边界!!要判边界!!要判边界!!if(j!=m)!!! 我真是zz横着转移要判断到底能不能向右边出边-- 然后剩下的和1814差不多,九十因为不要求经过所有格子,所以左右括号随时可以合并,但是注意 ...
- bzoj1725: [Usaco2006 Nov]Corn Fields牧场的安排(状压dfs)
1725: [Usaco2006 Nov]Corn Fields牧场的安排 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 1122 Solved: 80 ...
- iSCSI 原理和基础使用
终于完成最后一篇了,一上午的时间就过去了. 下文主要是对基本操作和我对iSCSI的理解,网上有很多iSCSI原理,在这里我就不写了,请自行学习. 这篇文章仅对iSCSI的很多误解做一次梳理,你必须对所 ...
- SpringBoot整合Spring Data Solr
此文不讲solr相关,只讲整合,内容清单如下 1. maven依赖坐标 2. application.properties配置 3. Java Config配置 1. maven坐标 <depe ...
- zabbix网络发现主机
1 功能介绍 默认情况下,当我在主机上安装agent,然后要在server上手动添加主机并连接到模板,加入一个主机组. 如果有很多主机,并且经常变动,手动操作就很麻烦. 网络发现就是主机上安装了age ...
- CGI和Servlet的比较
转载自:http://www.maxhis.info/java/cgi-vs-servlet/ 概括来说,CGI和Servlet可以完成相同的功能. CGI(Common Gateway Interf ...
- P2676 超级书架
题目描述 Farmer John最近为奶牛们的图书馆添置了一个巨大的书架,尽管它是如此的大,但它还是几乎瞬间就被各种各样的书塞满了.现在,只有书架的顶上还留有一点空间. 所有N(1 <= N & ...