HTML2CANVAS使用总结

前言

最近遇到了个功能，要把表单转化成图片来保存，这让我想到了一个插件HTML2CANVAS，这里给大家分享下它的用法和我使用的过程

html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。

它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时，将采用Flashcanvas或ExplorerCanvas技术代替实现。

以下浏览器能够很好的支持该脚本：Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的浏览器。

html2canvas可以通过获取HTML的某个元素，然后生成Canvas，能让用户保存为图片。这个项目主要是生成canvas，那么我们如果需要生成图片还需要将它转化为图片地址。

基本语法

html2canvas(element, options);

html2canvas(document.body, {onrendered: function(canvas) {var url = canvas.toDataURL();//图片地址document.body.appendChild(canvas);},width: 300,height: 300
});

或者使用ES6的promise

 //两个参数：所需要截图的元素id，截图后要执行的函数， canvas为截图后返回的最后一个canvashtml2canvas(document.getElementById('id')).then(function(canvas) {document.body.appendChild(canvas);});

可用参数

参数名称	类型	默认值	描述
allowTaint	boolean	false	Whether to allow cross-origin images to taint the canvas---允许跨域
background	string	#fff	Canvas background color, if none is specified in DOM. Set undefined for transparent---canvas的背景颜色，如果没有设定默认透明
height	number	null	Define the heigt of the canvas in pixels. If null, renders with full height of the window.---canvas高度设定
letterRendering	boolean	false	Whether to render each letter seperately. Necessary if letter-spacing is used.---在设置了字间距的时候有用
logging	boolean	false	Whether to log events in the console.---在console.log()中输出信息
proxy	string	undefined	Url to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.---代理地址
taintTest	boolean	true	Whether to test each image if it taints the canvas before drawing them---是否在渲染前测试图片
timeout	number	0	Timeout for loading images, in milliseconds. Setting it to 0 will result in no timeout.---图片加载延迟，默认延迟为0，单位毫秒
width	number	null	Define the width of the canvas in pixels. If null, renders with full width of the window.---canvas宽度
useCORS	boolean	false	Whether to attempt to load cross-origin images as CORS served, before reverting back to proxy--这个我也不知道是干嘛的

例子

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>html2canvas example</title><script type="text/javascript" src="html2canvas.js"></script>
</head>
<script type="text/javascript">
function takeScreenshot() {console.log('test');html2canvas(document.getElementById('view'), {onrendered: function(canvas) {document.body.appendChild(canvas);},// width: 300,// height: 300});
}
</script>
<body><div id="view" style="background:url(test.jpg) 50%; width: 700px; height: 500px;"><input type="button" value="截图" onclick="takeScreenshot()"></div>
</body></html>

如何在vue+ts环境调用

前提条件

项目安装html2canvas，jqnpm install html2canvas
npm install jquery

HTML部分

<div id="#printArea">需要打印的区域</div>　　<div class="print"><iframe id='iframe' style="display:none;"></iframe>
</div>

JS部分

页面引入 html2canvas、jqueryimport html2canvas from 'html2canvas';import $ from 'jquery';// 打印private onPrint() {const el: any = $('#printArea')[0];const iframe = window.frames[0];iframe.document.close();html2canvas(el, {scale: 1,width: el.offsetWidth,height: el.offsetHeight,allowTaint: true,useCORS: true,}).then(function (canvas) {const context: any = canvas.getContext('2d');context.mozImageSmoothingEnabled = false;context.webkitImageSmoothingEnabled = false;context.msImageSmoothingEnabled = false;context.imageSmoothingEnabled = false;const src64: any = canvas.toDataURL();const newImg: any = document.createElement('img');newImg.crossOrigin = 'Anonymous';newImg.src = src64;iframe.document.write('<img src="' + newImg.src + '" />');setTimeout(() => {iframe.window.print();});});}

效果图

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

HTML2CANVAS使用总结相关推荐

canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
html转换pdf 分页,(html2canvas jspdf)html转pdf带分页
1.下载npm包 npm i html2canvas jspdf -s 2.页面引入 import html2canvas from 'html2canvas'; import jsPDF from ...
移动端 html2canvas 踩坑记录
背景最近在做的微信 html5 项目有个需求:页面包含一张大的背景图片 + 一个用户的链接二维码图片拼成一张图片,让用户长按保存的时候,可以把整个页面都保存起来,而不是只保存二维码. 思考 1. ...
html2canvas如何在元素隐藏的情况下生成截图
html2canvas官网地址:http://html2canvas.hertzen.com/ github地址:https://github.com/niklasvh/html2canvas/ 从官 ...
Javascript 将html转成pdf,下载,支持多页哦（html2canvas 和 jsPDF）
最近碰到个需求,需要把当前页面生成pdf,并下载.弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :) 项目源码地址:https://github.com/linwalker/... html ...
页面整体居中左右出现白边html,html2canvas生成图片出现白边儿的解决方法
将页面上的内容生成图片,并显示到弹出层中: 不废话,解决方法主要是再js中,html2canvas 方法中,全部拷贝过去就能用 html // 需要生成图片的内容区域生成图片分享给朋友长按图片保 ...
html2canvas 截图div_浏览器端网页截图方案详解
简介剖析流行的截图插件 html2canvas 的实现方案,探索其功能上的一些不足之处及不能正确截取的一些场景,比如不支持 CSS 的 box-shadow 截取情况等.探索一种新的实现方式,能够避 ...
JS 使用html2canvas实现截图功能的问题记录和解决方案
JS 使用html2canvas实现截图功能的问题记录和解决方案参考文章: (1)JS 使用html2canvas实现截图功能的问题记录和解决方案 (2)https://www.cnblogs.co ...
html2canvas图片截图截不到图像的问题解决
html2canvas图片截图截不到图像的问题解决参考文章: (1)html2canvas图片截图截不到图像的问题解决 (2)https://www.cnblogs.com/netcorner/p/ ...
html2canvas在Vue项目踩坑-生成图片偏移不完整
背景最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来. 在项目遇到的坑是图片能生成,可是生成的图片总是 ...