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. 在Linux CentOS6系统中安装开源CMS程序OpenCart的教程

    OpenCart是一个开放源码的店面,旨在为您提供灵活和细粒度的在线店面管理.在开始之前,您应该已经在您的Linode上设置了一个LAMP堆栈.您还应该设置主机名. PHP设置 为了使用OpenCar ...

  2. 关注Yumiot公众号，了解最新的物联网资讯

    Yumiot,专注于物联网行业,每天不定期推送最新的物联网行业新闻.详情请用微信搜索关注  yumiot  .

  3. SQL-51 查找字符串'10,A,B' 中逗号','出现的次数cnt。

    题目描述 查找字符串'10,A,B' 中逗号','出现的次数cnt. SQL: select length('10,A,B')-length(replace('10,A,B',',','')) len ...

  4. Java面试2018常考题目汇总

    一.JAVA基础篇-概念 1.简述你所知道的Linux: Linux起源于1991年,1995年流行起来的免费操作系统,目前, Linux是主流的服务器操作系统, 广泛应用于互联网.云计算.智能手机( ...

  5. 获取百度地图POI数据二（准备搜索关键词）

    上篇讲到  想要获取尽可能多的POI数据 需要准备尽可能多的搜索关键字   那么这些关键字如何得来呢?   本人使用的方法是通过一些网站来获取这些关键词   http://poi.mapbar.com ...

  6. 详解angular2组件中的变化检测机制（对比angular1的脏检测）

    组件和变化检测器 如你所知,Angular 2 应用程序是一颗组件树,而每个组件都有自己的变化检测器,这意味着应用程序也是一颗变化检测器树.顺便说一句,你可能会想.是由谁来生成变化检测器?这是个好问题 ...

  7. DAY4：简单购物系统

    根据前几天对于循环和列表的学习,做了一个简单的购物系统: 密码模块就是前篇文章已经做过就,直接调用过来就行,简单说一下该购物系统功能 1,展示货物,需要手动添加,haha 2,判断余额是否充足并充值 ...

  8. nginx——配置 Nginx 错误页面优雅显示

    ...... http { location / { root html/www; index index.html index.htm; error_page 400 401 402 403 404 ...

  9. Java学习NO.2

    这是我学习Java的第二天 学习内容: 一.运算符 赋值运算符  语法:变量名=表达式 算数运算符  +  -  *  /  %  ++  --   +=  -=  *=  /=  %= 其中尤为要注 ...

  10. Mac OSX 编译 LeanSDR

    LeanSDR:Lightweight, portable software-defined radio git clone http://github.com/pabr/leansdr.git cd ...