- 综合排序
- 最热优先
- 最新优先
- 来自专栏kifroom
dom-to-image失真，修改生成后的清晰度
最终换个库来实现需求 dom-to-image github: https://github.com/tsayen/dom-to-image 后来发现了基于此库的新项目 dom-to-image-more 改造 项目中使用发现清晰度有点低，客户也指出来，但这个库貌似并没有相关配置可以实现，无奈只得开始对其进行修改 文件替换 文件路径： node_modules\dom-to-image\src\dom-to-image.js
4K30编辑于 2023-03-10 - 来自专栏有意思的前端世界
dom-to-image库是如何将html转换成图片的
dom-to-image库可以帮你把dom节点转换为图片，它的核心原理很简单，就是利用svg的foreignObject标签能嵌入html的特性，然后通过img标签加载svg，最后再通过canvas绘制 虽然原理很简单，但是dom-to-image毕竟也有1000多行代码，所以我很好奇它具体都做了哪些事情，本文就来详细剖析一下，需要说明的是dom-to-image库已经六七年前没有更新了，可能有点过时，
2.7K10编辑于 2024-02-12 - 来自专栏M不作声
在网页如何实现截图的功能
那么我们如何实现页面生成图片，也就是截图的功能呢 dom-to-image dom-to-image是一个可以将任意dom节点转换为图像的js库。 安装命令： npm install dom-to-image 使用 获取png格式图片base64编码的data Url并显示 import domtoimage from 'dom-to-image' pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4); } } }); 实现原理 dom-to-image
2.2K50发布于 2021-03-05 - 来自专栏后端码匠
html2canvas: 如何把 HTML 转化为图片?
dom-to-image[2]: Generates an image from a DOM node using HTML5 canvas 参考资料 [1] 那你知道 DOM 转为图片的原理是什么吗？ : https://github.com/shfshanyue/Daily-Question/issues/437 [2] dom-to-image: https://github.com/tsayen /dom-to-image
3.1K10发布于 2021-09-02 - 来自专栏有意思的前端世界
探索如何将html和svg导出为图片
使用html2canvas、dom-to-image等库 使用html2canvas： import html2canvas from 'html2canvas' const useHtml2canvas ，就是foreignObject标签里的文本样式会丢失： 这应该是html2canvas的一个bug，不过看它这issues数量和提交记录： 指望html2canvas改是不现实的，于是又尝试使用dom-to-image ： import domtoimage from 'dom-to-image' const dataUrl = domtoimage.toPng(el) 发现dom-to-image更不行，导出完全是空白的 后来有人建议使用dom-to-image-more，粗略看了一下，它是在dom-to-image库的基础上修改的，尝试了一下，发现确实可以，于是就改为使用这个库，然后又有人反馈在一些浏览器上导出节点内容是空的 库的实现原理，发现它也是通过将dom节点添加到svg的foreignObject标签中实现将html转换成图片的，那么就很搞笑了，我本身要转换的内容就是一个嵌入了foreignObject标签的svg，使用dom-to-image
2.7K21编辑于 2023-09-11 - 来自专栏开源服务指南
将网页 DOM 转换为图像：分享刻不容缓
tsayen/dom-to-image Stars: 9.5k License: NOASSERTION dom-to-image 是一个可以将任意 DOM 节点转换为矢量 (SVG) 或光栅 (PNG 相关链接 https://github.com/niklasvh/html2canvas https://github.com/tsayen/dom-to-image https://github.com
2K30编辑于 2023-08-10 - 来自专栏趣谈前端
前端如何实现一键截图功能?
单位, 或者有一些图片背景的问题, 导致html2canvas并没有很好的work, 而且渲染还原度和清晰度都有问题, 所以笔者暂时没有深入研究(不过这些问题可以通过修改库本身解决), 后面笔者直接用了dom-to-image , 发现使用起来很简单, 而且几乎不会出现上面说的这些问题, 所以笔者果断采用了dom-to-image, 后面看了该库的源码, 感觉写的也很优雅易懂, 后期做二次开发应该问题不是很大. 我们可以看看其官网的基本使用: // 引入 import domtoimage from 'dom-to-image'; // 生成图片 domtoimage.toPng(node) .then
1.8K10发布于 2020-11-25 - 来自专栏【腾讯云开发者】
2种方式！带你快速实现前端截图
二、相关技术 前端要实现页面截图的功能，现在比较常见的方式是使用开源的截图npm库，一般使用比较多的npm库有以下两个： dom-to-image: https://github.com/tsayen /dom-to-image html2canvas: https://github.com/niklasvh/html2canvas 以上两种常见的npm库，对应着两种常见的实现原理。 三、 dom-to-image dom-to-image库主要使用的是SVG实现方式，简单来说就是先把DOM转换为SVG然后再把SVG转换为图片。 （一）使用方式 首先，我们先来简单了解一下dom-to-image提供的核心api，有如下一些方法： toSvg (dom转svg) toPng (dom转png) toJpeg (dom转jpg) toBlob 六、 小结 本文针对前端截图实现的方式，对两个开源库dom-to-image和html2canvas的使用和原理进行了简单的使用方式、实现原理方面，进行介绍和分析。
4.9K21编辑于 2022-03-03 - 来自专栏趣谈前端
如何设计H5编辑器中的模版库并实现自动生成封面图
上面基本实现了整个模版库的保存流程, 接下来我们实现保存预览图片的细节.由于我们是基于页面元素生成预览图, 所以需要前端能将dom转化为图片, 这里笔者调研了2个比较知名的库: html2canvas dom-to-image 因为html2canvas现在还处于实验阶段, 而且笔者身边盆友用欧之后确实有写不可描述的bug,笔者分析了dom-to-image, 基本能满足目前的需求,所以我们直接用它来实现. 我们直接先看代码: import domtoimage from 'dom-to-image'; // ...其他库 // 将dom转化为图片逻辑 const generateImg = (cb) =
1.5K61发布于 2020-10-30 - 来自专栏日常记录
移动端H5页面截图
html2canvas 优点： 1.使用人数多，资料更全 缺点： 1.感觉不怎么维护更新了 domtoimage 官方地址【github例子很全了】：https://github.com/tsayen/dom-to-image 使用方便 缺点： 1.新控件，使用人数少,资料不全 2.IOS手机不能截图，污染了canvas.toDataURL会报错【目前还没解决】（参考链接：https://github.com/tsayen/dom-to-image
3.7K50发布于 2019-07-01 - 来自专栏九旬大爷
# 浏览器截图方案分析
以下是我整理三种截图方案： html2canvas dom-to-image webRTC # html2canvas html2canvasopen in new window 用的比较广泛的前端截图方案 }) .catch((err) => { console.log("html2canvas err", err); }); }; # dom-to-image
1.2K20编辑于 2023-10-19 - 来自专栏全栈前端精选
JS 实现网页截屏五种方法
主要看了以下几个： PhantomJS Puppeteer(chrome headless) SlimerJS dom-to-image html2canvas 测试的网页使用了WebGL技术，所以下面的总结会和 dom-to-image dom-to-image：前端截屏的开源库。工作原理是： SVG的foreignObject标签可以包裹任意的html内容。
8.7K30发布于 2020-12-31 - 来自专栏编程微刊
9个JavaScript图像处理库，收藏好留备用
Demo：http://fabricjs.com/ Github：https://github.com/fabricjs/fabric.js star:18.7k 9：dom-to-image
3.4K20发布于 2021-05-24 - 来自专栏趣谈前端
手把手教你撸一个能生成抖音风格动图的gif制作平台
笔者的思路主要采用的flash软件的关键帧动画的实现, 具体流程如下: 图中我们涉及到了几个有意思的插件, 笔者在H5-Dooring项目中也用到过,分别为: dom-to-image —— 转门将 dom转化为图片的库 gif.js —— 将多张图片转化为gif动图 实现过程中由于dom-to-image产生图片的过程是异步的, 但是我们要将所以图片生成完之后才能传给gif.js, 这里笔者用了promise.all
1.2K20发布于 2020-11-25 - 来自专栏前端大白专栏
原 html2canvas解决字体渐变
这两天有个需求,需要保存页面的dom元素为图片到本地,之前没有做过类似的效果,通过github搜索了一下,找到两个github库, 一个为domtoimage:https://github.com/tsayen/dom-to-image
8K51发布于 2018-06-08 - 来自专栏前端
前端实战：零依赖的网页截图新神器SnapDOM入门指南
它与传统的html2canvas和dom-to-image不同，完全基于浏览器原生API构建，没有任何外部依赖。 它以其卓越的性能、完美的样式支持和简洁的API，成为了html2canvas和dom-to-image的更好的选择。大家如果使用过程中有啥问题的话欢迎评论区聊聊！
1.2K20编辑于 2025-09-19 - 来自专栏Web 技术
面试官：请用纯 JS 实现，将 HTML 网页转换为图像
我想到的第一个想法是使用第三方库，但像dom-to-image或使用Chrome Headless，如Puppeteer。那如何使用纯Javascript解决这种需求呢？
2.1K41编辑于 2023-10-07 - 来自专栏前端自习课
【Web技术】929- 前端海报生成的不同方案和优劣
五、总结 无特殊情况时，pc下使用dom-to-image即可。 七、参考 【JS】节点截图的最终解决方案dom-to-image与html2canvas：https://blog.csdn.net/Mcky_Lo...
1.8K40发布于 2021-04-26 - 来自专栏趣谈前端
总结100+前端优质库,让你成为前端百事通
「SortableJS」 功能强大的 JavaScript 拖拽库 图形/图像处理库 「html2canvas」 一个强大的使用 js 开发的浏览器网页截图工具 「dom-to-image」 一个可以将任意 一个基于弹簧物理学的动画库 react-text-loop-next 文字轮播动画 图像处理 react-image-crop 强大的图片裁切库 react-sparklines 基于数据自动生成趋势线 dom-to-image
4.1K20编辑于 2022-02-09 - 来自专栏Web 技术
面试官：用纯 JS 将 HTML 页面转换为图像，有什么思路
我想到的第一个想法是使用第三方库，但像dom-to-image或使用Chrome Headless，如Puppeteer。那如何使用纯Javascript解决这种需求呢？
3.3K50编辑于 2022-07-29
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号