HTML转图片的JS插件-rasterizeHTML.js

在WEB前端工作中，有时需要实现对页面生成缩略图的功能。rasterizeHTML.js就可以将HTML渲染到浏览器的canvas中，直接用JS插件达到生成图片的效果。rasterizeHTML.js为我们提供了三个方法：rasterizeHTML.drawURL( url [, canvas] [, options] )根据URL生成canvas，

rasterizeHTML.drawHTML( html [, canvas] [, options] )根据HTML代码生成，

rasterizeHTML.drawDocument( document [, canvas] [, options] )根据文档生成。下面详细的介绍一下HTML转图片的JS插件-rasterizeHTML.js。

1、引入rasterizeHTML.js

<script type="text/javascript" src="rasterizeHTML.allinone.js"></script>

2、创建一个canvas，rasterizeHTML.js生成图片

var canvas = document.getElementById("canvas");
rasterizeHTML.drawHTML('Some ' + '<span style="color: green; font-size: 20px;">HTML</span>' + ' with an image', canvas);

注意：drawURL()加载的URL必须是同域名URL或者是支持跨域的URL。