<!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. 回溯法——求解N皇后问题

    问题描写叙述 八皇后问题是十九世纪著名数学家高斯于1850年提出的.问题是:在8*8的棋盘上摆放8个皇后.使其不能互相攻击,即随意的两个皇后不能处在允许行.同一列,或允许斜线上. 能够把八皇后问题拓展 ...

  2. java获取class的几种方式

    以获取Hello.class为例 public class Hello { public static void main(String[] args) { // TODO Auto-generate ...

  3. #import @import #include

    1.在xcode5以后 ,Replace #import <Cocoa/Cocoa.h> with @import Cocoa; 在这之前 必须手动设置一下才能用. 2.#import 与 ...

  4. yum下载对应内核版本的kernel-devel

    1 查看内核版本 uname -r 2 查看目前已有的kernel-devel uname -a ; rpm -qa kernel\* | sort 3 下载对应版本 $ sudo yum insta ...

  5. include <ctype.h> 头文件包含函数总结

    里面包含的函数主要是: 1.字符测试函数,函数原型一般为:int isXXXX( int ); 参数为int, 只能正确处理[0, 127]. 2.字符映射函数,函数原型一般为:int toXXXX( ...

  6. javaScript实现增删改查

    自己写的一个html+javaScript实现增删改查小实例.下面是js代码​1. [代码][JavaScript]代码   //1.创建受捐单位数组var arrOrgData = [    { & ...

  7. Mysql语句示例

    Mysql语句示例 最常用 sql 语句总结 前言 Mysql 是数据库开发使用的主要平台之一.sql 的学习掌握与使用是数据库开发的基础,此处展示详细sql 语句的写法,及各种功能下的 sql 语句 ...

  8. 理解 Android MVP 开发模式

    /***************************************************************************************** * 理解 Andr ...

  9. SPOJ：House Fence（分治&DP）

    "Holiday is coming, holiday is coming, hurray hurray!" shouts Joke in the last day of his ...

  10. [Selenium] Selenium find Element Examples

    ---> 1. By.id  以百度主页为例 <span classs = "bg s_ipt_wr"> <input type = "text& ...