寻找热爱表达的你#

"一键将网页截图制作成HTML网页"是指一种技术，它允许用户通过简单的操作，将网页的截图转换成HTML代码的网页。这通常涉及到自动布局、样式提取和代码生成。以下是实现这一功能的相关技术和步骤：

1. 截图捕捉：首先，需要有一个方法来捕捉网页的截图，这可以通过浏览器插件、屏幕捕获工具或专门的应用程序来完成。

2. 图像处理：捕捉到的截图可能需要进行预处理，比如裁剪、压缩或调整分辨率，以确保图像的质量。

3. 元素识别：使用图像识别技术来分析截图，识别网页中的元素，比如文本、按钮、图片等。

4. 布局分析：基于识别出的元素，分析页面的布局信息，包括元素的大小、位置和层级。

5. 样式解析：提取页面的样式信息，包括颜色、字体、间距等，并将它们转换为CSS代码。

6. HTML生成：根据布局和样式信息，生成HTML结构代码，将截图中的元素转换为HTML标签。

7. 代码优化：对生成的HTML代码进行优化，确保代码的可读性、维护性和性能。

8. 响应式设计：确保生成的网页代码能够适应不同的屏幕尺寸和设备，实现响应式布局。

9. 交互性实现：如果截图中的页面包含交互元素，需要添加相应的JavaScript代码来实现这些交互。

10. 一键操作：提供一个简单的用户界面，用户只需点击一个按钮，就可以完成截图到HTML的转换。

11. 预览功能：在转换过程中提供实时预览，让用户可以实时看到转换效果。

12. 自定义选项：允许用户对生成的HTML代码进行自定义，比如修改布局、添加额外的样式或功能。

13. 保存和导出：用户可以保存或导出生成的HTML代码，以便进一步使用或分享。

14. 错误处理：在转换过程中识别和处理潜在的错误，比如布局冲突或样式问题。

15. 兼容性测试：确保生成的网页在不同的浏览器和设备上都能正常显示和工作。

16. 安全性考虑：生成的代码应遵循安全最佳实践，避免潜在的安全风险。

17. 用户反馈：收集用户反馈，不断改进转换算法和用户体验。

18. 开源和社区支持：作为开源项目，鼓励社区参与贡献代码和改进功能。

这种一键转换技术可以大大提高网页开发的效率，尤其是对于快速原型设计和演示目的。然而，需要注意的是，自动生成的代码可能需要进一步的人工审查和调整，以确保最终产品的质量和性能。此外，一些复杂的网页效果和动态交互可能需要手动编写代码来实现。

一篇：这么多USB接口你都认识吗？带你了解现在最常用的USB type-c接口

在日常生活中二维码几乎随处可见，小到微信支付，大到核酸检测，我们几乎天天在用。

有时候需要将一个网址、一个图片、一篇文字、一个文件发给别人，或在微群里进行线上传播，如果直接发网址或文本会很不方便，但是如果发一个二维码过去，就非常方便了。

或者想在宣传单页、海报上印刷一个活动宣传页面，如果印一个网址上去，那客户感知就太差了，谁有耐心在手机上输入一长串的网址呀，如果印一个二维码上去，客户用手机扫码就可以直接跳转到活动面面。

下面给大家分享一下怎么生成二维码，我在工作中使用最多的就是草料二维码，这个工具使用了很多年了，自认为使用起来比较顺手，所以推荐大家试用。

1、首先打开草料二维码的WEB网站，或者直接用草料二维码的微信小程序也可以。

2、注册登录不必多说，用手机号注册、或直接用微信扫码登录即可。一般个人用户类型基本可以满足大部分需求，我使用的是个人免费版。

3、登录后进入首页，即可进入二维码生成页面，非常直观，一看即会。

4、试验一下将一篇文字生成二维码，将文字直接粘贴到文本框内，点击生成二维码即可。

5、就是这么简单，右侧生成了一个二维码，下载二维码图片就完了，用你的微信扫一扫这个二维码看能不能识别。你学会了吗？

特别注意：超长内容的二维码图案会非常复杂，需要足够清晰的大图才能完整展示，所以文本字数越多，生成的二维码越复杂，用手机扫描会不好识别。建议文本内容不要超过150个字，以保证二维码能快速扫描识别。

6、将一个网址生成二维码方法一样，选上面的网址标签，将网址粘贴到文本框内，如法炮制，一个二维码就生成了，用微信扫码试试看。

你学废了吗？

工具不宜太多，有一个趁手的即可，类似的工具有很多，大家也可自已在网上搜索，体验各种不同的二维码生成工具，挑选一个自已喜欢的，用着顺手的工具，方便在日常工作中使用，达到事半功倍的效果。

者开源了一个Web思维导图，在做导出为图片的功能时走了挺多弯路，所以通过本文来记录一下。

思维导图的节点和连线都是通过 svg渲染的，作为一个纯 js 库，我们不考虑通过后端来实现，所以只能思考如何通过纯前端的方式来实现将svg或html转换为图片。

使用img标签结合canvas导出

我们都知道 img 标签可以显示 svg，然后 canvas 又可以渲染 img，那么是不是只要将svg渲染到img标签里，再通过canvas导出为图片就可以呢，答案是肯定的。

const svgToPng = async (svgStr) => {
    // 转换成blob数据
    let blob = new Blob([svgStr], {
      type: 'image/svg+xml'
    })
    // 转换成data:url数据
    let svgUrl = await blobToUrl(blob)
    // 绘制到canvas上
    let imgData = await drawToCanvas(svgUrl)
    // 下载
    downloadFile(imgData, '图片.png')
}

svgStr是要导出的svg字符串，比如：

然后通过Blob构造函数创建一个类型为image/svg+xml的blob数据，接下来将blob数据转换成data:URL：

const blobToUrl = (blob) => {
    return new Promise((resolve, reject) => {
        let reader = new FileReader()
        reader.onload = evt => {
            resolve(evt.target.result)
        }
        reader.onerror = err => {
            reject(err)
        }
        reader.readAsDataURL(blob)
    })
}

其实就是base64格式的字符串。

接下来就可以通过img来加载，并渲染到canvas里进行导出：

const drawToCanvas = (svgUrl) => {
    return new Promise((resolve, reject) => {
      const img = new Image()
      // 跨域图片需要添加这个属性，否则画布被污染了无法导出图片
      img.setAttribute('crossOrigin', 'anonymous')
      img.onload = async () => {
        try {
          let canvas = document.createElement('canvas')
          canvas.width = img.width
          canvas.height = img.height
          let ctx = canvas.getContext('2d')
          ctx.drawImage(img, 0, 0, img.width, img.height)
          resolve(canvas.toDataURL())
        } catch (error) {
          reject(error)
        }
      }
      img.onerror = e => {
        reject(e)
      }
      img.src = svgUrl
    })
}

canvas.toDataURL()方法返回的也是一个base64格式的data:URL字符串：

最后就可以通过a标签来下载：

const downloadFile = (file, fileName) => {
  let a = document.createElement('a')
  a.href = file
  a.download = fileName
  a.click()
}

实现很简单，效果也不错，不过这样就没问题了吗，接下来我们插入两张图片试试。

处理存在图片的情况

第一张图片是使用base64的data:URL方式插入的，第二张图片是使用普通url插入的：

导出结果如下：

可以看到，第一张图片没有问题，第二张图片裂开了，可能你觉得同源策略的问题，但实际上换成同源的图片，同样也是裂开的，解决方法很简单，遍历svg节点树，将图片都转换成data:URL的形式即可：

// 操作svg使用了@svgdotjs/svg.js库
const transfromImg = (svgNode) => {
    let imageList = svgNode.find('image')
    let task = imageList.map(async item => {
      // 获取图片url
      let imgUlr = item.attr('href') || item.attr('xlink:href')
      // 已经是data:URL形式不用转换
      if (/^data:/.test(imgUlr)) {
        return
      }
      // 转换并替换图片url
      let imgData = await drawToCanvas(imgUlr)
      item.attr('href', imgData)
    })
    await Promise.all(task)
    return svgNode.svg()// 返回svg html字符串
}

这里使用了前面的drawToCanvas方法来将图片转换成data:URL，这样导出就正常了：

到这里，将纯 svg 转换为图片就基本没啥问题了。

处理存在foreignObject标签的情况

svg提供了一个foreignObject标签，可以插入html节点，实际上，笔者就是使用它来实现节点的富文本编辑效果的：

接下来使用前面的方式来导出，结果如下：

明明显示没有问题，导出时foreignObject内容却发生了偏移，这是为啥呢，其实是因为默认样式的问题，页面全局清除了margin和padding，以及将box-sizing设置成了border-box：

那么当svg存在于文档树中时是没有问题的，但是导出时使用的是svg字符串，是脱离于文档的，所以没有这个样式覆盖，那么显示自然会出现问题，知道了原因，解决方法有两种，一是遍历所有嵌入的html节点，手动添加内联样式，注意一定要给所有的html节点都添加，只给svg、foreignObject或最外层的html节点添加都是不行的；第二种是直接在foreignObject标签里添加一个style标签，通过style标签来加上样式，并且只要给其中一个foreignObject标签添加就可以了，两种方式看你喜欢哪种，笔者使用的是第二种：

const transformForeignObject = (svgNode) => {
    let foreignObjectList = svgNode.find('foreignObject')
    if (foreignObjectList.length > 0) {
        foreignObjectList[0].add(SVG(`<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        </style>`))
    }
    return svgNode.svg()
}

导出结果如下：

可以看到，一切正常。

关于兼容性的问题，笔者测试了最新的chrome、firefox、opera、safari、360急速浏览器，运行都是正常的。

踩坑记录

前面介绍的是笔者目前采用的方案，看着实现其实非常简单，但是过程漫长且坎坷，接下来，开始我的表演。

foreignObject标签内容在firefox浏览器上无法显示

对于svg的操作笔者使用的是svg.js库，创建富文本节点的核心代码大致如下：

import { SVG, ForeignObject } from '@svgdotjs/svg.js'

let html = `<div>节点文本</div>`
let foreignObject = new ForeignObject()
foreignObject.add(SVG(html))
g.add(foreignObject)

SVG方法是用来将一段html字符串转换为dom节点的。

在chrome浏览器和opera浏览器上渲染非常正常，但是在firefox浏览器上foreignObject标签的内容完全渲染不出来：

检查元素也看不出有任何问题，并且神奇的是只要在控制台元素里编辑一下嵌入的html内容，它就可以显示了，百度搜索了一圈，也没找到解决方法，然后因为firefox浏览器占有率并不高，于是这个问题就搁浅了。

使用img结合canvas导出图片里foreignObject标签内容为空

chrome浏览器虽然渲染是正常的：

但是使用前面的方式导出时foreignObject标签内容却是跟在firefox浏览器里显示一样是空的：

firefox能忍这个不能忍，于是尝试使用一些将html转换为图片的库。

使用html2canvas、dom-to-image等库

使用html2canvas：

import html2canvas from 'html2canvas'

const useHtml2canvas = async (svgNode) => {
    let el = document.createElement('div')
    el.style.position = 'absolute'
    el.style.left = '-9999999px'
    el.appendChild(svgNode)
    document.body.appendChild(el)// html2canvas转换需要被转换的节点在文档中
    let canvas = await html2canvas(el, {
        backgroundColor: null
    })
    mdocument.body.removeChild(el)
    return canvas.toDataURL()
}

html2canvas可以成功导出，但是存在一个问题，就是foreignObject标签里的文本样式会丢失：

这应该是html2canvas的一个bug，不过看它这issues数量和提交记录：

指望html2canvas改是不现实的，于是又尝试使用dom-to-image：

import domtoimage from 'dom-to-image'

const dataUrl = domtoimage.toPng(el)

发现dom-to-image更不行，导出完全是空白的：

并且它上一次更新时间已经是五六年前，所以没办法，只能回头使用html2canvas。

后来有人建议使用dom-to-image-more，粗略看了一下，它是在dom-to-image库的基础上修改的，尝试了一下，发现确实可以，于是就改为使用这个库，然后又有人反馈在一些浏览器上导出节点内容是空的，包括firefox、360，甚至chrome之前的版本都不行，笔者只能感叹，太难了，然后又有人建议使用上一个大版本，可以解决在firefox上的导出问题，但是笔者试了一下，在其他一些浏览器上依旧存在问题，于是又在考虑要不要换回html2canvas，虽然它存在一定问题，但至少不是完全空的。

解决foreignObject标签内容在firefox浏览器上无法显示的问题

用的人多了，这个问题又有人提了出来，于是笔者又尝试看看能不能解决，之前一直认为是firefox浏览器的问题，毕竟在chrome和opera上都是正常的，这一次就想会不会是svgjs库的问题，于是就去搜它的issue，没想到，还真的搜出来了issue，大意就是因为通过SVG方法转换的dom节点是在svg的命名空间下，也就是使用document.createElementNS方法创建的，导致部分浏览器渲染不出来，归根结底，这还是不同浏览器对于规范的不同实现导致的：

你说chrome很强吧，确实，但是无形中它阻止了问题的暴露。

知道了原因，那么修改也很简单了，只要将SVG方法第二个参数设为true即可，或者自己来创建节点也可以：

foreignObject.add(document.createElemnt('div'))

果然，在firefox浏览器上正常渲染了。

解决img结合canvas导出图片为空的问题

解决了在firefox浏览器上foreignObject标签为空的问题后，自然会怀疑之前使用img结合canvas导出图片时foreignObject标签为空会不会也是因为这个问题，同时了解了一下dom-to-image库的实现原理，发现它也是通过将dom节点添加到svg的foreignObject标签中实现将html转换成图片的，那么就很搞笑了，我本身要转换的内容就是一个嵌入了foreignObject标签的svg，使用dom-to-image转换，它会再次把传给它的svg添加到一个foreignObject标签中，这不是套娃吗，既然dom-to-image-more能通过foreignObject标签成功导出，那么不用它必然也可以，到这里基本确信之前不行就是因为命名空间的问题。

果然，在去掉了dom-to-image-more库后，重新使用之前的方式成功导出了，并且在firefox、chrome、opera、360等浏览器中都不存在问题，兼容性反而比dom-to-image-more库好。

总结

虽然笔者的实现很简单，但是dom-to-image-more这个库实际上有一千多行代码，那么它到底多做了些什么呢，点个关注，我们下一篇文章再见。