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将页面内容生成图片的更多相关文章

  1. java使用代理 html2canvas 截屏 将页面内容生成图片

    1.html2canvas 生成图片简单又好用,但涉及到跨域就会出现问题,官方给出的解决办法是设置代理.基本原理就是在后端将图片的数据生成base64再返回给前端使用.使canvas画布分析元素的时候 ...

  2. 利用JavaScript将页面截图生成图片传给后台的插件：html2canvas

    利用JavaScript将页面截图生成图片传给后台的插件:html2canvas 一.总结 一句话总结: 10 <script type="text/javascript"& ...

  3. C# HtmlAgilityPack+Selenium爬取需要拉动滚动条的页面内容

    现在大多数网站都是随着滚动条的滑动加载页面内容的,因此单纯获得静态页面的Html是无法获得全部的页面内容的.使用Selenium就可以模拟浏览器拉动滑动条来加载所有页面内容. 前情提要 C#HtmlA ...

  4. 利用filter过虑用户请求URI显示对应页面内容

    目的:只是想验证一下filter对URI的过滤 流程讲解:浏览器请求URI,所有请求都走过虑器,在过滤器中处理符合某种请求的URI然后显示对应的页面内容 有2个JSP页面: index.jsp: &l ...

  5. jQuery简单实现iframe的高度根据页面内容自适应的方法(转)

    本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...

  6. html页面内容超出后显示水平滚动条的问题

    这个问题已经遇到好几次,解决起来也熟练了很多.   出现这种问题一般都是html或页面中的某一内部元素宽度超了. 下面总结我遇到的几种情况: 1.某一内部元素width设为100%,然而它还有bord ...

  7. PHP curl获取页面内容，不直接输出到页面，CURLOPT_RETURNTRANSFER参数设置

    使用PHP curl获取页面内容或提交数据,有时候希望返回的内容作为变量储存,而不是直接输出.这个时候就必需设置curl的或true. 1.curl获取页面内容, 直接输出例子: <?php $ ...

  8. 使用ajax实现无刷新改变页面内容

    如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...

  9. 基于Metronic的Bootstrap开发框架经验总结（9）--实现Web页面内容的打印预览和保存操作

    在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容,总体来说基本达到了一个稳定的状态,随着时间的推移可 ...

随机推荐

  1. 第一章04：JDK与JRE 区别

    JDK = 开发工具 JRE = 运行程序 跨平台性 java程序 = 可以在任何系统中运行(不分系统) JVM = java虚拟机(不同系统下载不一样的JDK版本)(安装的时候包含在jre里面)

  2. JavaScript学习摘要

    JavaScript的历史 1. css3在css2的基础上添加样式 可以做动画 也可以配合js操作2. h5在html4.01的基础上添加高级标签3. jQuery是JavaScript的封装4. ...

  3. Shell test 命令

    Shell中的 test 命令用于检查某个条件是否成立,它可以进行数值.字符和文件三个方面的测试. 数值测试 参数 说明 -eq 等于则为真 -ne 不等于则为真 -gt 大于则为真 -ge 大于等于 ...

  4. 一：配置Linux Centos7 .netCore 部署环境

    安装:jexus 官网: https://www.jexus.org/  下载专业(独立)版 博客地址: https://blog.csdn.net/xmroom/article/details/69 ...

  5. linux下快速安装chrome

    linux下安装chrome 1.按下 Ctrl + Alt + t 键盘组合键,启动终端 2.在终端中,输入以下命令: (将下载源加入到系统的源列表.命令的反馈结果如图.如果返回“地址解析错误”等信 ...

  6. element ui 手动关闭$notify弹框

    1.需求: 当用户点击 “点击下载” 后,文件导出这个弹框主动消失. 2.解决方案: 如下图所示 (需要注意的是这里的关闭是 点击弹框任意处就会关闭,如果想实现我的需求需要判断一下即可)

  7. windows 环境下mysql 重置密码解决方案

    1.打开本地安装MySQL的安装目录,如:D:\software\mysql-5.7.20-winx64 进入bin目录,执行如下命令: mysqld -nt --skip-grant-tables ...

  8. 单链表sLinkList类，模板类

    sLinkList模板类,单链表代码 /* 该文件按习惯可以分成.h文件和实现的.cpp文件 */ template <class elemType> class sLinkList { ...

  9. 封装Thread的两种方法 via C++ in Linux

    方法一: 代理线程函数(proxyThreadFunc)作为类的静态成员函数, 回调函数指针作为类的私有成员变量 方法二: 代理线程函数(proxyThreadFunc)作为全局函数,  回调函数指针 ...

  10. CornerStone使用跳坑总结（陆续更新）

    Cornerstone是专门为Mac用户设计的Subversion(SVN)的控制,使版本控制更加透明.cornerstone根Xcode相比,能够更好的忽略文件,所以除了项目经理第一次初始化项目的时 ...