<!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. php composer 相关及版本约束等小技巧

    对于现代语言而言,包管理器基本上是标配.Java有Maven,Python有pip,Ruby有gem,Nodejs有npm.PHP的则是PEAR,不过PEAR坑不少: 依赖处理容易出问题 配置非常复杂 ...

  2. YTU 2577: 小数计算——结构体

    2577: 小数计算--结构体 时间限制: 1 Sec  内存限制: 128 MB 提交: 978  解决: 647 题目描述 小数可以看成是一个点和两个数组成的,因此可以定义成一个小数的结构体,现在 ...

  3. html5--6-6 CSS选择器3

    html5--6-6 CSS选择器3 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作 ...

  4. 一步一步学Silverlight 2系列（17）：数据与通信之ADO.NET Data Services

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  5. ios打印frame等格式

    1.打印frame:NSLog(@"%@",NSStringFromCGRect(pickerView.frame)); 或者CFShow(NSStringFromCGRect(p ...

  6. HDU4188：RealPhobia （连分数的运用之一）

    Bert is a programmer with a real fear of floating point arithmetic. Bert has quite successfully used ...

  7. maven(一)创建一个maven的web项目

    一.创建项目 1.Eclipse中用Maven创建项目 上图中Next 2.继续Next 3.选maven-archetype-webapp后,next 4.填写相应的信息,Packaged是默认创建 ...

  8. [Codeforces 914D] Bash and a Tough Math Puzzle

    [题目链接] https://codeforces.com/contest/914/problem/D [算法] 显然 , 当一个区间[l , r]中为d倍数的数的个数 <= 1 , 答案为Ye ...

  9. 【CQOI2009】中位数图

    [题目链接] 点击打开链接 [算法] 将小于m的数看作-1,大于m的看作1 然后求前缀和,如果区间[l,r]的中位数是m,显然有 : sum(r) - sum(l-1) = 0 因此,只需m的位置之前 ...

  10. Excel: 使用Countif函数来去掉Excel中重复的数据

    如果使用Ruby脚本,uniq函数就能搞定一切.不过我们现在还是讨论怎么用excel的Countif函数吧. 假设Excel中有一列数据: