html-to-image 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
html-to-image 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
html-to-image 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !

软件简介

html-to-image 是一个使用 HTML5 canvas 和 SVG 从 DOM 节点生成图像的工具。

安装

npm install --save html-to-image

用法

/* ES6 */
import * as htmlToImage from 'html-to-image';
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';

/* ES5 */
var htmlToImage = require('html-to-image');

所有顶级函数都接受 DOM 节点和渲染选项,并返回一个由相应 dataURL 实现的承诺:

toPng

获取一个 PNG 图像 base64 编码的数据 URL 并立即显示它:

var node = document.getElementById('my-node');

htmlToImage.toPng(node)
  .then(function (dataUrl) {
    var img = new Image();
    img.src = dataUrl;
    document.body.appendChild(img);
  })
  .catch(function (error) {
    console.error('oops, something went wrong!', error);
  });

获取 PNG 图像 base64 编码的数据 URL 并下载它(使用download):

htmlToImage.toPng(document.getElementById('my-node'))
  .then(function (dataUrl) {
    download(dataUrl, 'my-node.png');
  });

toSvg

获取 SVG 数据 URL,但过滤掉所有<i>元素:

function filter (node) {
  return (node.tagName !== 'i');
}

htmlToImage.toSvg(document.getElementById('my-node'), { filter: filter })
  .then(function (dataUrl) {
    /* do something */
  });

toJpeg

保存并下载压缩的 JPEG 图像:

htmlToImage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
  .then(function (dataUrl) {
    var link = document.createElement('a');
    link.download = 'my-image-name.jpeg';
    link.href = dataUrl;
    link.click();
  });

 

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
暂无内容
发表于大前端专区
2016/10/14 16:03

html image标签小记

主要是用到了base64.我贴一下html 的代码.能直接另存为html文件来展示的. <html> <body> <img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAB4AIQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQo...

0
1
发表了博客
2018/06/15 11:07

HTML 图片(image) 左右滑动

1、需求 需要用简单动画的形式将一组图片进行展示,图片数量不固定 2、效果如下: 3、思路 说到动画,首先想到使用-webkit-transition:;因为这个最简单好用,首先将图片都放在左侧,然后根据图片数量计算每个图片的左边距,这样就可以依次排列了。然后就是设置图片所在div的padding值,是图片看起来有层次感。 点击"下一张"的时候,所有图片左边距增加固定单位左边距,根据图片的索引找到中间的图片,使其padding保持固定值,z-i...

0
0
发表了博客
2012/11/29 10:28

html中background-image属性的设置

对于图片,首先我们先想到是背景图片。因为我们许许多的装饰都是用背景图片来实现的。既然这样,那么就从CSS控制背景图片讲起吧。 1.CSS控制背景图片: 对于一个网页,我们开始设计的时候,可能没有过多的去想背景图到底是什么,因为大多都是设计背景色就可以了,原因吗,我想也很简单,因为它与前景音乐一样,对于网页的打开,速度会有一定的影响。不过对于一般的个人网站,或者个人博客而言,它对展现自己的个性,当然是不可或...

0
2
发表了博客
2019/08/02 15:01

wkhtmltox html快速转成image或pdf

安装测试 方式一: 官网下载安装包 wkhtmltox-0.12.5-1.centos7.x86_64.rpm https://wkhtmltopdf.org/ Linux 本地安装 yum localinstall wkhtmltox-0.12.5-1.centos7.x86_64.rpm 测试是否安装成功 wkhtmltopdf http://www.baidu.com /data1/baidu.pdf pdf 中文不显示问题: 打开windows c:\Windows\fonts\simsun.ttc拷贝到linux服务器/usr/share/fonts/目录下, 方式二 下载包 wget https://github.com/wkhtmltopdf/wkhtmltopdf/...

0
0
发表了博客
2020/05/11 19:09

在HTML / CSS中将图像转换为灰度 - Convert an image to grayscale in HTML/CSS

问题: Is there a simple way to display a color bitmap in grayscale with just HTML/CSS ? 有没有一种简单的方法可以用HTML/CSS显示灰度的彩色位图? It doesn't need to be IE-compatible (and I imagine it won't be) -- if it works in FF3 and/or Sf3, that's good enough for me. 它不需要与IE兼容(我想它不会) - 如果它在FF3和/或Sf3中工作,这对我来说已经足够了。 I know I can do it with both SVG and Canvas,...

0
0
发表了博客
2020/07/16 19:34

在HTML / CSS中将图像转换为灰度 - Convert an image to grayscale in HTML/CSS

问题: Is there a simple way to display a color bitmap in grayscale with just HTML/CSS ? 有没有一种简单的方法可以用HTML/CSS显示灰度的彩色位图? It doesn't need to be IE-compatible (and I imagine it won't be) -- if it works in FF3 and/or Sf3, that's good enough for me. 它不需要与IE兼容(我想它不会) - 如果它在FF3和/或Sf3中工作,这对我来说已经足够了。 I know I can do it with both SVG and Canvas,...

0
0
发表于大前端专区
2015/01/24 17:21

html中image标签如果不指定宽度高度

html中image标签如果不指定宽度高度 浏览器会读源文件的宽高如果图片较大则会停在这个地方不向下加载 应指定宽高: <img wiedth="20" height="30">

0
0
发表了博客
2019/03/15 17:36

将html转换成image图片png格式

import java.awt.Color; import java.awt.Dimension; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.io.ByteArrayOutputStream; import javax.imageio.ImageIO; import javax.swing.JTextPane; import javax.swing.border.EmptyBorder; import javax.swing.plaf.basic.BasicEditorPaneUI; /** * 将html转换成Image图片 * * * */ public...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
2 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部