javascript - 如何不使用插件用canvas将div中的内容转为一张图片。
问题描述
网上不少人提到用canvas,但是关键的内容转换部分好像大多是用插件去辅助完成,而找到的仅有的一个不依赖插件的示例却又运行出错。想请教大神如何不使用插件将p中的内容转为一张图片~~
问题解答
回答1:不是说用插件不可以,而是说,你知不知道,插件它内部又是用的什么原理实现的呢?是否明白大概的原理和逻辑?插件并不能算一种实现方法啊!插件只是一种解决方案!或许你自己写,实现方法用的和插件是一样的!
回到问题,把p转成图片,这个工作是否可行,工作量是多少,你是否有意识?从可行性上将,有插件可以实现,那说明在现有前端领域是可行的。那实现原理是什么呢?
你首先要想到的是,前端代码是依托在浏览器里运行的。那好,我们第一个要想到的是,浏览器是否直接提供里这种 API 呢?浏览器 API 找什么? 找 BOM DOM的文档啊。据我所知,有firefox好像可以把某个节点当某个元素的背景,在 css 中发明了 background: -moz-element() 的语法,并没有类似截屏的 API。
你也提到了 canvas。做开发的,最好要保持好奇心。你可以很浅地去了解,这种插件他们是如何完成的。你没必要知道完成这个功能的所有细节,但是你要知道这个实现原理为什么可行。
OK,canvas怎么画p呢?canvas给了你处理像素的能力,理论上你可以画任何东西。插件的做法就是读取p以及p的style样式,自己在canvas上画出p,然后递归p的子节点。好,这个工作简单吗?肯定不简单!哪个大神可以徒手造轮子?然后把造出来的轮子贴到这个问题地下给你做回答?哪个大神能把你教会?
你和大神的差距不在于大神能徒手写 html2canvas,而是大神遇到问题能清晰地分析。
当然,我也不是大神,只是看到这种问题就忍不住要吐槽。
回答2:你需要先将p转成svg,然后再将svg转成canvas,不过中间有几个注意的点:
1.html转svg的时候请注意其中不能有像input这样的控件元素,不然会转失败;
2.在html转svg的过程中需要先将html元素的样式全部遍历转成内联样式然后再转svg,不然你可能看到一片空白。
回答3:其实你说的这种需求。可以转个弯
可以先截图 然后粘贴到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() 图片就下载下来了 :)
相关文章:
1. 在windows下安装docker Toolbox 启动Docker Quickstart Terminal 失败!2. font-family - 我引入CSS3自定义字体没有效果?3. docker start -a dockername 老是卡住,什么情况?4. macos - mac下docker如何设置代理5. dockerfile - [docker build image失败- npm install]6. objective-c - iOS开发支付宝和微信支付完成为什么跳转到了之前开发的一个app?7. PHP中的$this代表当前的类还是方法?8. angular.js - 求一款angular插件9. java - 我用Tomcat访问SQL server数据库时,出现以下错误,该怎么解决?10. docker images显示的镜像过多,狗眼被亮瞎了,怎么办?