本文主要介绍一款好用的库,如何将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元素转成图片)的更多相关文章

  1. 面试官:JavaScript如何实现数组拍平(扁平化)方法?

    面试官:JavaScript如何实现数组拍平(扁平化)方法? 1 什么叫数组拍平? 概念很简单,意思是将一个"多维"数组降维,比如: // 原数组是一个"三维" ...

  2. 前端必须了解的布局常识:普通流(normal flow)

    目录 一.概述 二.块级元素和内联元素 常见的块级元素 BFC 常见的行内元素 IFC 三.哪些情况会脱离普通流 浮动 绝对定位 固定定位 display:none 四.总结 五.参考资料 一.概述 ...

  3. 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 ...

  4. Chrome开发者工具之JavaScript内存分析

    阅读目录 对象大小(Object sizes) 对象的占用总内存树 支配对象(Dominators) V8介绍 Chrome 任务管理器 通过DevTools Timeline来定位内存问题 内存回收 ...

  5. [转载]JavaScript内存分析

    https://github.com/CN-Chrome-DevTools/CN-Chrome-DevTools/blob/master/md/Performance-Profiling/javasc ...

  6. 2014年十个优秀的免费CDN加速服务-国内和国外免费CDN

    这是一篇总结近几年来网络上出现了各类免费CDN服务的文章,文章本来应该早就发出来的,但是因为近期的各种原因一直拖到现在.之前部落已经总结了近几年来的优秀免费空间,新手朋友不必在茫茫“网”海中寻找免费空 ...

  7. Android中直播视频技术探究之---摄像头Camera视频源数据采集解析

    一.前言 在视频直播中一般都是两种视频数据源,一个是摄像头数据,一个是录制桌面数据,而一般来说美女妹子直播都是来自于摄像头数据,游戏直播都是录制桌面数据的,那么今天就来看看第一个数据源数据采集分析,A ...

  8. 前端技术-svg简介与snap.svg.js开源项目的使用

    前言-为什么学习snap.svg.js 前阵子webAPP的技术群里有人感觉到svg+animate的形式感觉很炫,矢量图任意放大且不需要下载图片,并且在手机端效果流畅. (矢量图与位图最大的区别是, ...

  9. [iOS]手把手教你实现微信小视频

    本文个人原创,转载请注明出处,谢谢. 前段时间项目要求需要在聊天模块中加入类似微信的小视频功能,这边博客主要是为了总结遇到的问题和解决方法,希望能够对有同样需求的朋友有所帮助. 效果预览: 这里先罗列 ...

随机推荐

  1. centos下安装memcached并设置开机自动启动-两种方法

    方法一: 安装memcachedyum install memcached 启动服务并初始化service memcached start -p 11211 -l 127.0.0.1 -d 设置mem ...

  2. SDUT OJ 数据结构实验之图论六:村村通公路(最小生成树)

    数据结构实验之图论六:村村通公路 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descri ...

  3. C++ #include " " 与 <>有什么区别?

    #include <> 和 #include "" 都会在实现定义的位置查找文件,并将其包含. 区别是若 #include "" 查找成功,则遮蔽 ...

  4. AF 与 PF区别

    AF 表示ADDRESS FAMILY 地址族 PF 表示PROTOCL FAMILY 协议族 Winsock2.h中#define AF_INET 0#define PF_INET AF_INET ...

  5. su切换用户报错cannot set user id: Resource temporarily unavailable

    su: cannot set user id: 资源暂时不可用   登录root su - tomcat 报错: cannot set user id: Resource temporarily un ...

  6. Nginx负载均衡详解

     upstream mysvr {  server 192.168.10.121:3333; server 192.168.10.122:3333; } server { .... location ...

  7. C++_异常2-返回错误码

    一种比异常终止更灵活的办法是,使用函数的返回值来指出问题. 例如,ostream类的get(void)成员通常返回下一个输入字符的ASCII码,但到达文件尾时,将返回EOF. 对hmean()来说,这 ...

  8. ASP.NET 设计模式分为三种类型

    设计模式分为三种类型,共23类.  一.创建型模式:单例模式.抽象工厂模式.建造者模式.工厂模式.原型模式.      二.结构型模式:适配器模式.桥接模式.装饰模式.组合模式.外观模式.享元模式.代 ...

  9. 字典序的第K小数字

    今天zyb参加一场面试,面试官听说zyb是ACMer之后立马抛出了一道算法题给zyb:有一个序列,是1到n的一种排列,排列的顺序是字典序小的在前,那么第k个数字是什么?例如n=15,k=7, 排列顺序 ...

  10. 1076 Wifi密码 (15 分)

    下面是微博上流传的一张照片:“各位亲爱的同学们,鉴于大家有时需要使用 wifi,又怕耽误亲们的学习,现将 wifi 密码设置为下列数学题答案:A-1:B-2:C-3:D-4:请同学们自己作答,每两日一 ...