-
2021-06-14 05:12:50
chrome浏览器如何把网页保存为图片【完整版】
问题的提出:最近很多朋友咨询关于Chrome浏览器怎样保百思特网存整个网页为图片的问题,今天小金子分类目录给您分享的这篇文章就来聊一聊这个话题,希望可以帮助到有需要的朋友。
小金子实践更可行,特别推荐的方法(同方法一):
网页完整如何存为图片方法(一)
保存为图片
右键检查
快捷键Ctrl+Shift+P
输入full
选择Capture full size screenshot
即可自动保存整个网页为png图片
保存为PDF
快捷键Ctrl+P——>打印
(目标打印机)更改——>另存为PDF
方法一:
1,打开需要保存为图片的网页
2,然后按F12,接着按Ctrl+Shift+P
3,在红框内输入full
4,点击下面的“Capture full size screenshot”就可以保存整个网页为图片了
方法二:
借助插件实现网页保存为图片功能
1,打开浏览器,打开左上角的应用,点击“chrome网上应用店”。
2,在搜索栏上输入“webpage screenshot”,在搜索出来的应用插件里面选择一个插件。
3,点击“Add to chrome”,点击“添加扩展程序”,添加完毕后地址栏右方会出现网页截图的图标。
4,打开新网页,点击“截图图标”,选择截取整个页面,当前的网页即截取下来,点击“保存”即可保存整个网页。
方法三:
借助打印功能
首先,进行打开一个chro百思特网me浏览器进入到了界面当中,进行点击右上角中的 设置 的按钮。
2,进行点击了设置按钮之后,弹出了下拉菜单选中为 打印 的选项。
3,然后就会弹出了一个为打印窗口,进行点击 保存 pdf文件。
4,pdf的文件保存,会在对应的路径上pdf的文件,并双击打开即可。
5,p百思特网df的文件被打开之后,进行点击工具中的 输出为图片的选项。
6,弹出了一个输出为图片的窗口,因没有会员只能选中为 带wps水印,进行点击确定 即可。
7,可以看到的是在当前的图片的文件输出完成了。
更多相关内容 -
C#实现将网页保存成图片的网页拍照功能
2021-01-20 07:09:14C#实现将网页保存成图片格式,简单实现网页拍照,主要是基于ActiveX 组件的网页快照类,AcitveX 必须实现 IViewObject 接口。因此读者完全可扩展此类将其用于你的C#软件项目中。在此特别感谢作者:随飞提供的代码。 ... -
用php实现的获取网页中的图片并保存到本地的代码
2020-10-29 10:43:45将网页中图片保存本地文件夹 -
Android 实现WebView点击图片查看大图列表及图片保存功能
2021-01-05 11:23:05在日常开发过程中,有时候会遇到需要在app中嵌入网页,此时使用WebView实现效果,但在默认情况下是无法点击图片查看大图的,更无法保存图片。本文将就这一系列问题的实现进行说明。 图示: 项目的知识点: 加载... -
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2020-10-23 05:36:51本篇文章给大家分享PHP源码批量抓取远程网页图片并保存到本地的实现方法,对批量抓取网页图片相关知识感兴趣的朋友一起学习吧 -
js实现html转图片并下载保存
2019-03-13 14:06:25用js通过html2canvas.js和canvas2image.js两个库,实现把页面转换成图片并保存到本地 -
H5 -- (功能)基于html2canvas实现长按网页保存为图片到本地
2018-07-03 14:24:411、需求:长按页面中的一部分(里面有动态获取的用户昵称、头像及动态生成的二维码),弹出下载框,点击后将这部分保存为图片下载到手机里(如图) 2、分析:由于有动态获取数据,需等DOM元素生成之后,再将这一...1、需求:长按页面中的一部分(里面有动态获取的用户昵称、头像及动态生成的二维码),弹出下载框,点击后将这部分保存为图片下载到手机里(如图)
2、分析:由于有动态获取数据,需等DOM元素生成之后,再将这一部分的DOM转化为canvas,再将canvas转为image,然后再实现长按image下载到本地 - - 一路走来,踩了不少坑,希望有此相似需求的能有所收获吧。
3、过程
第一步:数据渲染后,将 html 转化为 canvas
html2canvas.js可将一个元素渲染为canvas,只需要简单的调用html2canvas(element[, options])方法即可,html2canvas方法会返回一个包含有canvas元素的promise。
// 参数:element为要保存元素的DOM对象,option为可配置项 html2canvas(element, option).then(function(canvas) { });
重点1:清晰度问题(最终图片的清晰度取决于html转换成的canvas的清晰度)
<1> 将原来的DOM元素的宽高设置为最终图片的2倍,然后canvas的宽高也要设置最终图片的2倍。(最好为设备的DPR倍)
<2> 设置原来的DOM元素的宽高时必须以px
为单位,避免样式二次计算导致的模糊,切记~
例如:我的最终图片样式// 生成的最终图片 #inviteImg { width: 5.6rem; // rem适配:5.6rem * 50px/rem = 280px height: 6.3rem; // rem适配:6.3rem * 50px/rem = 315px }
则: 我的原来的DOM元素的样式
// 原来DOM盒子 #inviteBox { width: 560px; // 最终图片宽度280px的2倍,以px为单位 height: 630px; // 最终图片高度315px的2倍,以px为单位 position: absolute; z-index: -1; // 离开屏幕 background: transparent url("../assets/img/no.png"); background-size: 560px 630px; }
则:canvas的宽高
let self = this let inviteBox = document.getElementById("inviteBox") let canvas = document.createElement("canvas") canvas.width = 560 // 最终图片宽度280px的2倍,以px为单位 canvas.height = 630 // 最终图片高度315px的2倍,以px为单位 let opts = { canvas: canvas, // 将自定义canvas作为配置项 useCORS: true, // 允许图片跨域 height: self.$refs.main.offsetHeight // 修复截图不完整问题 } html2canvas(inviteBox, opts).then((canvas) => { /* 此处的base64ImgSrc就是得到的img的base64字符串,直接在页面上显示即可 */ let base64ImgSrc = canvas.toDataURL("image/png") })
重点2:截图不全问题(当截图区域高度超出可视区域会截图不完整)
由于官网上提供的dom抓取不支持高度,都是从绝对定位的起点开始截取,会造成只可以截到浏览器可见的,如果截图区域高度超出可视区域会截图不完整可通过修改源码,可以支持完整截图(可以动态设置截图高度)
未修改源码如下:(可通过查找进行修改~)
return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) { if (typeof(options.onrendered) === "function") { log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas") options.onrendered(canvas) return canvas } })
修改后源码如下:
/* 添加自定设置高度宽度 */ var width = options.width != null ? options.width : node.ownerDocument.defaultView.innerWidth var height = options.height != null ? options.height : node.ownerDocument.defaultView.innerHeight return renderDocument(node.ownerDocument, options, width, height, index).then(function (canvas) { if (typeof(options.onrendered) === "function") { log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas") options.onrendered(canvas); } })
修改源代码后重新引入修改后的html2canvas.js(需放到本地了),此时可将你要截取的高度通过配置项传入即可。
/* 将要截取的高度设置为最大盒子的高度并通过配置项传入 */ let self = this let opts = { canvas: canvas, useCORS: true, height: self.$refs.main.offsetHeight // 修复截图不完整问题 }
第二步:将canvas转化为png格式的image
上一步生成的canvas即为包含目标元素的元素对象。实现保存图片的目标只需要将canvas转image即可。
html2canvas(inviteBox, opts).then((canvas) => { let base64ImgSrc = canvas.toDataURL("image/png") /* 如果只是显示,可用以下代码 */ let img = document.createElement("img") img.src = base64ImgSrc document.body.appendChild(img) })
重点:base64格式图片在前端可以显示,但是无法下载到本地,所以要将base64格式的图片转化为网络路径的png格式图片
我项目的解决方法为:将base64编码上传到七牛云然后获取到网络路径的png格式的图片,具体实现方法可参考:如何上传base64编码图片到七牛云
上传base64图片到七牛云存储
第三步:长按image保存到本地
长按事件见:H5–(封装)移动端原生长按事件
下载保存图片:如果在pc端,且不考虑兼容性的话,可以使用htm15的a标签增加了download属性,可利用此属性实现图片下载,具体我就不细说,因为在手机端的webview中不好使。
我项目的解决方法为:与原生客户端交互,调取客户端的下载方法,传入图片的网络途径,客户端协助进行下载并存入相册
。(ps:下载图片在webview中用h5真的实现不了,所以求助一下客户端小伙伴了~)
4、参考文档:
1、基于html2canvas实现网页保存为图片及图片清晰度优化 - - 小小云朵
2、html2canvas.js网页截图功能(解决截图不全问题) - - JugglerTao -
JS实现页面保存为图片
2020-09-16 14:43:30今天项目遇到一个需求为将一个页面中的某一部分DOM转为一张图片供保存和上传到服务器的需求 这里我们需要使用到一个JS插件:dom-to-image,Github链接:https://github.com/tsayen/dom-to-image 这个插件可以使...今天项目遇到一个需求为将一个页面中的某一部分DOM转为一张图片供保存和上传到服务器的需求
这里我们需要使用到一个JS插件:dom-to-image,Github链接:https://github.com/tsayen/dom-to-image
这个插件可以使我们方便的将页面中的某一部分DOM结构轻松的转换成一张图片供后续使用
下面说一下大概的使用方法:
首先随便准备一点内容
DOM部分:
JS部分:
domtoimage.toJpeg(document.getElementById('app'), { quality: 0.95,bgcolor:'#fff'})
.then(function (dataUrl) {
//1.因为在微信中无法直接使用 a标签进行下载所有
vm.show = true;
setTimeout(()=>{
var a = document.getElementById('end')
var img = document.createElement('img')
img.src = dataUrl
img.style.width='100%'
img.style.height="100%"
a.appendChild(img)
},100)
//2.a标签直接下载到本地
var link = document.createElement('a');
link.download = 'my-image-name.jpeg';
link.href = dataUrl;
link.click();
});这是点击图片时触发的函数 domtoimage.toJpeg(dom, options),第一个选项是一个DOM节点,第二个是相关的属性设置这里只列举了两个一个是图片质量,一个是图片背景色。
当在微信中使用时需要注意,因为微信有限制不允许下载文件所以只能做一个弹出层之类的引导用户长按图片保存,如果是普通浏览器的话就可以直接使用a标签进行下载了
效果还是很高清的
-
谷歌浏览器将网页保存为图片或者pdf
2017-03-08 11:22:521. 写在前面今天又发现个好工具,有时候在网上看到点好东西,想保存下次...2. 工具为了实现,我找了找,发现360浏览器有自带的,直接可以将网页保存为图片,但是作为一个开发者,难道要改用360?而且我认为连360都能做1. 写在前面
今天又发现个好工具,有时候在网上看到点好东西,想保存下次也可以看一般我是有这几种途径。
1.可以添加网页到文件夹,但是这样子看的时候必须要联网。
2.或者保存在云笔记中。
3.但是还是不够全,我想将整个网页变成一张图片,想怎么看就怎么看。2. 工具
为了实现,我找了找,发现360浏览器有自带的,直接可以将网页保存为图片,但是作为一个开发者,难道要改用360?而且我认为连360都能做出来的功能,难道谷歌老大做不出来,然后去谷歌网上应用店找到一款这样的工具。只需添加一个拓展工具即可。见图,需要科学上网。
工具有很多,我选了款评分最多的,而且很高的。捕捉网页截图-FireShot的,名字有点怪,无所谓,然后直接傻瓜式的添加为拓展程序即可。添加完以后,使用直接点击全是中文,见图。
这个拓展程序文件已经被我打包出来了,但是不知道为什么我把这.crx文件上传到csdn资源上传总是成功了,但是去查看又没有,上次也是一样,不知道什么情况,如果不能科学上网的留下邮箱,我看到可以发你们。 -
将网页内容保存为图片(网页快照) vc设计
2011-09-22 09:08:06将网页内容保存为图片(网页快照) vc设计 转自作者冰城 -
PHP网页截取快照:PHP截取网站网页保存为一张图片实现。
2019-09-30 17:48:58phantomjs截取网页截图 场景 有一个视频播放地址,需要对该网页进行截图 解决思路: 1.将视频下载到本地,使用ffmpeg进行处理 2.使用phantomjs,phantomjs内置了webkit浏览器引擎,phantomjs可以模拟... -
html2canvas实现网页保存为图片
2018-10-28 22:19:29今天我们来学习一波怎么将一个网页生成一张图片的,主要的应用场景在,分享,截图等 我主要使用的是一个js库 html2canvas ,下面来了解一下他的详细用法吧。 大家可以去这里... -
一分钟教你如何保存网页上一些不能直接保存的图片
2021-06-12 03:37:40在浏览网页时,我们看到一些图片,很精美漂亮,不由的想要保存下来,可是右键图片,却发现没有图片另存为的选项,不禁让人挺郁闷的。怎么办呢?1、直接截图这是最简单粗暴的,也满足一般需求,缺点也明显,如果图片... -
有效保存Html页面为图片格式的详细方法
2021-06-10 16:06:25我们在浏览器中保存网页的时候很多的都是全部截图,你其实可以批量的保存网页为图片的时候我们另存为页面保存不是图片的格式的,那有小伙伴提问怎么直接实现保存的网页为图片格式可以直接打印的那种对于这个问题今天... -
python爬取网页图片教程之python爬虫获取图片保存图片
2021-10-25 17:01:48怎么用python爬取网页图片,今天我们以一个实例网页()来爬取页面中的所有图片。 1.获取图片的URL ** ** 首先我们要想获取图片的URL,就需要将该网页中的图片URL提取你,那么我们首先获取该网页的整个数据 然后... -
基于html2canvas实现网页保存为图片及图片清晰度优化
2019-03-19 15:57:25本次技术调研来源于H5项目中的一个重要功能需求:实现微信长按网页保存为截图。 这里有个栗子(请用微信打开,长按图片即可保存):3分钟探索...现有已知能够实现网页保存为图片的方案包括: 方案1:将DOM改写为c... -
java实现当前页面保存为图片
2016-04-05 17:54:52方法一: import java.awt.Dimension ;.../**************************************************************...//保存图片 ImageIO. write (bi , "jpg" , new File( "C: \\ google.jpg" )) ; } } -
Python Plot+Bokeh画图并保存为图片或网页
2020-12-09 03:48:00plotPath= r'E:\test\sharey.png' # 图片保存路径 plt.savefig(plotPath) # 保存图片 2.Bokeh绘图并保存为网页 首先需要安装bokeh包,使用命令: pip install bokeh 使用bokeh绘图保存为网页后,网页中可以实现拖拽... -
Asp.Net完整实现网页保存为图片代码
2014-03-24 11:09:03需要把网页保存为图片,实现原理:在Web项目中引用System.Windows.Forms,使用WebBrowser嵌入任意网页,通过WebBrowser可以把网页截成图片流,再保存为各种图片格式就实现了。 注意:网页中有一些脚本不支持,只... -
怎么保存整个网页
2021-06-14 04:12:26手机评站网今天精心准备的是《怎么保存整个网页》,下面是详解!如何另存整个网页如何另存整个网页...如何另存整个网页1.在手机桌面中找到手机百度,点击打开手机百度,如下图所示。2.在手机百度中找到自己想要另存... -
前端实现将页面保存成图片功能
2020-10-27 11:34:51将网页保存成图片 之前在做项目的时候,** (可爱)的产品经理提了一个很 * * (优秀)的需求,当时做的是移动端h5,要讲当前页面保存成图片,网页有多长就保存多长的图片在手机里 dom-to-image 和 html2canvas 两个插件... -
微信H5实现网页长按保存图片及识别二维码
2018-08-19 14:48:36实现微信H5实现网页长按保存图片及识别二维码 使用工具 html2canvas 官方文档 html2canvas.hertzen.com/ canvas2image github.com/hongru/canv… 实施方案 将DOM 使用html2canvas转化成cavas对象 再将cavas对象使用... -
基于PyQt5实现保存网页为pdf
2022-04-18 11:00:59基于Python和PyQt5实现保存网页为pdf示例 基于pyqt5的QlineEdit和Qbutton控件实现输入网页URL地址保存网页为pdf。 效果 程序代码示例 My Environment pdfkit PyQt5 PyPDF2 界面逻辑事件程序示例 # -*- coding... -
vue 页面保存为本地图片
2020-12-15 17:05:11需求:将整个页面转化为图片,或者将部分转化为图片 解决方案: 1.引入html2canvas npm install --save html2canvas或者:yarn add html2canvas 2.将html2canvas 引入到组件中 ,vant 的组件 ImagePreview 引入 ... -
使用Requests爬取网页图片并保存
2021-01-02 17:56:13爬取糗事百科上的“热图”的图片并保存在一个新建文件夹当中 过程 一、获得当前网页 使用的是requests爬虫,在使用requests库爬取网页中有介绍。 import requests r = requests.get('... -
Vue保存当前页面为图片
2021-01-13 16:46:08// cdn图片有问题 需要换成本地的图片 手气好,抽到宝,你不来...我刚刚抽到了:小米音乐音响 长按识别 试试运气来自UU跑腿抽奖保存图片import html2canvas from 'html2canvas';export default {data () {return {};... -
qt写的抓取网页图片并保存到本地
2011-03-08 13:08:46自己用qt写的,可以对指定url地址进行解析,找出其中包含的所有图片地址,并且可以保存到本地的指定位置。 -
H5页面vue让网页长按保存为图片
2019-02-24 11:09:433.想要让网页长按可以弹出为是否保存为图片,就让图片覆盖在整个网页的最上方 4.想要让网页里的二维码,一起生成到图片中,二维码的生成请使用QRCode 5.想要让网页显示的内容和最后生成的图片不一致,就把内容copy... -
用Canvas实现截取网页内容保存为图片
2018-01-13 17:06:16最近有个客户提出需求,要把报表导出...//按照官网给的调用方式,代码很简洁,saveImg是我自定义的回调函数,用于保存图片,获取到了canvas,就能够用canvas.toDataURL()获取图片的base64字符串,然后进行保存即可。