本发明专利技术属于互联网技术领域，涉及一种基于浏览器的缩略图生成方法、系统和可读介质，包括：将待处理文档分为若干节点，在所述节点中选出需要进行缩略的节点；确定缩略图尺寸和缩略比例；根据需要进行缩略的节点数据、缩略图尺寸和缩略比例，输入缩略图生成模型，对所述缩略图生成模型中的缩略图元素进行渲染，生成缩略图。本发明专利技术中方案不受可视区域影响，即使节点超出可视区域也能进行缩略渲染。节点超出可视区域也能进行缩略渲染。节点超出可视区域也能进行缩略渲染。
【技术实现步骤摘要】
一种基于浏览器的缩略图生成方法、系统和可读介质
[0001]本专利技术涉及一种基于浏览器的缩略图生成方法、系统和可读介质，属于互联网
技术介绍
[0002]近年来，随着互联网技术的发展与普及，网页已经由最初仅承担展示内容信息的角色发展逐渐成为具有一套完整功能的应用。越来越多的用户需要快速预览页面元素，如图片、表格等，以便更好地理解和利用网站内容。
[0003]现有方法中主要采用优化排版结构、浏览器截屏方式生成图片和减少网页字体大小解决上述问题，优化排版结构，由于减少长度过高节点的出现，会影响到网页UI设计，使得网页信息更加拥挤，用户观感较差；浏览器截屏方式生成图片，该方法只能截到可视区域，局限较大；减少网页字体大小，在浏览器可视区域放尽可能多的文字信息，以此来减小用户上下滚动鼠标的频率，该方案会导致用户在看小字体文字时较为费力，对于用户的浏览体验影响较大。
技术实现思路
[0004]针对上述问题，本专利技术的目的是提供了一种基于浏览器的缩略图生成方法、系统和可读介质，其不受可视区域影响，即使节点超出可视区域也能进行缩略渲染。
[0005]为实现上述目的，本专利技术提出了以下技术方案：一种基于浏览器的缩略图生成方法，包括：将待处理文档分为若干节点，在所述节点中选出需要进行缩略的节点；确定缩略图尺寸和缩略比例；根据需要进行缩略的节点数据、缩略图尺寸和缩略比例，输入缩略图生成模型，对所述缩略图生成模型中的缩略图元素进行渲染，生成缩略图。
[0006]进一步，所述节点包括：文字、图像、可缩放矢量图形和canvas标签。
[0007]进一步，所述节点为DOM节点，所述节点的类型包括：元素节点、属性节点和文本节点，所述元素节点、属性节点和文本节点组成DOM树。
[0008]进一步，生成所述需要进行缩略的节点数据的方法为：在所述节点中选出需要进行缩略的节点；递归克隆所述需要进行缩略的节点，遍历所述需要进行缩略的节点，在遍历所述节点过程中提取元素样式属性并插入到克隆后的元素标签内；将克隆后的元素进行节点序列化，将经过所述节点序列化的元素嵌入待处理文档中，生成要进行缩略的节点数据。
[0009]进一步，若DOM节点为可缩放矢量图形和canvas标签则将其装换为图像元素，若DOM节点为图像元素则将其转换为dataURL数据。
[0010]进一步，所述缩略图生成模型中图像通过canvas软件获取。
[0011]进一步，对所述DOM树中各个节点进行监听，当所述节点的内容发生变化时，重新生成所述缩略图。
[0012]进一步，所述缩略图尺寸、缩略比例和缩略图的位置通过界面输入，所述界面还包括缩略图生成按钮和缩略图保存按钮。
[0013]本专利技术还公开了一种基于浏览器缩略图生成系统，包括：缩略节点生成模块，用于将待处理文档分为若干节点，在所述节点中选出需要进行缩略的节点；参数输入模块，用于确定缩略图尺寸和缩略比例；缩略图生成模块，根据需要进行缩略的节点数据、缩略图尺寸和缩略比例，输入缩略图生成模型，对所述缩略图生成模型中的缩略图元素进行渲染，生成缩略图。
[0014]本专利技术还公开了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行以实现上述任一项所述的基于浏览器缩略图生成方法。
[0015]本专利技术由于采取以上技术方案，其具有以下优点：
[0016]本专利技术中方案采用高效的图像处理算法来生成缩略图，提高图像质量和平滑度。同时还可以通过调整图像压缩比、色彩范围等参数来进一步优化算法效果。本专利技术方案中界面应该简洁明了，方便用户进行操作算法实现。
[0017]本专利技术中方案通过减少不必要的计算、避免重复操作、使用缓存技术等保证了插件的运行效率和稳定性，需要对其进行性能优化。
[0018]本专利技术中方案支持文字、图片、视频等多种节点，可以自定义缩略图的大小、位置、比例等参数，满足不同需求，支持多线程处理，提高系统响应速度。可以自动保存历史记录和设置信息，方便用户下次使用。
附图说明
[0019]图1是本专利技术一实施例中基于浏览器的缩略图生成方法的流程图。
具体实施方式
[0020]为了使本领域技术人员更好的理解本专利技术的技术方向，通过具体实施例对本专利技术进行详细的描绘。然而应当理解，具体实施方式的提供仅为了更好地理解本专利技术，它们不应该理解成对本专利技术的限制。在本专利技术的描述中，需要理解的是，所用到的术语仅仅是用于描述的目的，而不能理解为指示或暗示相对重要性。
[0021]为了解决现有技术中存在的由于减少长度过高节点的出现，会影响到网页UI设计，使得网页信息更加拥挤，用户观感较差；浏览器截屏方式生成图片，该方法只能截到可视区域，局限较大；减少网页字体大小，会导致用户在看小字体文字时较为费力，对于用户的浏览体验影响较大等问题，本专利技术提出了一种基于浏览器的缩略图生成方法、系统和可读介质，其采用高效的图像处理算法来生成缩略图，提高图像质量和平滑度。同时还可以通过调整图像压缩比、色彩范围等参数来进一步优化算法效果。本专利技术方案中界面应该简洁明了，方便用户进行操作算法实现。下面结合附图，通过实施例对本专利技术方案进行详细阐述。
[0022]实施例一
[0023]本实施中公开了一种基于浏览器的缩略图生成方法，如图1所示，包括：
[0024]S1将待处理文档分为若干节点，在节点中选出需要进行缩略的节点。
[0025]节点包括：文字、图像、可缩放矢量图形和canvas标签。
[0026]节点为DOM节点，节点的类型包括：元素节点、属性节点和文本节点，元素节点、属
性节点和文本节点组成DOM树。
[0027]生成需要进行缩略的节点数据的方法为：
[0028]S1.1在节点中选出需要进行缩略的节点；
[0029]S1.2递归克隆需要进行缩略的节点，若DOM节点为可缩放矢量图形和canvas标签则将其装换为图像元素，若DOM节点为图像元素则将其转换为dataURL数据。遍历需要进行缩略的节点，在遍历节点过程中提取元素样式属性并插入到克隆后的元素标签内；
[0030]S1.3将克隆后的元素进行节点序列化，将经过节点序列化的元素嵌入待处理文档中，生成要进行缩略的节点数据。
[0031]S2确定缩略图尺寸和缩略比例；
[0032]缩略图尺寸、缩略比例和缩略图的位置通过界面输入，界面还包括缩略图生成按钮和缩略图保存按钮。本实施例中界面主要包括主界面和设置界面，主界面包括选择元素节点按钮和缩略图生成按钮。设置界面包括选择元素类型、缩略图大小、缩略图位置等选项卡和缩略图保存按钮。本实施例中界面简洁明了，方便用户进行操作。
[0033]S3根据需要进行缩略的节点数据、缩略图尺寸和缩略比例，输入缩略图生成模型，对缩略图生成模型中的缩略图元素进行渲染，生成缩略图。
[0034]缩略图生成模型中图像通过canvas软件获取。本实施例本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种基于浏览器的缩略图生成方法，其特征在于，包括：将待处理文档分为若干节点，在所述节点中选出需要进行缩略的节点；确定缩略图尺寸和缩略比例；根据需要进行缩略的节点数据、缩略图尺寸和缩略比例，输入缩略图生成模型，对所述缩略图生成模型中的缩略图元素进行渲染，生成缩略图。2.如权利要求1所述的基于浏览器缩略图生成方法，其特征在于，所述节点包括：文字、图像、可缩放矢量图形和canvas标签。3.如权利要求2所述的基于浏览器缩略图生成方法，其特征在于，所述节点为DOM节点，所述节点的类型包括：元素节点、属性节点和文本节点，所述元素节点、属性节点和文本节点组成DOM树。4.如权利要求3所述的基于浏览器缩略图生成方法，其特征在于，生成所述需要进行缩略的节点数据的方法为：在所述节点中选出需要进行缩略的节点；递归克隆所述需要进行缩略的节点，遍历所述需要进行缩略的节点，在遍历所述节点过程中提取元素样式属性并插入到克隆后的元素标签内；将克隆后的元素进行节点序列化，将经过所述节点序列化的元素嵌入待处理文档中，生成要进行缩略的节点数据。5.如权利要求3所述的基于浏览器缩略图生成方法，其特征在于，若DOM节点为可缩放矢量图形和canvas标签则将其装换为...
【专利技术属性】
技术研发人员：付威，邵延汤，
申请(专利权)人：北京东方金信科技股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。