html2canvas将页面内容生成图片
html2canvas官网链接地址:https://html2canvas.hertzen.com/
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用canvas将页面内容生成图片</title>
<style>
img {
width: 500px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrapper" style="background-color:red; ">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533212152031&di=f26250570f7d5f2e7895c7c13e96d61a&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F267f9e2f07082838304837cfb499a9014d08f1a0.jpg"
style="cursor: pointer" onclick="wclick()"/>
</div>
<!-- 引入canvas.js插件 -->
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
window.onload = function () {
// click();
html2canvas(document.querySelector(".wrapper"), {
allowTaint: true,
useCORS: true,
}).then(canvas => {
console.log(canvas);
document.body.appendChild(canvas)
});
} function wclick() {
console.log("object");
}
</script>
</body>
</html>
html2canvas将页面内容生成图片的更多相关文章
- java使用代理 html2canvas 截屏 将页面内容生成图片
1.html2canvas 生成图片简单又好用,但涉及到跨域就会出现问题,官方给出的解决办法是设置代理.基本原理就是在后端将图片的数据生成base64再返回给前端使用.使canvas画布分析元素的时候 ...
- 利用JavaScript将页面截图生成图片传给后台的插件:html2canvas
利用JavaScript将页面截图生成图片传给后台的插件:html2canvas 一.总结 一句话总结: 10 <script type="text/javascript"& ...
- C# HtmlAgilityPack+Selenium爬取需要拉动滚动条的页面内容
现在大多数网站都是随着滚动条的滑动加载页面内容的,因此单纯获得静态页面的Html是无法获得全部的页面内容的.使用Selenium就可以模拟浏览器拉动滑动条来加载所有页面内容. 前情提要 C#HtmlA ...
- 利用filter过虑用户请求URI显示对应页面内容
目的:只是想验证一下filter对URI的过滤 流程讲解:浏览器请求URI,所有请求都走过虑器,在过滤器中处理符合某种请求的URI然后显示对应的页面内容 有2个JSP页面: index.jsp: &l ...
- jQuery简单实现iframe的高度根据页面内容自适应的方法(转)
本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...
- html页面内容超出后显示水平滚动条的问题
这个问题已经遇到好几次,解决起来也熟练了很多. 出现这种问题一般都是html或页面中的某一内部元素宽度超了. 下面总结我遇到的几种情况: 1.某一内部元素width设为100%,然而它还有bord ...
- PHP curl获取页面内容,不直接输出到页面,CURLOPT_RETURNTRANSFER参数设置
使用PHP curl获取页面内容或提交数据,有时候希望返回的内容作为变量储存,而不是直接输出.这个时候就必需设置curl的或true. 1.curl获取页面内容, 直接输出例子: <?php $ ...
- 使用ajax实现无刷新改变页面内容
如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...
- 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容,总体来说基本达到了一个稳定的状态,随着时间的推移可 ...
随机推荐
- 最近工作再弄基于bootstrap的定制sass
封装各种组件如 button table 当然..我只才做完两个. 比如table 抽出很多类以后可以配置的值 还有button 目录结构大致是 scss主要css文件 base和components ...
- nginx配置ssl证书
一:加装nginx的ssl模块 1.1:切换到源码包 cd /zz/nginx-1.14.2 1.2:查看已安装模块 /usr/local/nginx/sbin/nginx -V [root@game ...
- java Reference
相关讲解,参考: Java Reference 源码分析 Java Reference详解 Reference: // 名称说明下:Reference指代引用对象本身,Referent指代被引用对象 ...
- Jsの练习-数组其他常用方法 -map() ,filter() ,every() ,some()
map() :映射,对数组中的每一项运行给定函数,返回每次函数调用结果组成的函数. <!DOCTYPE html> <html lang="en"> < ...
- [server]阿里云服务器远程文件传输的解决方案
在今年6月份以前使用windows自带的远程桌面还可以畅快无阻地进行稍大文件的传输.但是后来就总是会蹦了.最近频繁使用,发现已经不能愉快地的传输文件了,就是挂载本地驱动器,只能传输很小,大概小于40M ...
- python复习购物车程序
个人学习总结: 无他,唯手熟尔!多敲多练才是王道 python 第三课 元组的灵活运用&字符串的诸多操作 Program01 '''时间 2018年2月12日12:15:28目的 购物车程序 ...
- console.log()中的%d,%s等代表的输出类型
在console.log()或console.debug()中输出时会有%d,%s等符号. %s for a String value 字符类型 %d or %i for a Integer valu ...
- js date setInterval 时间 时钟 getFullYear ,JavaScript
js 创建时钟: 1.参考链接: 注意 getYear (两位 或者 四位) 改成 getFullYear js操作时间 2.实例: html: <span class="glyp ...
- stand up
#version_s#1.7#version_e# #update_s#https://files.cnblogs.com/files/dyh221/update.zip#update_e#
- 黑客常用dos-cmd命令
黑客常用命令大全net user heibai lovechina /add 加一个heibai的用户密码为lovechina net localgroup Administrators heibai ...