3
HTML转图片的JS插件-rasterizeHTML.js
source link: https://www.leixuesong.com/3159
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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);
rasterizeHTML.drawHTML('Some ' + '<span style="color: green; font-size: 20px;">HTML</span>' + ' with an image', canvas);
注意：drawURL()加载的URL必须是同域名URL或者是支持跨域的URL。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK