前言

在用某讯浏览器时，发现遇到自己喜欢的网站除了可以网页另存为，还可以将网页保存为图片，这功能还是很不错的。Echarts 图表也提供了将图表转换为图片的功能。

近期遇到了同样的需求，领导要求每天汇报工作，工作都是通过系统统计为表格，需要截图，可是因为数据较多，图片不能一下子截全，于是迸发了这样的想法，将表格直接转换为图片。

下载脚本

本着效率的原则，决定借助互联网大法，最终选择了 HTML2CANVAS ，它是一个 JS 脚本，封装了 Canvas 组件。这个脚本在 GitHub 上进行了托管。

从 HTML2CANVAS 官网下载脚本，导入到项目中。

官方提供了三种方式：

Install NPM
```
npm install --save html2canvas
```
Install Yarn
```
yarn add html2canvas
```

脚本导入

http://html2canvas.hertzen.com/dist/html2canvas.min.js

官网案例

准备要转换为图片的HTML代码

<div id="capture" style="padding: 10px; background: #f5da55"><h4 style="color: #000; ">Hello world!</h4>
</div>

编写 JS 脚本

// html2canvas(element, options);
html2canvas(document.querySelector("#capture")).then(function(canvas) {document.body.appendChild(canvas);
});

调用 html2canvas 方法，方法有两个参数。执行函数中有一个参数canvas为<canvas></canvas>组件，将该组件直接添加到 body 中，当然也可以根据实际需求放到指定的元素中，例如：模态框等。

参数一：元素对象，要转换为图片的元素对象；

参数二：配置项

参数	默认值	描述
allowTaint	`false`	是否允许跨域图像污染画布
backgroundColor	`#ffffff`	画布背景色（如果未在 DOM 中指定）。设置 `null` 为透明。
canvas	`null`	在指定 `canvas` 元素中绘图，不是用默认 `canvas`
foreignObjectRendering	`false`	如果浏览器支持，是否使用外来对象呈现
imageTimeout	`15000`	加载图像超时（以毫秒为单位）。设置 `0` 禁用超时。
ignoreElements	`(element) => false`	从呈现中删除匹配元素。
logging	`true`	启用日志记录以进行调试
onclone	`null`	在克隆文档以进行呈现时调用的回调函数可用于修改将要呈现的内容，而不会影响原始源文档
proxy	`null`	用于加载跨源映像的代理的 URL。如果留空，则不会加载跨源图像。
removeContainer	`true`	是否清理 html2 扫描插件临时创建的克隆 DOM 元素
scale	`window.devicePixelRatio`	用于渲染的比例。默认为浏览器设备像素比。
useCORS	`false`	是否尝试使用 CORS 从服务器加载映像
width	`Element` width	`canvas` 宽
height	`Element` height	`canvas` 高
x	`Element` x-offset	裁剪画布 x 坐标
y	`Element` y-offset	裁剪画布 y 坐标
scrollX	`Element` scrollX	呈现元素时要使用的 x 滚动位置（例如，如果元素使用`position: fixed`)
scrollY	`Element` scrollY	呈现元素时要使用的 y 滚动位置（例如，如果元素使用`position: fixed`)
windowWidth	`Window.innerWidth`	呈现时要使用的窗口宽度，这可能会影响媒体查询等内容`Element`
windowHeight	`Window.innerHeight`	渲染时要使用的窗口高度，这可能会影响媒体查询等内容`Element`

图片模糊

添加如下配置项：

html2canvas(document.querySelector("#capture"),{scale: 2, // 处理图片模糊问题
}).then(function(canvas) {document.body.appendChild(canvas);
});

【技术】烦死了，HTML 怎么转图片？相关推荐

朋友说要被他女朋友烦死了，竟然是因为“小视频”
每天早上七点三十,准时推送干货 Photo by Chewy on Unsplash Hello,大家好,我是阿粉,前几天阿粉的一个朋友跟阿粉抱怨说自己快被女朋友烦死了,他说自己的女朋友报了一个舞蹈班 ...
【安装pycocotools，烦死了】
*************************************************** 码字不易,收藏之余,别忘了给我点个赞吧! *************************** ...
是SEO技术已死还是你不懂SEO？
是SEO技术已死还是你不懂SEO?现在各个博客的SEO文章同质化比较严重,因为SEO被大家都写烂了,写来写去无非就是内容.外链.用户体验.但我总是看到很多人评论说SEO技术已死,我实在忍不住想写一下 ...
JSP技术已死 ? (Java Server Page technology will die) ?
JSP技术已死 ? (Java Server Page technology will die) ? 自从JamesGosling开发Java语言,SUN大力推行基于Java的从前端到后端的完整的企业 ...
怎么取消苹果手机自动续费_为取消苹果手机收费、自动续费软件烦死了，别急，今天一招教会你...
前段时间因为要用手机做视频下载了三.四个视频的软件,但很多视频的软件是付费的,分为每月.每季或全年,有些收费是自动续费的,本来想先用一个月试用,结果有些人就知道为什么变成了自动续费了. 我用的一个叫乐 ...
前沿AI技术体验：从文字直接产生图片,结果真的震撼! 非常有意思！
前沿AI技术体验:从文字直接产生图片,结果真的震撼! 非常有意思! 背景最近这段时间,大火的文本转图片的模型,不管是 Open AI 的 DALL·E 还是 Goggle 的 Imagen. 单从公 ...
2021，烦死了，烦死了，烦死了！
铛铛铛铛铛,祝大家元宵节快乐呀! 快乐的同时也预示着,2021的年也要真正意义上的过去了. 忆往昔,五年前,你可能还是个职场新人,对工作充满敬畏,五年后,各种磨炼让你变成了职场"老油条&qu ...
android 之适配器与json对象解析技术的联用的进一步优化(解决图片错位)
ListView优化的模型示意图实例代码: 业务逻辑代码: package com.hsj.example.asyncloadxmldatademo08;import android.app.Pro ...
python数字识别关键技术_用Python从零开始设计数字图片识别神经网络--搭建基本架构...
从本节开始,我们用python把前几节讲解的神经网络原理实现出来.在最开始时,我们直接调用Kera框架,快速的构建一个能识别数字图片的神经网络,从本节开始,我们自己用代码将整个神经网络重新实现一遍,只 ...

【技术】烦死了，HTML 怎么转图片？

HTML 转图片

前言

下载脚本

官网案例

图片模糊

【技术】烦死了，HTML 怎么转图片？相关推荐

最新文章

热门文章