html2canvas 插件实现网页截图(html保存为图片)
1、html2canvas 官网: http://html2canvas.hertzen.com/
html2canvas 是一款利用javascript进行屏幕截图的插件。可以使用两种语法格式进行截图:
通过在 html2canvas(需要截图的元素).then(function(){}) 的方式向body中 append canvas 图形。
html2canvas(document.getElementById('id')) .then(function(canvas) {document.body.appendChild(canvas);});
- 通过 html2canvas(元素,{属性:属性值}) 的方式。
html2canvas(document.getElementById("target"), {allowTaint: true, //允许污染taintTest: true, //在渲染前测试图片(没整明白有啥用)useCORS: true, //使用跨域(当allowTaint为true时这段代码没什么用)background: "#fff",onrendered: function (canvas) {imgBlob = canvas.toDataURL('image/jpeg', 1.0); //将图片转为base64, 0-1 表示清晰度imgBlob = imgBlob.toString().substring(imgBlob.indexOf(",") + 1);//截取base64以便上传} });
接下来看一个例子。
2.代码部分:
(1)css
#demo{background-color: #fff;
}
.red{background-color: red;width: 50px;height: 50px;
}
(2)html
<div class="demo-container"><div id="demo"><div class="red"></div><p>如果原来使用百分比设置元素宽高,请更改为px为单位的宽高,避免样式二次计算导致的模糊</p><p>如果原来使用百分比设置元素宽高,请更改为px为单位的宽高,避免样式二次计算导致的模糊</p><p>如果原来使用百分比设置元素宽高,请更改为px为单位的宽高,避免样式二次计算导致的模糊</p><p>如果原来使用百分比设置元素宽高,请更改为px为单位的宽高,避免样式二次计算导致的模糊</p><p>如果原来使用百分比设置元素宽高,请更改为px为单位的宽高,避免样式二次计算导致的模糊</p></div>
</div>
<button id="saveImg">截图</button>
(3)js
<script src="js/common/jquery-2.1.4.js"></script>
<script src="./html2canvas.min.js"></script>
<script src="./canvas2image.js"></script>
<script type="text/javascript">$("#saveImg").on("click", function() {var getPixelRatio = function(context) { // 获取设备的PixelRatiovar backingStore = context.backingStorePixelRatio ||context.webkitBackingStorePixelRatio ||context.mozBackingStorePixelRatio ||context.msBackingStorePixelRatio ||context.oBackingStorePixelRatio ||context.backingStorePixelRatio || 1;return (window.devicePixelRatio || 1) / backingStore;};var shareContent = $("#demo")[0]; var width = shareContent.offsetWidth; var height = shareContent.offsetHeight; var canvas = document.createElement("canvas"); var context = canvas.getContext('2d'); var scale = getPixelRatio(context); //将canvas的容器扩大PixelRatio倍,再将画布缩放,将图像放大PixelRatio倍。canvas.width = width * scale; canvas.height = height * scale;canvas.style.width = width + 'px';canvas.style.height = height + 'px';context.scale(scale, scale);var opts = {scale: scale, canvas: canvas,width: width, height: height,dpi: window.devicePixelRatio};html2canvas(shareContent, opts).then(function (canvas) {context.mozImageSmoothingEnabled = false;context.webkitImageSmoothingEnabled = false;context.msImageSmoothingEnabled = false;context.imageSmoothingEnabled = false;var dataUrl = canvas.toDataURL('image/jpeg', 1.0);var newImg = document.createElement("img");newImg.src = dataUrl;newImg.width = width;newImg.height= height;$("body")[0].appendChild(newImg);});})
</script>
上述代码中,通过设置canvas的容器为设备 的PixelRatio倍,再将canvas画布缩放,来尽量保证截图的清晰度。
3.demo效果:
(1)静态html
(2)点击截图按钮后,下方蓝色框框内即为截图效果:
4.参考文章:
- html2canvas踩坑记
- 基于html2canvas实现网页保存为图片及图片清晰度优化
html2canvas 插件实现网页截图(html保存为图片)相关推荐
- html网页截图功能支持svg图片保存
根据自己的需求选取对应代码片段,可以节省50%的时间. 现在用到最多的页面截取插件就是html2canvas.将页面转化为canvas进行保存 但是为了兼容支持svg页面的截图,会先将svg页面转化成 ...
- 图片涂鸦html插件,JS 网页截图、涂鸦
最近因为产品需要,用js写了一个能网页截图并涂鸦的js库(类似QQ 截图工具).这个库与html2canvas 等类似的库有巨大的差异:html2canvas 只能做到截取"网页" ...
- 用原生js和html5进行网页截图,使用JS实现网页截图并保存
需求 今天接到一个新需求,需要在手机上实现对某张定位实现的自定义图片来生成一个邀请函,然后分享. 这个邀请函是必须是一张图片,由于后端图形拼接太麻烦,于是这个锅就到了前端.而且项目要求比较急,没有时间 ...
- 使用html2canvas完成页面截屏并保存为图片
实现网页页面截屏,并且将其转换为指定图片格式保存下来,需要使用到html2canvas.js. 前面是实现原理和步骤分析,具体实现代码在文章尾部. 一.实现HTML页面截屏并保存为图片 原理是遍历需要 ...
- python网页保存为图片_使用Python保存网页上的图片或者保存页面为截图
Python保存网页图片这个是个比较简单的例子,网页中的图片地址都是使用'http://.....jpg'这种方式直接定义的. 使用前,可以先建立好一个文件夹用于保存图片,本例子中使用的文件夹是 d: ...
- python将网页保存为图片_使用Python保存网页上的图片或者保存页面为截图
# -*- coding: UTF-8 -*- import os,re,urllib,uuid #首先定义云端的网页,以及本地保存的文件夹地址 urlPath='http://gamebar.com ...
- Excel重设格式并自动截图保存为图片
使用Pandas模块生成的数据,在导出保存为Excel 时,是一种默认的格式,常常遇到列宽无法完整显示单元格中的文本.文字大小.行距不是预期的,无边框.无行背景色等问题,必须手动重设格式. 而且,现在 ...
- html2canvas 截图div_浏览器端网页截图方案详解
简介 剖析流行的截图插件 html2canvas 的实现方案,探索其功能上的一些不足之处及不能正确截取的一些场景,比如不支持 CSS 的 box-shadow 截取情况等.探索一种新的实现方式,能够避 ...
- html2canvas保存网页到手机,利用html2canvas将当前网页保存为图片.
先分析下这个技术可实现的方式,以及优缺点吧! 前端实现 缺点是:兼容性查,需要高级浏览器支持,因为需要支持 canvas 绘图,还有就是会操作 html5 canvas api.(如果不会使用canv ...
最新文章
- poj 1637 Sightseeing tour
- HDU 4609 3-idiots
- MySQL中如何约束和排序数据
- Infinite Fraction Path UVALive - 8207
- jvm(10)-早期(编译期)优化
- Java Float类floatToIntBits()方法与示例
- 复杂性,科学,方法论?
- python爬虫方向的第三方库,Python网络爬虫方向的第三方库是
- 3d建模和计算机专业对口吗,学3d建模有学历门槛吗
- STC12C5A60S2 双串口
- layim之刷新群聊列表
- 汽车租赁小项目(java)
- 微信公众号——创建标签,给粉丝打标签。
- FFmpeg循环推流
- JAVA并发编程的艺术-读书笔记
- Linux下内核进程、用户进程和轻量级进程(LWP)的理解
- 计算机科学在本质,人类大脑的本质竟然是计算机?
- 计算机突然断电后 硬盘中的数据,电脑突然断电对硬盘有影响吗?实测便知
- 用python画一个糖葫芦
- 【金猿产品展】Elens智语——“傻瓜化”实现领域模型定制的自然语言处理平台...