网页html生成图片的常用方案

如果您有一个需求是将网页生成一个快照的图片，然后需要用到该图片上传或者发送给他人的这样的需求，那么你会怎么做呢？聪明的你可能会想到canvas是否可以生成一个这样的图片呢？没错，今天就给大家推荐一个简单又好用的工具html2canvas。

准备文件

进入该官方网站点击此处，在官网首页开始下载资源文件，html2canvas.js或者html2canvas.min.js皆可。
将该资源文件引入您需要使用该功能的页面中。

开始使用

给您想转换成图片的盒子标签上添加一个唯一id，这样便于找到该DOM节点。
按照官方文档相关参数设置并添加代码在合适的地方来进行图片转换。

html2canvas(document.querySelector("#app")).then(canvas => {document.body.appendChild(canvas)
});

详细使用

相关参数设置可参考该官方文档，根据需要设置即可。

兼容性介绍

Firefox 3.5+
Google Chrome
Opera 12+
IE9+
Edge
Safari 6+

关于vue-cli中使用

最新版本应该可以直接通过yarn或者npm引入了，可参照官网首页介绍

npm install --save html2canvas

或者

yarn add html2canvas

如果有相关问题，还可参考另一篇文章点此查看

Diboot - 简单高效的轻代码开发框架

网页html生成图片的常用方案相关推荐

Ubuntu分区方案（菜鸟方案、常用方案和进阶方案）
菜鸟方案 "/"与swap两个分区就可以应付绝大多数的应用常用方案分为3个区 1. 挂载点/:主分区:安装系统和软件:大小为30G:分区格式为ext4: 2. 挂载点/home ...
Ubuntu分区方案常用方案
Ubuntu分区方案常用方案分为3个区挂载点/:主分区:安装系统和软件:大小为30G:分区格式为ext4: 挂载点/home:逻辑分区:相当于"我的文档":大小为硬盘剩下的; ...
负载均衡的几种常用方案
负载均衡的几种常用方案总结下负载均衡的常用方案及适用场景: Round Robin 轮询调度以轮询的方式依次请求调度不同的服务器: 实现时,一般为服务器带上权重:这样有两个好处: 针对服务器的性能 ...
python代码弄成网站_原创：用python把链接指向的网页直接生成图片的http服务及网站(含源码及思想)...
原创:用python把链接指向的网页直接生成图片的http服务及网站(含源码及思想) 总体思想: 希望让调用方通过 http调用传入一个需要生成图片的网页链接生成一个网页的图片并返回图片链接最终调用 ...
原创：用python把链接指向的网页直接生成图片的http服务及网站(含源码及思想)...
原创:用python把链接指向的网页直接生成图片的http服务及网站(含源码及思想) 总体思想: 希望让调用方通过 http调用传入一个需要生成图片的网页链接生成一个网页的图片并返回图片链接 ...
5W无线充非认证版便宜实用无线充电器常用方案
5W无线充非认证版便宜实用无线充电器常用方案 5W无线充非认证版便宜实用无线充电器常用方案用于手机5W无线充电发射方案 FS68001公司的STWBC是一款用于无线电池充电器发送器的数字控制器ic, ...
怎样在html网页中加入一段话,网页制作中十分常用的十一句话
网页制作中非常常用的十一句话整理了一些比较实用的网站设计时常用的代码,代码很简单,只有一行,不需要理解多高深的JS或者HTML知识,按照提示把相应的代码加入到网页模板中即可得到你想要的效果. 1:进 ...
计算机学院网页设计大赛策划书,校园网页设计大赛策划书方案
网站伴随着网络的快速发展而快速兴起,作为上网的主要依托,由于人们使用网络的频繁而变得非常的重要.由于企业需要通过网站呈现产品.服务.理念.文化,或向受众提供某种功能服务.现在,就来看看以下三篇关于校园 ...
前端网页背景与文字配色方案
前端网页背景与文字配色方案几种比较和谐的文字背景颜色搭配 - GlGh的日子 - CSDN博客 https://blog.csdn.net/leniz/article/details/579494 ...
机器人的避障常用方案
系列文章目录提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 TODO:写完再整理文章目录系列文章目录前言 1.3D 结构光避障 2.单目视觉避障.双目视觉避障 3.点激光雷达 ...

网页html生成图片的常用方案

准备文件

开始使用

详细使用

兼容性介绍

关于vue-cli中使用

网页html生成图片的常用方案相关推荐

最新文章

热门文章