<!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. WPF新手之如何将数据绑定到TreeView

    看过许多例子,全是绑定到类的,没人说如何绑定到某个对象,偏偏我这个绝对的新手就是要绑定到一个对象,只能自己摸索了: 首先要将数据绑定到容器,有以下几个默认条件:①元数据必须包装在List或者Obser ...

  2. Xamarin.Android 记事本（二）自定义AlertDialog

    导读 1.自定义一个AlertDialog 2.添加一条数据 正文 记事本应当有一个添加功能,这里我打算在右上角放一个item,然后点击这个item弹出一个对话框,输入名称,点击确定跳转到另一个act ...

  3. Linux Linker Script

    先推荐两个网页: http://blog.csdn.net/muyuyuzhong/article/details/7755291 http://www.cnblogs.com/liulipeng/a ...

  4. UICollectionView基础用法

    初始化部分: UICollectionViewFlowLayout *flowLayout= [[UICollectionViewFlowLayout alloc]init]; self.myColl ...

  5. amazon lightsail

    https://51.ruyo.net/6038.html https://aws.amazon.com/cn/lightsail/

  6. Spring Boot2.0之 整合Redis事务

    Redis事物 Redis 事务可以一次执行多个命令, 并且带有以下两个重要的保证: 事务是一个单独的隔离操作:事务中的所有命令都会序列化.按顺序地执行.事务在执行的过程中,不会被其他客户端发送来的命 ...

  7. codeforces 673A A. Bear and Game(水题)

    题目链接: A. Bear and Game time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  8. AtCoder3857：Median Sum （Bitset优化背包&&对称性求中位数）

    Median Sum You are given N integers A1, A2, ..., AN. Consider the sums of all non-empty subsequences ...

  9. struts2通用标签

    Struts2框架为我们提供了很多标签,这些标签总体上可以分为两类:通用标签和UI标签.通用标签分为两类:数据标签和控制标签.数据标签用于访问值栈中数据,控制标签用于控制呈现页面时数据执行流程.使用S ...

  10. mysql导出 数据库字典

    USE information_schema; --切记这里不能忘掉 SELECT T.TABLE_SCHEMA AS '数据库名称', T.TABLE_NAME AS '表名', T.TABLE_T ...