github/download:https://github.com/niklasvh/html2canvas/releases

参考文章:基于html2canvas实现网页保存为图片及图片清晰度优化

html2canvas 可以将html页面保存为图片,相当于进行截图,可以应用于一些活动H5的海报生成。

可以下载好文件通过script标签引入,或者通过npm安装

npm install html2canvas

用法:

基于html2canvas.js可将一个元素渲染为canvas,只需要简单的调用html2canvas(element[, options]);即可。下列html2canvas方法会返回一个包含有<canvas>元素的promise

//targetEl 是需要截图的元素,可以是某一个DIV,也可以是当前整个document,options是参数项,可配置宽高之类的,也可省略不传,返回一个canvas的dom对象
html2canvas(targetEl,options).then(function(canvas) {
document.body.appendChild(canvas);
}); //之前做一个生成海报的H5的例子代码
var poster = document.querySelector('#wrap') //要生成海报的DIV,最外层的
var width = poster.offsetWidth;
var height = poster.offsetHeight;
var canvas = document.createElement("canvas");
var scale = 2;
canvas.width = width * scale;
canvas.height = height * scale;
canvas.getContext("2d").scale(scale, scale);
var opts = {
scale: scale,
canvas: canvas,
width: width,
height: height ,
backgroundColor:'transparent'
};
//生成页面截图
html2canvas(poster,opts).then(function(canvas) {
var context = canvas.getContext('2d');
var img = new Image();
img.src = canvas.toDataURL()
img.id = 'poster'
poster.appendChild(img); //生成海报插入body , 海报是透明的 ,层级最高, 盖在容器上面
});
 

转为图片: html2canvas是返回的一个canvas,要保存为图片的话就要转为img,可以通过canvas.toDataURL()方法将canvas转为base64

跨域设置:如果网页有跨域的图片会影响到截图图片的生成,可以将html2canvas 的 userCORS 改为true

var opts = {useCORS: true};

html2canvas(element, opts);

html2canvas JS截图插件的更多相关文章

  1. IText&Html2canvas js截图 绘制 导出PDF

    Html2canvas JS截图 HTML <div id="divPDF"> 需要截图的区域 </div> JS <script src=" ...

  2. js实现html转pdf+html2canvas.js截图不全的问题

    最近做项目中遇到要把整个页面保存为PDF文件,网上找了一下实现的方法都是 html2canvas.js+jsPdf.js 来实现.实现的过程是 先用html2canvas.js把html页面转成图片, ...

  3. html2canvas html截图插件

    以下我总结了一些注意事项,在代码中注释了,仅供参考. html2canvas.js点击付:完整使用的demo ,如下: <!DOCTYPE html><html lang=" ...

  4. html2canvas.js插件截图空白问题

    发现使用 html2canvas.js插件截图保存在前端很方便.学习过程中预计问题. 截图出现空白和截图不全. 问题原因: html2canvas.js插件截图是基于body标签的,如果body存在滚 ...

  5. html2canvas.js网页截图功能

    需求:将网页生成图片,用户自行长按图片进行保存图片,再分享朋友圈.其中,都可识别图中的二维码.(二维码过小会识别不出) 首先,先来科普一下微信网页识别二维码原理:截屏识别,当客户端发现用户在网页的im ...

  6. 使用html2canvas.js实现页面截图并显示或上传

    最近写项目有用到html2canvas.js,可以实现页面的截图功能,但遭遇了许多的坑,特此写一篇随笔记录一下. 在使用html2canvas时可能会遇到诸如只能截取可视化界面.截图没有背景色.svg ...

  7. js截图及绕过服务器图片保存至本地(html2canvas)

    今天要分享的是用html2canvas根据自己的需求生成截图,并且修复html2canvas截图模糊,以及绕过服务器图片保存至本地. 只需要短短的几行代码,就能根据所需的dom截图,是不是很方便,但是 ...

  8. 微信图片生成插件,页面截图插件 html2canvas,截图失真 问题的解决方案

    html2canvas 是一个相当不错的 JavaScript 类库,它使用了 html5 和 css3 的一些新功能特性,实现了在客户端对网页进行截图的功能.html2canvas 通过获取页面的 ...

  9. JS截图(html2canvas)

    JS截图(html2canvas) • 引入js <script type="text/javascript" src="js/html2canvas.js&quo ...

随机推荐

  1. thinkphp 控制器定义

    控制器和操作 一般来说,ThinkPHP的控制器是一个类,而操作则是控制器类的一个公共方法. 下面就是一个典型的控制器类的定义: <?php namespace Home\Controller; ...

  2. js面试总结3

    异步和单线程 题目: 1.同步和异步的区别? 2.一个关于setTimeout的笔试题. 3.前段使用异步的场景有哪些? 什么是异步? console.log(100) setTimeout(func ...

  3. 浅谈简单实现file控件的图片预览,裁剪和上传。

    1.图片预览之FileReader对象    FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用File或Blob对象指定要读取的文件或数据 ...

  4. JAVA判断一个对象生存还是死亡

    JAVA中判断一个对象是否死亡的算法有两种: 引用计数算法 可达性分析算法 一.引用计数算法所谓引用计数算法就是,给一个对象定义一个引用计数器,每当该对象被引用一次引用计数器就加1,如果一个对象的引用 ...

  5. 2019 Multi-University Training Contest 6 Snowy Smile (最大字段和变形)

    题意: 求一个子矩阵要求其矩阵内的合最大. 题解: 正常的求最大子矩阵的复杂度是O(n^3) 对于这一题说复杂度过不去,注意到这个题总共只有2000个点关键点在与这里优化 最大子矩阵可以压缩矩阵变成最 ...

  6. java_缓冲流(字节输入流)

    /** * java.iko.BufferedInputStream extends InputStream * BufferedInputStream:字节缓冲输入流 * 构造方法: * Buffe ...

  7. 保持SSH连接的linux服务器不断线

    目录 1. secureCRT和putty连接设置 2. 命令行设置 3. 服务器配置修改 4. 参考 使用ssh连接远程服务器的时候,如果长时间没有操作,远程连接就有可能中断.正在执行的程序和vim ...

  8. Android开发 多媒体提取器MediaExtractor详解_入门篇

    前言 MediaExtractor字面意思是多媒体提取器,它在Android的音视频开发里主要负责提取视频或者音频中的信息和数据流(例如将视频文件,剥离出音频与视频).本章博客将讲解一些入门简单的东西 ...

  9. jmeter做bbs作业时提示404错误

    在用jemter做bbs作业时候,注册成功后会跳转到主页,在写主页的脚本的时候,将fiddler抓到的url复制到路径下方“/bbs/forum.php”,但是第一次复制的时候在/bbs/forum. ...

  10. python Xls文档读写

    1.模块安装 2.python 代码 import xlrd import xlwt import datetime def set_style(name,height,format,bold=Fal ...