CN114896531B - 图像处理的方法、装置、电子设备及存储介质 - Google Patents

图像处理的方法、装置、电子设备及存储介质 Download PDF

Info

Publication number
CN114896531B
CN114896531B CN202210458896.2A CN202210458896A CN114896531B CN 114896531 B CN114896531 B CN 114896531B CN 202210458896 A CN202210458896 A CN 202210458896A CN 114896531 B CN114896531 B CN 114896531B
Authority
CN
China
Prior art keywords
rendering
target
pixel
style
target image
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN202210458896.2A
Other languages
English (en)
Other versions
CN114896531A (zh
Inventor
侯战斌
刘羽坤
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Jutongda Technology Co ltd
Original Assignee
Beijing Jutongda Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Jutongda Technology Co ltd filed Critical Beijing Jutongda Technology Co ltd
Priority to CN202210458896.2A priority Critical patent/CN114896531B/zh
Publication of CN114896531A publication Critical patent/CN114896531A/zh
Application granted granted Critical
Publication of CN114896531B publication Critical patent/CN114896531B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T15/00—3D [Three Dimensional] image rendering
    • G06T15/10—Geometric effects
    • G06T15/20—Perspective computation
    • G06T15/205—Image-based rendering
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T3/00—Geometric image transformations in the plane of the image
    • G06T3/40—Scaling of whole images or parts thereof, e.g. expanding or contracting
    • G06T3/4084—Scaling of whole images or parts thereof, e.g. expanding or contracting in the transform domain, e.g. fast Fourier transform [FFT] domain scaling
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • General Engineering & Computer Science (AREA)
  • Computing Systems (AREA)
  • Geometry (AREA)
  • Computer Graphics (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本公开涉及一种图像处理的方法、装置、电子设备及存储介质，涉及互联网领域。首先获取目标图像的像素信息，之后根据所述像素信息，对待展示所述目标图像的目标页面中的指定元素的样式进行渲染，最后通过渲染完成后的所述目标页面展示所述目标图像。这样，根据所述像素信息呈现所述目标图像，以避免所述目标图像被不合法获取，提升了目标页面的页面信息的安全性。

Description

图像处理的方法、装置、电子设备及存储介质
技术领域
本公开涉及互联网领域，尤其涉及一种图像处理的方法、装置、电子设备及存储介质。
背景技术
随着互联网的发展，对网络资源(例如图像资源)的防下载和防爬虫变得越来越重要，如何确保网络资源能够被目标用户浏览而防止被非目标用户通过爬虫程序获取而用于非正常用途，成为急需解决的问题。
相关技术中，可以通过修改相关元素属性的方式防止网页资源被下载，例如，在HTML(Hyper Text Markup Language，超文本标记语言)以及CSS(Cascading StyleSheets,指定层叠样式)中，可以通过设置<img>元素的user-select属性为none的方式防止网页资源被用户选中，从而避免被拷贝或者下载。但是，仍然无法避免网络资源被爬虫程序不合法获取。
发明内容
为克服相关技术中存在的问题，本公开提供一种图像处理的方法、装置、电子设备及存储介质。
根据本公开实施例的第一方面，提供一种图像处理的方法，所述方法包括：
获取目标图像的像素信息；
根据所述像素信息，对待展示所述目标图像的目标页面中的指定元素的样式进行渲染，所述指定元素为不包含所述目标图像的地址属性的元素；
通过渲染完成后的所述目标页面展示所述目标图像。
可选地，所述根据所述像素信息，对待展示所述目标图像的目标页面中的指定元素的样式进行渲染包括：
获取所述目标图像的尺寸信息；
根据预设渲染策略和所述像素信息，确定多个目标渲染像素；
根据所述尺寸信息和所述多个目标渲染像素，对待展示所述目标图像的目标页面中的指定元素的样式进行渲染。
可选地，所述渲染策略包括质量优先渲染，所述根据预设渲染策略和所述像素信息，确定多个目标渲染像素包括：
在所述渲染策略为质量优先渲染的情况下，将所述像素信息作为目标渲染像素；
所述根据所述尺寸信息和所述多个目标渲染像素，对待展示所述目标图像的目标页面中的指定元素的样式进行渲染包括：
根据所述尺寸信息确定每个所述目标渲染像素的位置信息；
根据所述位置信息和所述目标渲染像素，对待展示所述目标图像的目标页面中的指定元素的样式进行渲染。
可选地，所述渲染策略包括性能优先渲染，所述根据预设渲染策略和所述像素信息，确定多个目标渲染像素包括：
在所述渲染策略为性能优先渲染的情况下，从多个预设的渲染样式中获取目标渲染样式；
根据所述目标渲染样式从所述像素信息中确定所述目标渲染像素；
所述根据所述尺寸信息和所述多个目标渲染像素，对待展示所述目标图像的目标页面中的指定元素的样式进行渲染包括：
根据所述尺寸信息和所述目标渲染样式确定每个所述目标渲染像素的位置信息；
根据所述位置信息和所述目标渲染像素，对待展示所述目标图像的目标页面中的指定元素的样式进行渲染。
可选地，所述目标渲染样式包括渲染Bitmap和\或条件渲染，所述根据所述目标渲染样式从所述像素信息中确定所述目标渲染像素包括：
在所述目标渲染样式包括渲染Bitmap的情况下，根据预设的渲染Bitmap从多个所述像素信息中确定所述目标渲染像素；或者，
在所述目标渲染样式包括条件渲染的情况下，将多个所述像素信息中满足预设条件的像素信息作为所述目标渲染像素；或者，
在所述目标渲染样式包括条件渲染和渲染Bitmap的情况下，根据预设的渲染Bitmap和所述预设条件从多个所述像素信息中确定所述目标渲染像素。
可选地，所述获取目标图像的像素信息包括：
根据预设缩放比例缩小所述目标图像的尺寸，并获取缩小后的所述目标图像的像素信息。
可选地，所述方法还包括：
根据所述预设缩放比例还原所述目标图像的尺寸。
根据本公开实施例的第二方面，提供一种图像处理的装置，所述装置包括：
获取模块，被配置为获取目标图像的像素信息；
渲染模块，被配置为根据所述像素信息，对待展示所述目标图像的目标页面中的指定元素的样式进行渲染，所述指定元素为不包含所述目标图像的地址属性的元素；
展示模块，被配置为通过渲染完成后的所述目标页面展示所述目标图像。
可选地，所述渲染模块还被配置为：
获取所述目标图像的尺寸信息；
根据预设渲染策略和所述像素信息，确定多个目标渲染像素；
根据所述尺寸信息和所述多个目标渲染像素，对待展示所述目标图像的目标页面中的指定元素的样式进行渲染。
可选地，所述渲染策略包括质量优先渲染，所述渲染模块还被配置为：
在所述渲染策略为质量优先渲染的情况下，将所述像素信息作为目标渲染像素；
根据所述尺寸信息确定每个所述目标渲染像素的位置信息；
根据所述位置信息和所述目标渲染像素，对待展示所述目标图像的目标页面中的指定元素的样式进行渲染。
可选地，所述渲染策略包括性能优先渲染，所述渲染模块还被配置为：
在所述渲染策略为性能优先渲染的情况下，从多个预设的渲染样式中获取目标渲染样式；
根据所述目标渲染样式从所述像素信息中确定所述目标渲染像素；
根据所述尺寸信息和所述目标渲染样式确定每个所述目标渲染像素的位置信息；
根据所述位置信息和所述目标渲染像素，对待展示所述目标图像的目标页面中的指定元素的样式进行渲染。
可选地，所述目标渲染样式包括渲染Bitmap和\或条件渲染，所述渲染模块还被配置为：
在所述目标渲染样式包括渲染Bitmap的情况下，根据预设的渲染Bitmap从多个所述像素信息中确定所述目标渲染像素；或者，
在所述目标渲染样式包括条件渲染的情况下，将多个所述像素信息中满足预设条件的像素信息作为所述目标渲染像素；或者，
在所述目标渲染样式包括条件渲染和渲染Bitmap的情况下，根据预设的渲染Bitmap和所述预设条件从多个所述像素信息中确定所述目标渲染像素。
可选地，所述获取模块还被配置为：
根据预设缩放比例缩小所述目标图像的尺寸，并获取缩小后的所述目标图像的像素信息。
可选地，所述展示模块还被配置为：
根据所述预设缩放比例还原所述目标图像的尺寸。
根据本公开实施例的第三方面，提供一种电子设备，所述电子设备包括：
存储器，其上存储有计算机程序；
处理器，用于执行所述存储器中的所述计算机程序，以实现上述第一方面中的任一实施方式所述方法的步骤。
根据本公开实施例的第四方面，提供一种非临时性计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述第一方面所述方法的步骤。
本公开的实施例提供的技术方案可以包括以下有益效果：
上述技术方案中，首先获取目标图像的像素信息，之后根据所述像素信息，对待展示所述目标图像的目标页面中的指定元素的样式进行渲染，最后通过渲染完成后的所述目标页面展示所述目标图像。这样，根据所述像素信息呈现所述目标图像，以避免所述目标图像被不合法获取，提升了目标页面的页面信息的安全性。
应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。
图1是根据一示例性实施例示出的一种图像处理的方法的流程图。
图2是根据一示例性实施例示出的另一种图像处理的方法的流程图。
图3是根据一示例性实施例示出的又一种图像处理的方法的流程图。
图4是根据一示例性实施例示出的又一种图像处理的方法的流程图。
图5是根据一示例性实施例示出的一种图像处理的装置的框图。
图6是根据一示例性实施例示出的一种电子设备的框图。
具体实施方式
这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。
需要说明的是，本申请中所有获取信号、信息或数据的动作都是在遵照所在地国家相应的数据保护法规政策的前提下，并获得由相应装置所有者给予授权的情况下进行的。
首先，对本公开的应用场景进行说明，本公开可以应用于对互联网的图像资源进行保护的场景。在该场景下，网页开发者可以通过修改相关元素属性的方式防止网页资源被下载，例如，在HTML/CSS语言中，可以将<img>元素的user-select属性设置为none，从而避免用户在浏览该互联网页面时，该互联网页面展示的图像资源被选中，进而防止该图像资源被下载。但是相关技术中还有爬虫程序，该爬虫程序是能够按照预设规则，自动地抓取网络资源或信息的程序或者工具。通过爬虫程序，仍然可以抓取该图像资源。或者，如果用户有一定编程基础，使用浏览器的调试工具可以修改该目标页面中的<img>元素的user-select属性进而复制该目标页面的图像资源。
因此，本公开提供一种图像处理的方法、装置、电子设备及存储介质，该方法根据像素信息呈现目标图像，以避免目标图像被不合法获取，提升了目标页面的页面信息的安全性。
下面结合具体实施例对本公开进行说明。
图1是根据一示例性实施例示出的一种图像处理的方法的流程图，如图1所示，该方法可以包括以下步骤:
在步骤S101中，获取目标图像的像素信息。
其中，该目标图像可以是矢量图(例如png图像)，也可以是位图(例如jpg图像)，本公开对此不做限制。
示例地，该图像信息可以是组成该目标图像的每个像素的像素信息，该每个像素的像素信息可以使用RGBA四元组表征，其中RGB分别代表红色(Red)、绿色(Green)、蓝色(Blue)三原色的像素值，A(Alpha)代表不透明参数，其中RGB的取值范围为0～255，例如(255，0，0)代表红色，(255，255，255)代表白色。A的取值范围为0％～100％，其中0％代表完全透明，100％代表完全不透明。
示例地，在HTML/CSS中，可以通过getImageData方法获取该像素信息。具体方法可以参考相关技术中的描述，此处不再赘述。
在步骤S102中，根据像素信息，对待展示目标图像的目标页面中的指定元素的样式进行渲染。
以HTML/CSS为例，每一种元素用于规定特定的含义，通常使用尖括号(“<>”)表示，每个元素还可以有预定义的属性。样式(Style)是指一种改变HTML元素样式的方式。通过HTML样式，能够通过指定元素的Style属性直接将样式添加到HTML元素。
以<img>元素为例，该元素通常可以用来定义HTML页面中的目标图像，<img>元素中包括src属性，用以表征目标图像的地址信息，还可以包括width属性、height属性，用以规定显示图像的宽度和高度，如下是一个<img>元素的实际例子。
<img src＝"sample.jpg"width＝"42"height＝"42">。
在本实施例中，该指定元素的属性中不包含目标图像的地址属性，该地址属性可以表征目标图像的地址信息(如URL地址)，例如，上述<img>元素中的src属性即为地址属性，也就是说，<img>元素不属于本实施例中的指定元素。
示例地，以HTML/CSS为例，该指定元素可以是包含Style属性的元素，例如<p>元素或者<span>元素。
在指定元素的属性中包含目标图像的地址属性的情况下，爬虫程序根据可以轻易地通过该地址属性识别目标图像，从而非法获取该目标图像。因此，本实施例通过对目标页面中的指定元素的样式进行渲染，能够避免爬虫程序通过地址属性识别该目标图像，进而避免爬虫程序非法获取该目标图像。
在步骤S103中，通过渲染完成后的目标页面展示目标图像。
通过上述的技术方案，能够根据像素信息呈现目标图像，以避免目标图像被不合法获取，提升了目标页面的页面信息的安全性。
图2是根据一示例性实施例示出的另一种图像处理的方法的流程图，如图2所示，上述步骤S102可以包括以下步骤:
在步骤S1021中，获取目标图像的尺寸信息。
其中，该尺寸信息包括目标图像的宽度和高度，单位可以是该目标图像的像素数。
在根据像素信息对待展示目标图像的目标页面中的指定元素的样式进行渲染时，需要首先获取目标图像的尺寸信息，用以根据目标图像尺寸信息获取每个像素的位置信息，根据该位置信息和像素信息对目标页面中的指定元素的样式进行渲染。
示例地，可以通过JavaScript获取目标图像的尺寸信息。具体可以参考相关技术中的描述，此处不再赘述。
在步骤S1022中，根据预设渲染策略和像素信息，确定多个目标渲染像素。
在一些可能的实现方式中，为了保证目标页面中展示的目标图像的图像质量，该渲染策略可以包括质量优先渲染，在该实施方式中，将像素信息作为目标渲染像素，对待展示目标图像的目标页面中的指定元素的样式进行渲染。即将像素信息中的所有像素作为目标渲染像素，这样可以有效保障目标图像的图像质量。
在另一可能的实现方式中，为了提升目标页面中指定元素的样式的渲染性能，该渲染策略可以包括性能优先渲染，在该实施方式中，从像素信息中选取部分像素信息作为目标渲染像素，对待展示目标图像的目标页面中的指定元素的样式进行渲染。这样，在保障目标图像的质量不受大的影响的前提下，由于减少了需要渲染的像素数量，可以提升目标页面中指定元素的样式的渲染性能。
示例地，在该渲染策略为性能优先渲染的情况下，可以通过如下的步骤根据预设渲染策略和像素信息，确定多个目标渲染像素。
步骤1、在渲染策略为性能优先渲染的情况下，从多个预设的渲染样式中获取目标渲染样式。
其中，该目标渲染样式可以包括渲染Bitmap和\或条件渲染。示例地，渲染Bitmap表征使用Bitmap的方式指示多个像素中需要渲染的目标渲染像素，例如，渲染Bitmap“110110”表征每六个像素信息中的第一，第二、第四、第五为需要进行渲染的目标渲染像素，以此类推。条件渲染表征根据预设条件从多个像素信息中确定目标渲染像素，例如，在矢量图中，对透明度为0的像素点不进行渲染不会影响该目标图像的质量，该预设条件可以是像素的透明度不等于0，则将像素信息中所有不等于0的像素信息作为目标渲染像素。
步骤2、根据目标渲染样式从像素信息中确定目标渲染像素。
示例地，在目标渲染样式包括渲染Bitmap的情况下，根据预设的渲染Bitmap从多个像素信息中确定目标渲染像素；
在一种可能的实现方式中，可以根据像素信息中每个像素的序号以及预设的渲染Bitmap确定该目标渲染像素。
例如，该渲染Bitmap“110110”表征每六个像素信息中的第一，第二、第四、第五为需要进行渲染的目标渲染像素，则可以根据如下的公式一确定该目标渲染像素的序号。
i mod N∈J (公式一)
其中，i表示该目标渲染像素的序号，i＝1～K，K表示像素信息中像素的总个数，N表示该Bitmap的长度，本示例中的值为6，J表示Bitmap中需要渲染的像素的序号的集合，本示例中的值包括(1，2，4，5)。
或者，在目标渲染样式包括条件渲染的情况下，将多个像素信息中满足预设条件的像素信息作为目标渲染像素；
例如，该预设条件可以是像素的透明度不等于0，则将像素信息中所有不等于0的像素信息作为目标渲染像素。
或者，在目标渲染样式包括条件渲染和渲染Bitmap的情况下，根据预设的渲染Bitmap和预设条件从多个像素信息中确定目标渲染像素。
例如，该目标渲染样式也可以是上述条件渲染和渲染Bitmap的结合，即从像素信息中选取同时满足两个条件的像素作为该目标渲染像素。
在步骤S1023中，根据尺寸信息和多个目标渲染像素，对待展示目标图像的目标页面中的指定元素的样式进行渲染。
在一些实施例中，在渲染策略为质量优先渲染的情况下，可以通过如下的步骤根据尺寸信息和多个目标渲染像素，对待展示目标图像的目标页面中的指定元素的样式进行渲染。
步骤1、根据尺寸信息确定每个目标渲染像素的位置信息。
以HTML/CSS语言为例，该尺寸信息可以是以像素个数为单位的宽度和高度，例如目标图像的像素数量为800个，宽度为20像素，高度为40像素。该位置信息可以通过该目标渲染像素的可以通过如下的公式二和公式三根据尺寸信息分别确定每个目标渲染像素的横坐标和纵坐标。
xi＝(i-1)mod W+1 (公式二)
其中，xi表示目标渲染像素i的横坐标，W表示目标图像的宽度，i表示该目标渲染像素的序号，i＝1～K，K表示像素信息中像素的总个数。
yi＝floor(i/W)+1 (公式三)
其中，yi表示目标渲染像素i的纵坐标，W表示目标图像的宽度，i表示该目标渲染像素的序号，i＝1～K，K表示像素信息中像素的总个数，floor表示对参数进行向下取整。
步骤2、根据位置信息和目标渲染像素，对待展示目标图像的目标页面中的指定元素的样式进行渲染。
以HTML/CSS语言为例，该像素信息可以表征为如下公式四所示的数据。在渲染策略为质量优先渲染的情况下，该目标渲染像素包括所有的像素信息。
R1，G1，B1，A1，R2，G2，B2，A2，…，Rj，Gj，Bj，Aj，…(公式四)
其中，Rj，Gj，Bj分别表示目标渲染像素j的RGB三原色的像素值，Aj表示目标渲染像素j的透明度。
示例地，以该指定元素为<p>元素为例，可以通过如下方式对待展示目标图像的目标页面中的指定元素的样式进行渲染。
<p Style＝"box-shadow:rgba(R1，G1，B1，A1)x1px y1px,rgba(R2，G2，B2，A2)x2pxy2px,…,rgba(Rj，Gj，Bj，Aj)xjpx yjpx,…">
其中Style为<p>元素的样式，box-shadow为该样式的阴影属性，Rj，Gj，Bj，Aj分别表示目标渲染像素j的RGBA值，xj和yj分别表示目标渲染像素j的横坐标和纵坐标，px表示该横坐标和纵坐标的单位为像素。
在另一实施例中，在渲染策略为性能优先渲染的情况下，为了提升目标页面中指定元素的样式的渲染性能，该渲染策略可以包括性能优先渲染，在该实施方式中，从像素信息中选取部分像素信息作为目标渲染像素。示例地，可以通过如下的步骤根据尺寸信息和多个目标渲染像素，对待展示目标图像的目标页面中的指定元素的样式进行渲染。
步骤1、根据尺寸信息和目标渲染样式确定每个目标渲染像素的位置信息。示例地，可以首先通过公式一确定每个目标渲染像素的序号，再通过公式二、公式三确定每个目标渲染像素的位置信息。
步骤2、根据位置信息和目标渲染像素，对待展示目标图像的目标页面中的指定元素的样式进行渲染。
示例地，以该指定元素为<p>元素为例，可以通过如下方式对待展示目标图像的目标页面中的指定元素的样式进行渲染。
<p Style＝"box-shadow:…,rgba(Rj，Gj，Bj，Aj)xjpx yjpx,…">
其中，j表示目标渲染像素的序号，j可以是1～K中不连续的自然数，Rj，Gj，Bj，Aj分别表示目标渲染像素j的RGBA值，xj和yj分别表示目标渲染像素j的横坐标和纵坐标，px表示该横坐标和纵坐标的单位为像素。
通过上述的技术方案，能够在保障目标图像的质量不受大的影响的前提下，减少需要渲染的像素数量，从而可以提升目标页面中指定元素的样式的渲染性能。
图3是根据一示例性实施例示出的又一种图像处理的方法的流程图，如图3所示，步骤S101可以包括以下步骤:
在步骤S1011中，根据预设缩放比例缩小目标图像的尺寸，并获取缩小后的目标图像的像素信息。
示例地，该预设缩放比例可以为2:1，该比值越大，缩放比例越高，对目标图像的图像质量影响也越大。
在另一可能的实现方式中，通过将目标图像缩小，获取缩小后的目标图像的像素信息，对待展示目标图像的目标页面中的指定元素的样式进行渲染，也能够提升渲染性能。示例地，可以通过如下的步骤获取缩小后的目标像素的像素信息。
步骤1、获取目标图像的尺寸信息，该尺寸信息包括目标图像的宽度和高度。
示例地，可以通过JavaScript获取目标图像的尺寸信息。具体可以参考相关技术中的描述，此处不再赘述。
步骤2、根据该目标图像的宽度、高度以及预设缩放比例确定目标宽度和目标高度。
示例地，可以通过分别宽度和高度除以该预设缩放比例确定该目标宽度和目标高度。
步骤3、按照该目标宽度和目标高度生成目标图像对应的缩小目标图像。
示例地，在HTML/CSS中，可以根据该目标宽度和目标高度生成画布，通过drawImage方法将目标图像写入该画布，生成该缩小目标图像。
在获取到该缩小目标图像后，获取该缩小目标图像的像素信息，用以根据像素信息，对待展示目标图像的目标页面中的指定元素的样式进行渲染，通过渲染完成后的目标页面展示目标图像。具体可以参见步骤S102和步骤S103的描述，此处不再赘述。
通过上述的技术方案，能够在保障目标图像的质量不受大的影响的前提下，减少需要渲染的像素数量，从而可以提升目标页面中指定元素的样式的渲染性能。
图4是根据一示例性实施例示出的又一种图像处理的方法的流程图，如图4所示，该方法可以包括以下步骤:
在步骤S103之前，还可以包括步骤S104，在步骤S104中，根据预设缩放比例还原目标图像的尺寸。
在根据缩小后的目标图像的像素信息对待展示目标图像的目标页面中的指定元素的样式进行渲染之后，为了提升最终用户的体验，还可以根据预设的缩放比例还原目标图像的尺寸。
示例地，在HTML/CSS中，可以通过style.transform＝scale(2)的方式，这里scale的参数为该预设的缩放比例。
通过上述的技术方案，能够在保障目标图像的质量不受大的影响的前提下，减少需要渲染的像素数量，从而可以提升目标页面中指定元素的样式的渲染性能。
需要特别说明的是，本公开中的像素信息的表征方式，渲染的实现方式等是以HTML/CSS为示例进行讲解，并非用于限定本发明的保护范围，凡在本发明的精神和范围之内所作的任何修改、等同替换和改进，例如采用其他像素信息的表征方式，以及其他前端网页设计语言的实现方式，均包含在本公开的保护范围之内。
图5是根据一示例性实施例示出的一种图像处理的装置的框图，如图5所示，该图像处理的装置500，可以包括：
获取模块501，被配置为获取目标图像的像素信息；
渲染模块502，被配置为根据像素信息，对待展示目标图像的目标页面中的指定元素的样式进行渲染，指定元素为不包含目标图像的地址属性的元素；
展示模块503，被配置为通过渲染完成后的目标页面展示目标图像。
可选地，渲染模块502还被配置为：
获取目标图像的尺寸信息；
根据预设渲染策略和像素信息，确定多个目标渲染像素；
根据尺寸信息和多个目标渲染像素，对待展示目标图像的目标页面中的指定元素的样式进行渲染。
可选地，渲染策略包括质量优先渲染，渲染模块502还被配置为：
在渲染策略为质量优先渲染的情况下，将像素信息作为目标渲染像素；
根据尺寸信息确定每个目标渲染像素的位置信息；
根据位置信息和目标渲染像素，对待展示目标图像的目标页面中的指定元素的样式进行渲染。
可选地，渲染策略包括性能优先渲染，渲染模块502还被配置为：
在渲染策略为性能优先渲染的情况下，从多个预设的渲染样式中获取目标渲染样式；
根据目标渲染样式从像素信息中确定目标渲染像素；
根据尺寸信息和目标渲染样式确定每个目标渲染像素的位置信息；
根据位置信息和目标渲染像素，对待展示目标图像的目标页面中的指定元素的样式进行渲染。
可选地，目标渲染样式包括渲染Bitmap和\或条件渲染，渲染模块502还被配置为：
在目标渲染样式包括渲染Bitmap的情况下，根据预设的渲染Bitmap从多个像素信息中确定目标渲染像素；或者，
在目标渲染样式包括条件渲染的情况下，将多个像素信息中满足预设条件的像素信息作为目标渲染像素；或者，
在目标渲染样式包括条件渲染和渲染Bitmap的情况下，根据预设的渲染Bitmap和预设条件从多个像素信息中确定目标渲染像素。
可选地，获取模块501还被配置为：
根据预设缩放比例缩小目标图像的尺寸，并获取缩小后的目标图像的像素信息。
可选地，展示模块503还被配置为：
根据预设缩放比例还原目标图像的尺寸。
关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。
通过上述的技术方案，能够根据像素信息呈现目标图像，以避免目标图像被不合法获取，提升了目标页面的页面信息的安全性，还能够在保证图像质量前提下，提升渲染的性能，提升用户的体验。
图6是根据一示例性实施例示出的一种电子设备600的框图。如图6所示，该电子设备600可以包括：处理器601，存储器602。该电子设备600还可以包括多媒体组件603，输入/输出(I/O)接口604，以及通信组件605中的一者或多者。
其中，处理器601用于控制该电子设备600的整体操作，以完成上述的图像处理方法中的全部或部分步骤。存储器602用于存储各种类型的数据以支持在该电子设备600的操作，这些数据例如可以包括用于在该电子设备600上操作的任何应用程序或方法的指令，以及应用程序相关的数据，例如联系人数据、收发的消息、图片、音频、视频等等。该存储器602可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，例如静态随机存取存储器(Static Random Access Memory，简称SRAM)，电可擦除可编程只读存储器(Electrically Erasable Programmable Read-Only Memory，简称EEPROM)，可擦除可编程只读存储器(Erasable Programmable Read-Only Memory，简称EPROM)，可编程只读存储器(Programmable Read-Only Memory，简称PROM)，只读存储器(Read-Only Memory，简称ROM)，磁存储器，快闪存储器，磁盘或光盘。多媒体组件603可以包括屏幕和音频组件。其中屏幕例如可以是触摸屏，音频组件用于输出和/或输入音频信号。例如，音频组件可以包括一个麦克风，麦克风用于接收外部音频信号。所接收的音频信号可以被进一步存储在存储器602或通过通信组件605发送。音频组件还包括至少一个扬声器，用于输出音频信号。I/O接口604为处理器601和其他接口模块之间提供接口，上述其他接口模块可以是键盘，鼠标，按钮等。这些按钮可以是虚拟按钮或者实体按钮。通信组件605用于该电子设备600与其他设备之间进行有线或无线通信。无线通信，例如Wi-Fi，蓝牙，近场通信(Near FieldCommunication，简称NFC)，2G、3G、4G、NB-IOT、eMTC、或其他5G等等，或它们中的一种或几种的组合，在此不做限定。因此相应的该通信组件605可以包括：Wi-Fi模块，蓝牙模块，NFC模块等等。
在另一示例性实施例中，还提供了一种包括程序指令的非临时性计算机可读存储介质，该程序指令被处理器执行时实现上述的图像处理的方法的步骤。例如，该计算机可读存储介质可以为上述包括程序指令的存储器602，上述程序指令可由电子设备600的处理器601执行以完成上述的图像处理的方法。
本领域技术人员在考虑说明书及实践本公开后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。
应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (9)

1.一种图像处理的方法，其特征在于，所述方法包括：
获取目标图像的像素信息；
根据所述像素信息，对待展示目标图像的目标页面中的指定元素的样式进行渲染，所述指定元素为不包含所述目标图像的地址属性的元素；
通过渲染完成后的所述目标页面展示所述目标图像；
所述目标图像包括互联网页面展示的图像；
所述根据所述像素信息，对待展示所述目标图像的目标页面中的指定元素的样式进行渲染包括：
获取所述目标图像的尺寸信息；
根据预设渲染策略和所述像素信息，确定多个目标渲染像素；
根据所述尺寸信息和所述多个目标渲染像素，对待展示所述目标图像的目标页面中的指定元素的样式进行渲染。
2.根据权利要求1所述的方法，其特征在于，所述渲染策略包括质量优先渲染，所述根据预设渲染策略和所述像素信息，确定多个目标渲染像素包括：
在所述渲染策略为质量优先渲染的情况下，将所述像素信息作为目标渲染像素；
所述根据所述尺寸信息和所述多个目标渲染像素，对待展示所述目标图像的目标页面中的指定元素的样式进行渲染包括：
根据所述尺寸信息确定每个所述目标渲染像素的位置信息；
根据所述位置信息和所述目标渲染像素，对待展示所述目标图像的目标页面中的指定元素的样式进行渲染。
3.根据权利要求1所述的方法，其特征在于，所述渲染策略包括性能优先渲染，所述根据预设渲染策略和所述像素信息，确定多个目标渲染像素包括：
在所述渲染策略为性能优先渲染的情况下，从多个预设的渲染样式中获取目标渲染样式；
根据所述目标渲染样式从所述像素信息中确定所述目标渲染像素；
所述根据所述尺寸信息和所述多个目标渲染像素，对待展示所述目标图像的目标页面中的指定元素的样式进行渲染包括：
根据所述尺寸信息和所述目标渲染样式确定每个所述目标渲染像素的位置信息；
根据所述位置信息和所述目标渲染像素，对待展示所述目标图像的目标页面中的指定元素的样式进行渲染。
4.根据权利要求3所述的方法，其特征在于，所述目标渲染样式包括渲染Bitmap和\或条件渲染，所述根据所述目标渲染样式从所述像素信息中确定所述目标渲染像素包括：
在所述目标渲染样式包括渲染Bitmap的情况下，根据预设的渲染Bitmap从多个所述像素信息中确定所述目标渲染像素；或者，
在所述目标渲染样式包括条件渲染的情况下，将多个所述像素信息中满足预设条件的像素信息作为所述目标渲染像素；或者，
在所述目标渲染样式包括条件渲染和渲染Bitmap的情况下，根据预设的渲染Bitmap和所述预设条件从多个所述像素信息中确定所述目标渲染像素。
5.根据权利要求1至4中任一项所述的方法，其特征在于，所述获取目标图像的像素信息包括：
根据预设缩放比例缩小所述目标图像的尺寸，并获取缩小后的所述目标图像的像素信息。
6.根据权利要求5所述的方法，其特征在于，所述方法还包括：
根据所述预设缩放比例还原所述目标图像的尺寸。
7.一种图像处理的装置，其特征在于，所述装置包括：
获取模块，被配置为获取目标图像的像素信息；
渲染模块，被配置为根据所述像素信息，对待展示所述目标图像的目标页面中的指定元素的样式进行渲染，所述指定元素为不包含所述目标图像的地址属性的元素；
展示模块，被配置为通过渲染完成后的所述目标页面展示所述目标图像；
所述目标图像包括互联网页面展示的图像；
所述渲染模块，还被配置为：获取所述目标图像的尺寸信息；
根据预设渲染策略和所述像素信息，确定多个目标渲染像素；
根据所述尺寸信息和所述多个目标渲染像素，对待展示所述目标图像的目标页面中的指定元素的样式进行渲染。
8.一种电子设备，其特征在于，包括：
存储器，其上存储有计算机程序；
处理器，用于执行所述存储器中的所述计算机程序，以实现权利要求1-6中任一项所述方法的步骤。
9.一种非临时性计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现权利要求1-6中任一项所述方法的步骤。
CN202210458896.2A 2022-04-27 2022-04-27 图像处理的方法、装置、电子设备及存储介质 Active CN114896531B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210458896.2A CN114896531B (zh) 2022-04-27 2022-04-27 图像处理的方法、装置、电子设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210458896.2A CN114896531B (zh) 2022-04-27 2022-04-27 图像处理的方法、装置、电子设备及存储介质

Publications (2)

Publication Number Publication Date
CN114896531A CN114896531A (zh) 2022-08-12
CN114896531B true CN114896531B (zh) 2023-03-24

Family

ID=82718847

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210458896.2A Active CN114896531B (zh) 2022-04-27 2022-04-27 图像处理的方法、装置、电子设备及存储介质

Country Status (1)

Country Link
CN (1) CN114896531B (zh)

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110928543A (zh) * 2019-11-04 2020-03-27 北京小米移动软件有限公司 页面处理方法、装置及存储介质
CN113868651A (zh) * 2021-09-27 2021-12-31 中国石油大学(华东) 一种基于web日志的网站反爬虫方法
CN114254229A (zh) * 2021-12-22 2022-03-29 北京升明科技有限公司 网页渲染方法及装置

Family Cites Families (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8086957B2 (en) * 2008-05-21 2011-12-27 International Business Machines Corporation Method and system to selectively secure the display of advertisements on web browsers
CN105577684B (zh) * 2016-01-25 2018-09-28 北京京东尚科信息技术有限公司 防爬虫抓取的方法、服务端、客户端和系统
CN111339548B (zh) * 2018-12-18 2023-11-03 北京京东尚科信息技术有限公司 反爬虫的数据处理方法、装置、计算机设备及存储介质
CN112988557A (zh) * 2019-12-17 2021-06-18 腾讯科技（深圳）有限公司 一种搜索框定位方法、数据采集方法、装置及介质
CA3166296C (en) * 2020-01-30 2023-03-07 Stefan-Alexandru Ghiaus Systems and methods for product visualization using a single-page application
CN111506917A (zh) * 2020-03-31 2020-08-07 北京三快在线科技有限公司 页面展示方法、展示装置、可读存储介质及电子设备
CN112422543A (zh) * 2020-11-09 2021-02-26 建信金融科技有限责任公司 反爬虫方法和装置
CN112507260A (zh) * 2020-12-15 2021-03-16 平安国际智慧城市科技股份有限公司 网页加载方法及装置、电子设备、计算机可读存储介质
CN113282206A (zh) * 2021-07-22 2021-08-20 北京聚通达科技股份有限公司 页面数据显示方法、装置、存储介质及电子设备
CN114386059A (zh) * 2021-12-15 2022-04-22 北京五八信息技术有限公司 网页文本混淆反爬虫方法、装置、电子设备及存储介质

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110928543A (zh) * 2019-11-04 2020-03-27 北京小米移动软件有限公司 页面处理方法、装置及存储介质
CN113868651A (zh) * 2021-09-27 2021-12-31 中国石油大学(华东) 一种基于web日志的网站反爬虫方法
CN114254229A (zh) * 2021-12-22 2022-03-29 北京升明科技有限公司 网页渲染方法及装置

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
"A Fractional Hilbert Transform Order optimization Algorithm Based DE for Bearing Health Monitoring";Libao Deng;《2019 Chinese Control Conference (CCC)》;20191231;第2183-2186页 *
"Efficient rendering of projective model for image-based visualization";T. Werner;《Proceedings. Fourteenth International Conference on Pattern Recognition》;19981231;第1-3页 *

Also Published As

Publication number Publication date
CN114896531A (zh) 2022-08-12

Similar Documents

Publication Publication Date Title
KR102278932B1 (ko) 애플리케이션 프로그램 처리 방법 및 단말 디바이스
US9710883B2 (en) Flexible control in resizing of visual displays
US8907990B2 (en) Display system, display method, program, and recording medium
CN105608161A (zh) 一种加载进度的显示方法及终端
US8700985B2 (en) Collecting user feedback about web pages
US9141596B2 (en) System and method for processing markup language templates from partial input data
US11429558B2 (en) Mapping tests of spreadsheets in server-browser environments
CN108984070B (zh) 用于热力图成像的方法、装置、电子设备及可读介质
CN115600164A (zh) 一种添加定制水印的方法、装置、智能终端及存储介质
JP5303534B2 (ja) 体裁情報処理装置及び方法
CN110019037A (zh) 一种pdf文件展示方法、装置、设备及存储介质
US11429557B2 (en) Templatization of spreadsheets in browser environments
JP2005057671A (ja) ドキュメント処理装置、印刷システム、ドキュメントへのオブジェクト追加方法、およびプログラム
CN111813466A (zh) 水印添加方法、装置、终端设备及计算机存储介质
CN112686939B (zh) 景深图像的渲染方法、装置、设备及计算机可读存储介质
CN114896531B (zh) 图像处理的方法、装置、电子设备及存储介质
CN113467738A (zh) 显示对象的屏幕适配方法及装置、电子设备和存储介质
CN112464301A (zh) 一种图像显示方法及装置
CN105389308A (zh) 网页的显示处理方法及装置
JP2002108323A (ja) 情報端末装置及び記憶媒体
CN112559034A (zh) 骨架屏文件的生成方法及系统
CN112015416A (zh) 开发网页的校验方法、装置、电子设备及计算机可读介质
EP2983096B1 (en) Method for the real-time automatic modification on the server side of a web page to the end of visualizing a content superposed to the web page
US8291311B2 (en) Web display program conversion system, web display program conversion method and program for converting web display program
CN110109663B (zh) 一种设置全屏的方法及相关装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant