将HTML网页存储为图片区域截图截长屏截全屏

此方法不需要对原始网页"直接"进行修改，全部通过console进行操作即可

引入外部js

var cpscript = document.createElement('script');
cpscript.src = "https://html2canvas.hertzen.com/dist/html2canvas.min.js";
document.getElementsByTagName('head')[0].appendChild(cpscript);

html2canvas官网

在调试控制台【Elements】标签页定位所需截取的区域，并记下外层div的id后者class名称
可以此控制截取的区域，并实现全屏截图 ~

方式一：直接拼接生成的图片到页面最底部，需手动复制或者另存到本地

// 使用id选择器
html2canvas(document.querySelector("#id_name"),{scale:1.5})
.then(canvas => { //scala默认1 控制字体线条粗细document.body.appendChild(canvas)
});

方式二：直接将生成的图片下载到本地，文件名需直接在js代码中指定

// 使用class选择器
var oriDoc = document.querySelector(".vsc-initialized")
html2canvas(oriDoc).then(function (canvas) {//console.log("canvas", canvas)//生成图片var imgData = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");let $a = document.createElement('a');$a.setAttribute('href', imgData);//自定义图片名称位置$a.setAttribute('download', 'pic_name.png');let body = document.getElementsByTagName('body')[0];body.appendChild($a);//图片下载$a.click();//悄悄的我走了 正如我悄悄的来 我轻轻的挥一挥衣袖 不带走一片云彩body.removeChild($a);
});

参考文档
1. html2canvas保存图片
2. 将HTML页面内容转换为图片或PDF文件
3. 如何在浏览器控制台（Console）中引入外部JS

将HTML网页存储为图片区域截图截长屏截全屏相关推荐

android 图片点击一下就放大到全屏,再点一下就回到原界面
/*android 图片点击一下就放大到全屏,再点一下就回到原界面 */ public class MainActivity extends Activity { /** Called when th ...
html2canvas 把h5网页保存为图片区域保存
html2canvas 把h5网页保存为图片想把一个网页得某些元素,绘制成图片保存,有些数据是接口动态加载的,所以不能UI给到图片,需要我们把api的数据也绘制到图片上 html2canvas这个插 ...
Html手机web背景全屏,使用全屏背景的网页设计欣赏全屏网页背景教程
使用全屏背景的网页设计欣赏 & 全屏网页背景教程 Sponsor 全屏的大背景网站之前分享过不少,这是2012年以及2013年的设计趋势,适合用全屏背景的网站有很多,比如摄影类.建筑类.餐厅美 ...
video.js 视频截图、录制、自定义全屏，hls、flv、mp4视频播放
功能 video.js内嵌截图.录制功能 (图片.视频会下载到本地) 自定义全屏播放hls.flv.mp4 功能集合成Vue组件参考 video.js components RecordRTC ...
HTML5怎么让图片和文字重叠,利用HTML5实现全屏图片文字过渡切换特效
特效描述:利用HTML5实现全屏图片文字过渡切换特效.利用HTML5实现全屏图片文字过渡切换特效代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Masupitami Wal ...
屏幕测试图片全屏_全屏视频测试
屏幕测试图片全屏只需记录一些全屏视频技术以及jQuery UI对话框窗口即可 . 我已经在演示中嵌入了YouTube视频,但是您可以嵌入任何视频. 在GitHub上查看演示查看项目正在检查浏览 ...
相机截图（区域截图、长图、大图）
单独创建一个相机和画布实现截取一部分图,或者长图,传入的obj需含有"RectTransform"便于获取所截区域的大小,即obj的尺寸就是截图的尺寸. 我传入的是Content对 ...
如何截图鼠标右键时显示的内容和截屏电脑全屏快捷键
一.如何截图鼠标右键时显示的内容: 现在电脑上截图我一般用的都是QQ截图(Ctrl + Alt + A ),但使用中发现有些无法截图, 比如,鼠标右键菜单打开后,截图时鼠标右键菜单消失.因此我记录了下 ...
Ubuntu上用快捷键部分区域截图
1.要在Ubuntu上运行截图功能,但是直接使用自带的"PrtSrc"按键,虽然能够截图,但都是全屏.比如,(我是双屏). 2.想要实现部分区域截图,直接使用Shift+PrtSc ...
网易服务器图片不显示图片,为什么网易的网页中部分图片不能正常显示？
为什么网易的网页中部分图片不能正常显示? 来源:互联网宽屏版评论 2010-07-22 11:29:19 分类: 电脑/网络 >> 互联网问题描述: 参考答案: 开始--> ...

将HTML网页存储为图片区域截图截长屏截全屏

将HTML网页存储为图片区域截图截长屏截全屏相关推荐

最新文章

热门文章

将HTML网页存储为图片 区域截图 截长屏 截全屏

将HTML网页存储为图片 区域截图 截长屏 截全屏相关推荐

最新文章

热门文章

将HTML网页存储为图片区域截图截长屏截全屏

将HTML网页存储为图片区域截图截长屏截全屏相关推荐