DIV转成图片并导出html2canvas.js

╰+攻爆jí腚メ 2022-06-01 14:05 319阅读 0赞

小猿目前接到一个需求就是把一个页面转成图片并导出

上网查到各种工具所采用的就是html2canvas.js （里面代码没细看）

这个工具相当不错，我们可以将某一个DIV或者BODY转成图片并且下载。

我们将DIV转成图片并且用64进制转换，再写一个方法去下载该图片

在做的过程中遇到 IE 不兼容 promise  这个时候我们用到工具

### bluebird.min.js 将其引入之后就没问题了 ###

### 资源 html2canvas.js and html2canvas.svg.js and bluebird.min.js ###

下载地址：http://download.csdn.net/download/qq\_37511501/10232976 资源

### html2canvas 使用 API：https://www.jianshu.com/p/6a07e974a7e8 ###

该资源有demo 亲测浏览器 谷歌和IE 其它没测

下面是使用方法，图片的宽高也可以自定义

// DIV id imgEchartsAndTable 是div ID
    html2canvas($("#imgEchartsAndTable"), {
        onrendered: function(canvas) {
            canvas.id = "mycanvas";
            var img = convertCanvasToImage(canvas);
            //调用下载方法 封装的下载方法，都在资源里面
            if(browserIsIe()){  //假如是ie浏览器 
                DownLoadReportIMG('MTTR趋势图.jpg',img.src);
            }else{
                download(img.src)  //下载图片
            }
        },
        background:'white'
    });

小猿的工作经验不是很丰富，大家见谅 ，下面直接上效果图

![了][SouthEast]

[SouthEast]: /images/20220601/0c74266d55df42a480e5678cbfaec857.png

发表评论取消回复

表情：

评论列表（有 0 条评论，319人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML学习：如何简单的把Table转成Div

![0075f9f79cf59ba12b5a2908cf078e9f.jpeg][] 许多网页设计师都喜欢，将两个或者多个容器等高的并排放置，并在里面展示每个容器的内容，就象

梦里梦外;/ 2024年03月27日 14:19/ 0 赞/ 58 阅读

相关【JavaScript】------ 实现HTML背景图片文字导出成图片（html2canvas）-示例代码

> 1. html2canvas.min.js 下载地址: http://www.bootcdn.cn/html2canvas/ > 2. [modernizr-2.8.3

短命女/ 2023年02月09日 14:28/ 0 赞/ 181 阅读

相关 python将svg的html转成png图片。

文章目录说明：实现：svg转png 报错：no library called "cairo" was found

以你之姓@/ 2023年01月17日 06:30/ 0 赞/ 257 阅读

相关 vue通过html2canvas来将div保存成图片

html2canvas链接：[官网][Link 1] html如下： <div class="char" id="char" ref="char"></div>

怼烎@/ 2022年12月07日 11:48/ 0 赞/ 255 阅读

相关 HTML技巧：如何简单的把Table转成Div

许多网页设计师都喜欢，将两个或者多个容器等高的并排放置，并在里面展示每个容器的内容，就象经典表格布局中的单元格控制几个栏目的位置，也喜欢容器的内容居中或顶部对齐显示。但是你又不

我会带着你远行/ 2022年12月04日 02:26/ 0 赞/ 240 阅读

相关 vue使用 html2canvas 导出页面，及将图片转成 pdf 格式

1. [下载 html2canvas][html2canvas]，[下载 jsPDF][jsPDF] vue引入的形式 npm install --save h

小灰灰/ 2022年09月07日 15:58/ 0 赞/ 388 阅读

相关 java poi 将word转成html，ppt转成图片

Java 容易被忽视的poi包 Poi提取技术是java中一大亮点。前几日在做项目时需要将ppt转化为图片，将word文档输出的功能。在百度搜了些资料，整理了一下，借用前

怼烎@/ 2022年07月31日 10:21/ 0 赞/ 342 阅读

相关 Pdf转成图片

public static void PDFtoImage(String filePath){ PDDocument pdf = null;

ゝ一世哀愁。/ 2022年06月04日 01:23/ 0 赞/ 367 阅读

相关 DIV转成图片并导出html2canvas.js

小猿目前接到一个需求就是把一个页面转成图片并导出上网查到各种工具所采用的就是html2canvas.js （里面代码没细看）这个工具相当不错，我们可以将某一个DIV或者

╰+攻爆jí腚メ/ 2022年06月01日 14:05/ 0 赞/ 320 阅读

相关 YAMLMapper 导出yaml java 对象转成yaml格式文件并导出

YAMLMapper 导出yaml java 对象转成yaml格式文件并导出文件我这里用的是YAMLMapper 导出，网上很多是通过Yaml生成的文件，特别恶心：1

╰+哭是因爲堅強的太久メ/ 2021年09月13日 17:40/ 0 赞/ 636 阅读