一种HTML图片显示方法及装置制造方法及图纸

本发明专利技术公开了一种HTML图片显示方法，包括如下步骤：获取目标宽度和目标高度；读取待渲染的HTML数据；根据所述目标宽度及所述目标高度对所述HTML数据进行渲染，生成HTML图片；显示所述HTML图片。本发明专利技术还公开了一种HTML图片显示装置，在获取到目标宽度和目标高度后，会根据目标宽度和目标高度重新渲染生成HTML图片，而不是直接对HTML图片的尺寸进行修改，如此，保证了渲染生成的HTML图片的内容不会产生变形或不会因放大而导致内容不清晰。

【技术实现步骤摘要】

本专利技术涉及HTML领域，尤其涉及一种HTML图片显示方法及装置。
技术介绍
应用程序(如浏览器)展示一段HTML格式的数据时，一般先调用HTML渲染器把HTML格式的数据渲染成一幅图片(位图)，再通过位图呈现器(一个显示位图的GUI控件，或一种将位图绘制到窗口指定区域的方法)显示该图片。但这种方案存在一个问题，由于HTML渲染器将一段HTML数据渲染成位图时，该图片的尺寸是固定的。当应用程序需要按照不同尺寸(下称程序显示尺寸)显示图片时，应用程序会直接对生成的图片进行压缩或拉伸，这可能导致图片的显示比例不对进而使得图片内的元素产生变形，从而不能清晰的显示。
技术实现思路
针对上述问题，本专利技术的目的在于提供一种HTML图片显示方法及装置，可在改变尺寸的同时，保证图片被清晰的显示。本专利技术提供了一种HTML图片显示方法，包括如下步骤：获取目标宽度和目标高度；读取待渲染的HTML数据；根据所述目标宽度及所述目标高度对所述HTML数据进行渲染，生成HTML图片；显示所述HTML图片。优选地，所述根据所述目标宽度及所述目标高度对所述HTML数据进行渲染，生成HTML图片，具体为：根据所述目标宽度及所述目标高度确定所述HTML数据内的元素的大小，并根据所述HTML数据定义的页面格式及所述元素的大小对所述HTML数据进行渲染，生成HTML图片。优选地，所述HTML图片的宽度为目标宽度，所述HTML图片的高度为目标高度。优选地，在根据所述目标宽度及所述目标高度对所述HTML数据进行渲染，生成HTML图片之前，还包括：判断所述目标高度是否大于预设的宽度阈值及判断所述目标高度是否大于预设的高度阈值；当所述目标宽度大于预设的宽度阈值时，将所述目标高度设置为所述高度阈值；当所述目标高度大于预设的高度阈值时，将所述目标高度设置为所述高度阈值。优选地，在所述获取目标宽度和目标高度之前，还包括：监听对当前生成的HTML图片的拉伸操作，并根据所述拉伸操作的幅度生成高度差值及宽度差值；根据所述当前生成的HTML图片的原始宽度、原始高度、所述高度差值及所述宽度差值，生成目标宽度和目标高度。本专利技术还提供了一种HTML图片显示装置，包括：尺寸获取单元，用于获取目标宽度和目标高度；数据读取单元，用于读取待渲染的HTML数据；HTML渲染单元，用于根据所述目标宽度及所述目标高度对所述HTML数据进行渲染，生成HTML图片；HTML呈现单元，用于显示所述HTML图片。优选地，所述HTML渲染单元具体用于，根据所述目标宽度及所述目标高度确定所述HTML数据内的元素的大小，并根据所述HTML数据定义的页面格式及所述元素的大小对所述HTML数据进行渲染，生成HTML图片。优选地，所述HTML图片的宽度为目标宽度，所述HTML图片的高度为目标高度。优选地，还包括：判断单元，用于判断所述目标高度是否大于预设的宽度阈值及判断所述目标高度是否大于预设的高度阈值；第一设置单元，用于当所述目标宽度大于预设的宽度阈值时，将所述目标高度设置为所述高度阈值；第二设置单元，用于当所述目标高度大于预设的高度阈值时，将所述目标高度设置为所述高度阈值。优选地，还包括：监听单元，用于监听对当前生成的HTML图片的拉伸操作，并根据所述拉伸操作的幅度生成高度差值及宽度差值；尺寸生成单元，用于根据所述当前生成的HTML图片的原始宽度、原始高度、所述高度差值及所述宽度差值，生成目标宽度和目标高度。本专利技术提供的HTML图片显示方法和显示装置，在获取到目标宽度和目标高度后，会根据目标宽度和目标高度重新渲染生成HTML图片，而不是直接对已经生成的HTML图片的尺寸进行直接拉伸或压缩，如此，保证了渲染生成的HTML图片的内容不会产生变形或不会因放大而导致内容不清晰。附图说明为了更清楚地说明本专利技术的技术方案，下面将对实施方式中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。图1是本专利技术实施例提供的HTML图片显示方法的流程示意图。图2是本专利技术实施例提供的HTML图片显示装置的结构示意图。具体实施方式下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。请参阅图1，本专利技术实施例公开了一种HTML图片显示方法，其可由HTML图片显示装置来执行，并至少包括如下步骤：S101，获取目标宽度和目标高度。S102，读取待渲染的HTML数据。S103，根据所述目标宽度及所述目标高度对所述HTML数据进行渲染，生成HTML图片。S104，显示所述HTML图片。在本专利技术实施例中，所述HTML图片显示装置在对HTML数据进行渲染前，将首先获取目标宽度和目标高度，此后，所述HTML图片显示装置读取待渲染的HTML数据，再根据所述目标宽度及所述目标高度对所述HTML数据进行渲染，生成HTML图片，其中，一般地，生成的所述HTML图片的宽度为目标宽度，所述HTML图片的高度为目标高度。在本专利技术实施例中，在完成渲染后，所述HTML图片显示装置将所述HTML图片显示于预定的位置上，从而完成HTML数据的显示。需要说明的是，在本专利技术实施例中，在生成所述HTML图片后，若用户想要对所述HTML图片的尺寸(如宽度或高度进行修改)，则用户可输入新的目标宽度和目标高度，此后所述HTML图片显示装置将再次执行S101～S104的步骤，即用户每输入一次目标宽度和目标高度，所述HTML图片显示装置都会进行一次渲染。综上所述，本专利技术实施例提供的HTML图片显示方法，在获取到目标宽度和目标高度后，会根据目标宽度和目标高度重新渲染生成HTML图片，而不是直接对生成的HTML图片的尺寸进行修改，如此，保证了渲染生成的HTML图片的内容不会产生变形或不会因放大而导致内容不清晰。为了便于对本专利技术的理解，下面将对本专利技术的一些优选实施例做更进一步的描述。第一个优选实施例：优选地，步骤S103具体为：根据所述目标宽度及所述目标高度确定所述HTML数据内的元素的大小，并根据所述HTML数据定义的页面格式及所述元素的大小对所述HTML数据进行渲染，生成HTML图片。在本优选实施例中，在获取目标宽度及所述目标高度后，则生成的HTML图片的大小及宽高比就发生了变化，若在渲染时保持所述HTML数据内的元素(如文字或其他字符)的大小及比例不变，则可能出现文字过大、文字过小或者文字比例不协调等问题，因此，在渲染时，需要根据所述目标宽度及所述目标高度确定所述HTML数据内的元素的大小。在本专利技术实施例中，确定所述HTML数据内的元素的大小可由系统的默认值与目标宽度和目标高度的比值来决定，或者可根据所述目标宽度、目标高度、每行的元素的数量及元素之间的行距、间距等一系列因素来决定，本专利技术不做具体限定。第二个优选实施例：优选地，在步骤S103之前，还包括：判断所述目标高度是否大于预设的宽度阈值及判断所述目标高度是否大于预设的高度阈值；当所述目标宽本文档来自技高网...

【技术保护点】
一种HTML图片显示方法，其特征在于，包括如下步骤：获取目标宽度和目标高度；读取待渲染的HTML数据；根据所述目标宽度及所述目标高度对所述HTML数据进行渲染，生成HTML图片；显示所述HTML图片。

【技术特征摘要】
1.一种HTML图片显示方法，其特征在于，包括如下步骤：获取目标宽度和目标高度；读取待渲染的HTML数据；根据所述目标宽度及所述目标高度对所述HTML数据进行渲染，生成HTML图片；显示所述HTML图片。2.根据权利要求1所述的HTML图片显示方法，其特征在于，所述根据所述目标宽度及所述目标高度对所述HTML数据进行渲染，生成HTML图片，具体为：根据所述目标宽度及所述目标高度确定所述HTML数据内的元素的大小，并根据所述HTML数据定义的页面格式及所述元素的大小对所述HTML数据进行渲染，生成HTML图片。3.根据权利要求1所述的HTML图片显示方法，其特征在于，所述HTML图片的宽度为目标宽度，所述HTML图片的高度为目标高度。4.根据权利要求1所述的HTML图片显示方法，其特征在于，在根据所述目标宽度及所述目标高度对所述HTML数据进行渲染，生成HTML图片之前，还包括：判断所述目标高度是否大于预设的宽度阈值及判断所述目标高度是否大于预设的高度阈值；当所述目标宽度大于预设的宽度阈值时，将所述目标高度设置为所述高度阈值；当所述目标高度大于预设的高度阈值时，将所述目标高度设置为所述高度阈值。5.根据权利要求1至4任意一项所述的HTML图片显示方法，其特征在于，在所述获取目标宽度和目标高度之前，还包括：监听对当前生成的HTML图片的拉伸操作，并根据所述拉伸操作的幅度生成高度差值及宽度差值；根据所述当前生成的HTML图片的原始宽度、原始高度、所述高度差值及所述宽度差值，生成目标宽度和...

【专利技术属性】
技术研发人员：程遥，
申请(专利权)人：广州视睿电子科技有限公司，广州视源电子科技股份有限公司，
类型：发明
国别省市：广东;44