给HTML拍个照(如何将html元素转成图片)
本文主要介绍一款好用的库,如何将HTML生成图片。
1、简述
最近在做的项目中,需要将界面转换成模板保存下来,本来想使用自适应布局完成,但是页面较复杂,模板较多,生成的模板使用过多的HTML标签,于是想着能否将HTML生成图片,保存及获取的时候直接使用图片,于是网上查了下,发现已经有人做好了轮子:html2canvas.js,直接拿来滚滚就好啦~
2、使用
安装
npm install html2canvas --save-dev
html转为canvas
html2canvas.js
可将html元素渲染为 canvas
,这里只需调用 html2canvas(element[, options])
即可。
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});
canvas转image
基于原生canvas的 toDataURL
方法可以将 canvas
输出为data: URI类型的图片地址,再将该图片地址赋值给元素的src属性即可~
html2canvas($dom, {
useCORS: true, // 【重要】开启跨域配置
scale: 2, // canvas放大倍数,增加图片的清晰度
logging: false // 是否开启日志
}).then(canvas => {
let imageSrc = canvas.toDataURL("image/png");
})
也可以使用第三方库Canvas2Image.js,调用其 convertToJPEG
方法即可。它也是基于canvas.toDataURL的封装,相比原生的canvas API对于转为图片的功能上考虑更为具体适合在项目中使用。
html2canvas($dom).then(canvas => {
let imageSrc = canvas2Image.convertToJPEG(canvas, 100, 100).getAttribute('src');
})
一个坑
canvas对于图片资源的请求有 同源限制,如果画布中包含跨域的图片资源则会污染画布,造成含有图片的部分一片空白,因此必须使用同源的图片哦~
给HTML拍个照(如何将html元素转成图片)的更多相关文章
- 面试官:JavaScript如何实现数组拍平(扁平化)方法?
面试官:JavaScript如何实现数组拍平(扁平化)方法? 1 什么叫数组拍平? 概念很简单,意思是将一个"多维"数组降维,比如: // 原数组是一个"三维" ...
- 前端必须了解的布局常识:普通流(normal flow)
目录 一.概述 二.块级元素和内联元素 常见的块级元素 BFC 常见的行内元素 IFC 三.哪些情况会脱离普通流 浮动 绝对定位 固定定位 display:none 四.总结 五.参考资料 一.概述 ...
- Codeforces Round #388 (Div. 2) A,B,C,D
A. Bachgold Problem time limit per test 1 second memory limit per test 256 megabytes input standard ...
- Chrome开发者工具之JavaScript内存分析
阅读目录 对象大小(Object sizes) 对象的占用总内存树 支配对象(Dominators) V8介绍 Chrome 任务管理器 通过DevTools Timeline来定位内存问题 内存回收 ...
- [转载]JavaScript内存分析
https://github.com/CN-Chrome-DevTools/CN-Chrome-DevTools/blob/master/md/Performance-Profiling/javasc ...
- 2014年十个优秀的免费CDN加速服务-国内和国外免费CDN
这是一篇总结近几年来网络上出现了各类免费CDN服务的文章,文章本来应该早就发出来的,但是因为近期的各种原因一直拖到现在.之前部落已经总结了近几年来的优秀免费空间,新手朋友不必在茫茫“网”海中寻找免费空 ...
- Android中直播视频技术探究之---摄像头Camera视频源数据采集解析
一.前言 在视频直播中一般都是两种视频数据源,一个是摄像头数据,一个是录制桌面数据,而一般来说美女妹子直播都是来自于摄像头数据,游戏直播都是录制桌面数据的,那么今天就来看看第一个数据源数据采集分析,A ...
- 前端技术-svg简介与snap.svg.js开源项目的使用
前言-为什么学习snap.svg.js 前阵子webAPP的技术群里有人感觉到svg+animate的形式感觉很炫,矢量图任意放大且不需要下载图片,并且在手机端效果流畅. (矢量图与位图最大的区别是, ...
- [iOS]手把手教你实现微信小视频
本文个人原创,转载请注明出处,谢谢. 前段时间项目要求需要在聊天模块中加入类似微信的小视频功能,这边博客主要是为了总结遇到的问题和解决方法,希望能够对有同样需求的朋友有所帮助. 效果预览: 这里先罗列 ...
随机推荐
- php 镜像richarvey/nginx-php-fpm的ngnix配置
1.遇到错误option error_page 405 =200 $request_uri; location ~ ^/(json)/ { # root /data/website/xxxx.com/ ...
- setinterval 里面的方法记得加引号
setinterval 里面的方法记得加引号 否则不执行
- UML类图和时序图符号
看懂UML类图和时序图 https://www.cnblogs.com/me115/p/4092632.html 内容目录: 从一个示例开始 类之间的关系 时序图 附录:<图说设计模式> ...
- pycharm运行Pytest,有没有将Pytest写入Python代码中的区别
初学pytest. 将pytest写进Python代码中 不同运行方式都可正常运行 =======================**********************========= ...
- P4381 [IOI2008]Island
传送门 显然题目给的图构成一个基环树森林 对于每个基环树单独考虑,显然每个都走直径是最优的 考虑如何求出基环树的直径 把直径分为两种情况考虑,首先可以找出环 因为直径可能不在环边上,所以对每个环上节点 ...
- ACM 计算几何向量
向量 简介注意事项基本计算 加减法 ~ 示例代码 长度 ~ 示例代码 数乘 ~ 示例代码 点积 应用 ~ 示例代码 叉积 ~ 示例代码 性质与应用 经典题目 向量旋转 操作目的 模板代码 简介 向量, ...
- PIE SDK栅格RGB渲染
1. 功能简介 RGB色彩模式是一种颜色标准,是通过对红(R).绿(G).蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红.绿.蓝三个通道的颜色,这个标准几乎包 ...
- PIE SDK坐标系选择
1. 功能简介 坐标系选择可以查看当前图层的坐标系信息和显示其他坐标系的信息,下面将基于PIE SDK介绍如何实现坐标系选择功能. 2. 功能实现说明 2.1. 实现思路及原理说明 第一步 加载图层并 ...
- 9 Essential Free Linux Transcoders(转码)
需要转码的理由千万种,所幸除了硬件转码之外,Linux平台还有很多开源工具可以借鉴,如该文章所示: 原文来自:9 Essential Free Linux Transcoders(http://www ...
- 前端性能优化插件 --- PageSpeed Insights
对于前端工程师来说,前端性能优化始终都是非常重要的一环,它决定了用户体验, 决定了一个用户是否愿意在页面的加载浪费时间, 从而丢失用户. 所以前端性能优化是非常重要的. 下载地址 https://ch ...