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。

HTML转图片的JS插件-rasterizeHTML.js相关推荐

js实现粘贴板js插件clipboard.js实现一键复制粘贴功能
js实现粘贴板js插件clipboard.js实现一键复制粘贴功能简介下载引入插件使用一个节点的复制多个节点的复制剪切文本框复制输入框简介 clipboard.js 提供了一种更好. ...
html灵活响应图片设置,jQuery轻量级响应式图片轮播插件ResponsiveSlides.js(仅1kb)
ResponsiveSlides.js ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQue ...
html页面点击图片名称查看图片------图片预览插件viewer.js使用
前言在做项目时,会遇到在前台展示附件详情,比如图片,word,pdf等.viewer.js 图片查看器,用来查看页面中的图片. 基本效果: Viewer.js的使用这是一个github工程,功能很 ...
html photoswipe原理,手机图片预览插件photoswipe.js使用总结
手机图片预览photoswipe,支持pc图片预览,多用于android,ios的手机图片预览. 在photoswipe官网有1.0.11的包下载,但是1.0.11这个版本,存在缺陷,在部分andro ...
强大的jQuery图片查看器插件Viewer.js
简介 Viewer.js 是一款强大的图片查看器 Viewer.js 有以下特点: 支持移动设备触摸事件支持响应式支持放大/缩小支持旋转(类似微博的图片旋转) 支持水平/垂直翻转支持图片移动 ...
php js 插件,超轻量级网页流布局JS插件Macy.js
今天给大家推荐一款非常好用的 Macy.js 插件,它是一款流布局JS插件,使用流布局来展示图片,这种排版方式特别适合展现大量图像的页面,而且Macy.js 插件仅仅只有4KB大小. Macy.js ...
免费而优秀的图表JS插件、js图表、html图表--百度的Echart、Highcharts、阿里的G2、Chart.js...
免费而优秀的图表JS插件 1.百度的Echart ECharts,缩写来自Enterprise Charts,是百度推出的一款开源的,商业级数据图表,它最初是为了满足百度公司商业体系里各种业务系统(如 ...
html5怎么兼容js 插件,Modernizr.js入门指南(HTML5CSS3浏览器兼容插件)
HTML5 和 CSS3 的快速发展,给我们带来了极大的便利,比如从此再也不用花费大量的时间只是为了设计一个圆角的效果. 但是!我们不能像控制机器一样来控制所有的人都一夜之间升级到现代浏览器,因为那些 ...
js打印html5,控制台打印文字效果js插件-typed.js
typed.js是一款模拟控制台打印文字效果的js插件.typed.js可以自由的控制要打印的文字,以及打印的速度等,可以制作出逼真的打印文字效果. 安装可以通过bower来安装typed.js插件 ...

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

HTML转图片的JS插件-rasterizeHTML.js相关推荐

最新文章

热门文章