<!DOCTYPE html>

<html lang="en">

<head>

    <meta name="layout" content="main">

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        #canvs {

            background-color: yellow;

            width: 400px;

            margin: 100px auto;

            text-align: center;

            padding: 10px;

        }

        .title {

            font-size: 18px;

        }

    </style>

    <script type="text/javascript" src="http://www.boolaw.com/tpl/default/js/jquery-1.8.3.min.js"></script>

    <script type="text/javascript" src="js/html2canvas.js"></script>

    <script type="text/javascript">

        function downloadForJS() {

            //使用html2canvas 转换html为canvas

            html2canvas(document.getElementById('canvs')).then(function (canvas) {

                var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url 　

                var saveLink = document.createElement('a');

                saveLink.href = imgUri;

                saveLink.download = 'downLoad.png';

                saveLink.click();

            });

        }

    </script>

</head>

<body>

    <div id="canvs">

        <div class="title">如梦令·昨夜雨疏风骤</div>

        <div>[宋] 李清照</div>

        <div>昨夜雨疏风骤，浓睡不消残酒，试问卷帘人，却道海棠依旧。</div>

        <div>知否，知否，应是绿肥红瘦。</div>

    </div>

    <div style="width: 400px;margin:50px auto;">

        <input class="button" type="button" value="button" onclick="downloadForJS()">测试</input>

    </div>

</body>

</html>

2.如果存在滚动条，怎么把滚动条里面的内容也截取下来

downloadForJS() {

      var targetDom = this.common.getClass('div', 'rightBox')[0]

      var copyDom = targetDom.cloneNode(true) // 克隆节点

      copyDom.style.width = targetDom.offsetWidth + 'px'

      copyDom.style.height = targetDom.scrollHeight + 'PX' // 获得高度

      document.getElementsByClassName('wrapperRight')[0].appendChild(copyDom) // 插入节点

      html2canvas(copyDom).then((canvas) => {

        document.getElementsByClassName('wrapperRight')[0].removeChild(copyDom) // 删除节点

        var imgUri = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream') // 获取生成的图片的url

        var saveLink = document.createElement('a')

        saveLink.href = imgUri

        saveLink.download = 'downLoad.png'

        saveLink.click()

      })

    }

html2canvas如何将div转成图片并下载，如何将滚动条的内容截取下来的更多相关文章

  1. H5页面转成图片并下载到本地

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. js中保存成图片并下载

    1.保存canvas中绘制的内容为图片 HTML代码: <canvas id="canvas" width="400" height="400& ...

  3. js将canvas保存成图片并下载

    <canvas id="canvas" width="400" height="400"></canvas> < ...

  4. 前端借助dom-to-image把HTML转成图片并通过ajax上传到服务器

    之前接到了一个任务,把jsp中的table转成一个图片,保存在指定文件夹并显示在前端. 我的思路是:一.引用第三方js在前端把table转成图片 二.通过ajax把图片上传到服务器,保存在指定文件夹 ...

  5. 利用html2canvas将当前网页保存为图片.

    先分析下这个技术可实现的方式,以及优缺点吧! 前端实现 缺点是:兼容性查,需要高级浏览器支持,因为需要支持 canvas 绘图,还有就是会操作 html5 canvas api.(如果不会使用canv ...

  6. html2canvas 把h5网页保存为图片 区域保存

    html2canvas 把h5网页保存为图片 想把一个网页得某些元素,绘制成图片保存,有些数据是接口动态加载的,所以不能UI给到图片,需要我们把api的数据也绘制到图片上 html2canvas这个插 ...

  7. hml页面转化成图片

    <!DOCTYPE html><html><head><meta charset="utf-8"><meta name=&qu ...

  8. 转: jquery.qrcode.js生成二维码插件&转成图片格式

    原文地址: https://blog.csdn.net/u011127019/article/details/51226104 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持can ...

  9. base64格式的图片数据如何转成图片

    base64格式的图片数据如何转成图片 一.总结 一句话总结:不仅要去掉前面的格式串,还需要base64_decode()解码才行. // $base_img是获取到前端传递的值 $base_img ...

随机推荐

  1. Linq To Sql进阶系列（六）用object的动态查询与保存log篇

    动态的生成sql语句,根据不同的条件构造不同的where字句,是拼接sql 字符串的好处.而Linq的推出,是为了弥补编程中的 Data != Object 的问题.我们又该如何实现用object的动 ...

  2. LeetCode题解(13)--Roman to Integer

    https://leetcode.com/problems/roman-to-integer/ 原题: Given a roman numeral, convert it to an integer. ...

  3. http权威指南（一）-Http概述

    Http概述 在Web中,不管是浏览器还是server都是通过Http相互通信的.那么Http是怎样工作的呢? 首先,client向server发送Http请求,server会在Http响应中回送所请 ...

  4. jetty java文件无法删除 java文件占用 delete无效 运行时锁定静态资源的解决方法

    前几天jetty下发现java无法删除文件,文件操作后一直被jvm占用,无奈换了tomcat问题消失. 今天又想起来,尝试网上的解决方法,经本人试验,直接修改配置文件有时不能生效,具体原因不清楚,建议 ...

  5. 解决gradle多模块依赖在Idea中能运行，gradle build失败的问题。

    最近需要初始化一个SpringBoot新项目遇到一个问题就是:项目中有多个子模块,使用gradle依赖管理成功. 项目结构如下: project --module1     --module2我的mo ...

  6. storage engine option for directoryPerDB

    Requested option conflicts with current storage engine option for directoryPerDB; you requested true ...

  7. 20170225 ABAP获取字符串长度/字节长度

    函数YGET_CHAR_LONG: FUNCTION YGET_CHAR_LONG. *"-------------------------------------------------- ...

  8. ubuntu主板信息

    root:~# sudo dmidecode |grep -A16 "System Information$"sudo: 无法解析主机:phone-TPOWER-X79System ...

  9. jconsole工具检测堆内存变化的使用

    jconsole将Java写的程序检测. 从Java 5开始 引入了 JConsole.JConsole 是一个内置 Java 性能分析器,可以从命令行或在 GUI shell 中运行.您可以轻松地使 ...

  10. DEDE内容页调用栏目的SEO标题、描述、关键字的方法

    上篇写了<dedecms栏目页调用栏目关键词.描述的方法>,本章雨田SEOER讲述DEDE内容页调用栏目的SEO标题.描述.关键字的方法内容页调用SEO标题:在<title>& ...