当前位置：首页 > 软件库 > Web应用开发 > HTML5开发相关 >

html-to-image

将 DOM 节点转换成图像的工具

授权协议 MIT

开发语言 TypeScript

所属分类 Web应用开发、 HTML5开发相关

软件类型开源软件

地区不详

投递者姚俊贤

操作系统跨平台

开源组织无

适用人群未知

软件概览

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();
  });

使用案例

html2canvas/dom-to-image + jspdf实现网页截屏

1. html2canvas($('#page')[0], { onrendered: function (canvas) { document.body.appendChild(canvas); var contentWidth = canvas.width;
【JS】节点截图的最终解决方案dom-to-image与html2canvas

说在前头 2020-06-03 新添注意事项若不需要极致的效果的话，请全篇使用html2canvas即可，不需要domtoimage了！正文这篇文章估计面向的人不多，所以我也不大篇幅的介绍这是干啥的了 … 起先，我是单纯想用domtoimage来解决我节点的截图的，但尝试了无数种方案，终是让我败下阵来原因有仨不使用代理且必须不能本地引入（当然前提是你图片服务器不在内网，也就是外网也能请求
domtoimage踩坑日记

不知道大家有没有在使用domtoimage中碰到过截图下来的文件经常损坏的问题由于项目中需要前端做截图并且进行文件上传或保存到本地这个需求。于是呢，我尝试了在csdn上搜索前端截图的插件，通过比较html2canva和domtoimage以后果断选择了domtoimage这个插件。主要是真的简单，调用就好啦。 import domtoimage from 'dom-to-image' dom
2019-2021 文本生成图片 Text To Image（T2I） Synthesis 论文整理

参考：文本生成图像！GAN生成对抗网络相关论文大汇总 A Survey and Taxonomy of Adversarial Neural Networks for Text-to-Image Synthesis 介绍了关于GAN生成对抗网络的相关Text-to-Image论文，将其分类为Semantic Enhancement GANs, Resolution Enhancement GANs
dom-to-image实现的网页截图

dom-to-image如何使用请参考https://blog.csdn.net/u012260672/article/details/79302465 下面我们就不废话了直接上演示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>echarts 测试</title>
html转图片并解决模糊问题

将下面的标签转成图片 <div class="neirong card-bg" id="neirong"> <div class="name">1111</div> <img src="http://q395jfyvp.bkt.clouddn.com/mbti_img/images/res/aaa.jpeg'" class="index_img"> <div class="erweim
H5 截屏 (canvas2html / dom-to-image)

场景描述：移动端调用 iscroll 插件的长页面实现完整截屏问题： dom-to-image 插件出现 input 的单选框和复选框选中项截屏生成的图片无值。解决方案：修改的方法： function copyUserInput() { if (original instanceof HTMLTextAreaElement) clone.innerHTML
html to image

<dependency> <groupId>gui.ava</groupId> <artifactId>html2image</artifactId> <version>0.9</version> </dependency> HtmlImageGenerator imageGenerator = new HtmlImageGenerator(); imageGenera

html-to-image

安装

用法

toPng

toSvg

toJpeg

同类工具

相关阅读

相关文章

相关问答

相关文档