<!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. DT的jquery

    IE8浏览器,打开页面提示脚本错误,query不识别,缺少")"等等, 各种删除,最后只保留引用jquery文件还是不行,最后更好jquery为jQuery v1.12.4 版本, ...

  2. Reveal查看任意app的高级技巧

    本文转载至 http://blog.csdn.net/wbdwsqwwn/article/details/40476139 Reveal是一个很强大的UI分析工具,与其他几个功能相近的工具(比如Pon ...

  3. Django 之 form表单

    Django中的Form表单 1.背景 平时我们在书写form表单时,经常都是手动的去写一些input标签,让用户输入一些功能,进行一些校验的判断,等等.Django中的form表单就能够帮我们去实现 ...

  4. Thread Runnable 区别

    [线程的并发与并行] 在单CPU系统中,系统调度在某一时刻只能让一个线程运行,虽然这种调试机制有多种形式(大多数是时间片轮巡为主),但无论如何,要通过不断切换需要运行的线程让其运行的方式就叫并发(co ...

  5. kbmMemTable关于内存表的使用，以及各种三层框架的评价

    关于内存表的使用(kbmMemTable) 关于内存表的使用说明一. Delphi使用内存表1.1 Delphi创建内存表步骤:1． 创建一个Ttable实例.2． 设置一个DataBaseName为 ...

  6. maven常用命令总结

    搞了多年java 似乎还有些命令 混混沌沌 今儿来总结下 mvn -v 查看版本 mvn -compile 编译当前工程 生成target目录的字节码文件以及报告 mvn -package 将当前工程 ...

  7. react项目中的注意点

    一.ES6 的编译方法 目前主流的浏览器还不支持ES6. 现在一般采用webpack 和 <script type="text/babel">对jsx  语法进行编译, ...

  8. HDU1560 DNA sequence —— IDA*算法

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1560 DNA sequence Time Limit: 15000/5000 MS (Java/Oth ...

  9. 解决VMware安装Ubuntu的过程中窗口过小无法看到【下一步】按钮的问题

    只要按住ALT键向上拖动窗口

  10. Maze 解题报告

    Maze Description   You are given a special Maze described as an n*m matrix, please find the shortest ...