javascript – So konvertieren Sie mit Canvas den Inhalt eines Div in ein Bild, ohne ein Plug-In zu verwenden.

Question

Viele Leute im Internet erwähnten die Verwendung von Canvas, aber der wichtigste Teil der Inhaltskonvertierung scheint größtenteils durch Plug-ins unterstützt zu werden, und das einzige Beispiel, das ich gefunden habe, das nicht auf Plug-ins angewiesen war, lief fehlerhaft. Ich möchte einen Meister fragen, wie er den Inhalt eines Div in ein Bild umwandeln kann, ohne ein Plug-in zu verwenden~~

黄舟 · Answer

不是说用插件不可以，而是说，你知不知道，插件它内部又是用的什么原理实现的呢？是否明白大概的原理和逻辑？插件并不能算一种实现方法啊！插件只是一种解决方案！或许你自己写，实现方法用的和插件是一样的！

回到问题，把p转成图片，这个工作是否可行，工作量是多少，你是否有意识？从可行性上将，有插件可以实现，那说明在现有前端领域是可行的。那实现原理是什么呢？

你首先要想到的是，前端代码是依托在浏览器里运行的。那好，我们第一个要想到的是，浏览器是否直接提供里这种 API 呢？浏览器 API 找什么？找 BOM DOM的文档啊。据我所知，有firefox好像可以把某个节点当某个元素的背景，在 css 中发明了 background: -moz-element() 的语法，并没有类似截屏的 API。

你也提到了 canvas。做开发的，最好要保持好奇心。你可以很浅地去了解，这种插件他们是如何完成的。你没必要知道完成这个功能的所有细节，但是你要知道这个实现原理为什么可行。

OK，canvas怎么画p呢？canvas给了你处理像素的能力，理论上你可以画任何东西。插件的做法就是读取p以及p的style样式，自己在canvas上画出p，然后递归p的子节点。好，这个工作简单吗？肯定不简单！哪个大神可以徒手造轮子？然后把造出来的轮子贴到这个问题地下给你做回答？哪个大神能把你教会？

你和大神的差距不在于大神能徒手写 html2canvas，而是大神遇到问题能清晰地分析。

当然，我也不是大神，只是看到这种问题就忍不住要吐槽。

给我你的怀抱 · Answer

你需要先将p转成svg，然后再将svg转成canvas，不过中间有几个注意的点：

1.html转svg的时候请注意其中不能有像input这样的控件元素，不然会转失败；

2.在html转svg的过程中需要先将html元素的样式全部遍历转成内联样式然后再转svg，不然你可能看到一片空白。

ringa_lee · Answer

其实你说的这种需求。可以转个弯

可以先截图然后粘贴到input中绑定一个input的粘贴 paste 事件
然后 event.clipboardData.items 用 var img = new Image() 读出来
最后放在 canvas 里面用context.dramImage(img,0,0) var url = context.toDataURL('image/png')
这不就是一个图片了吗
最后用 const a = document.createElement('a') a.setAttribute('download',true) a.setAttribute('href',url) a.click() 图片就下载下来了 :)