分享一个网页截图html代码

可以自定义选区截图网页，适合需要生成网页截图的网站使用。

<!DOCTYPE html>
<html><head><meta name="layout" content="main"><title>我爱搜www.wuioo.com网页截图html代码</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script><script  type="text/javascript" >$(document).ready( function(){$(".example1").on("click", function(event) {$(".example1").hide();html2canvas(document.querySelector("body")).then(canvas => {var dataUrl = canvas.toDataURL();$(".myimg").show(); var element = document.getElementById('myimage');element.src = dataUrl;});   });
$(".close").click(function(){$(".myimg").hide();
});});</script><style>.myimg{width: 60%;height: auto;display: none;position: fixed;z-index: 99;margin:12px;top: 10%;left: 10%;background-color: #fff;text-align: center;-webkit-background-clip: content;box-shadow: 1px 1px 50px rgba(0,0,0,.3);}#myimage{    width: 100%;height: 100%;}</style></head><body><div id="tu" style="background-color: #abc;padding:200px;">截图部分 </div><input class="example1" type="button" value="截图"><br><br><br><div class="myimg">点击下方图片保存<a href="javascript:;" class="close">点我关闭</a><p><a><img id="myimage" src="" alt="长按保存" title="长按保存图片"/></a></p></div></body>
</html>

可以直接复制代码使用，或者保存为html文件测试。
支持点击隐藏。
更多网页代码可以访问：我爱搜技术资源

分享一个网页截图html代码相关推荐

分享一个爱心的特效代码
给大家分享一个用html+js写的爱心特效代码,打开你的dw或者vscode编辑器,将代码丢进去运行就行,小白请参考第二点目录一.有代码基础的同学看这儿效果: 源码: 有些新入门的铁子可能不知道 ...
html5网页分享到朋友圈,微信公众平台网页开发实战--1.微信分享一个网页到朋友圈...
对微信的JSSDK进行封装一下,创建一份类似的文件结构,增加index.html与shareApi.js文件,结构如图3.3所示. 图3.3 3.2节文件结构另外,提醒读者一下,wxJSSDK.j ...
今天给大家分享一个HTML5的钢琴代码，可以弹奏的哦！（附完整源码）
它是一个可以弹奏的钢琴,所以它需要音频文件,在这里发不了,这里只有代码,音频文件的分享在文章末尾哦. <!doctype html> <html lang="en" ...
分享一个自动化截图程序
应用场景:一份10几页的word报告,要求一页一张图片,并添加页码实现路径:1)10页分割成10个word:档辅word分割工具 2)把word转化为pdf,不然格式容易改变(word自动化转化为p ...
分享一个gif截图工具
可以自定义截图范围,挺强大的 http://www.cockos.com/licecap/
如何在终端下截取一个完整长度的网页截图
与其记笔记或是把看到的内容发送给其他人,我们更经常通过截屏来帮助我们记忆. 但是通常情况下,如果一个网页超出了屏幕高度,我们就得用多张截图去截取其全部内容. 对于 Linux,你将会有一个更好的解决方 ...
linux终端长截图,如何在终端下截取一个完整长度的网页截图
与其记笔记或是把看到的内容发送给其他人,我们更经常通过截屏来帮助我们记忆. 但是通常情况下,如果一个网页超出了屏幕高度,我们就得用多张截图去截取其全部内容. 对于 Linux,你将会有一个更好的解决方 ...
使用PhantomJS实现网页截图服务
使用PhantomJS实现网页截图服务 2015-12-12来源:Java教程人气:99 这是上半年遇到的一个小需求,想实现网页的抓取,并保存为图片.研究了不少工具,效果都不理想,不是显示太差了(Ca ...
分享一个忘忧神途辅助脚本工具
同时分享一个随机数生成器部分代码. 忘忧神途这一类游戏需要长时间的挂机,这里分享一个脚本辅助工具,此工具相当于一个挂在云端的模拟器. 能随时操作,设置好后能够云端运行. 远程操作界面截图: 雷电云手机 ...
如何用dw编写一个网页注册：
如何用dw编写一个网页注册: 代码: <!doctype html> <html> <head> <meta charset="utf-8" ...

分享一个网页截图html代码

分享一个网页截图html代码相关推荐

最新文章

热门文章