一种图像显示方法、计算设备及可读存储介质与流程

本发明涉及图像处理技术领域，特别涉及一种图像显示方法、计算设备及可读存储介质。

背景技术：

随着互联网的迅速发展，现在已经进入一个读图时代，尤其在网络营销活动中，优质的素材图片可以给用户带来深刻的视觉印象。网络营销应用中需要将大量的素材图片呈现给用户，而素材图片在获取过程中会由于拍摄距离不同，其可视区域占据整个图片比例不同。在图片分辨率一致的情况下，由于拍摄距离远的图片中大部分面积被透明区域占据，导致图片中的商品在视觉上明显小于拍摄距离近的图片中的商品，这种情况会导致用户视觉上的落差。但是，由于浏览器能力限制，无法获取图中透明区域的占比，故而无法通过尺寸计算，获取需要缩放的比例。这种情况下，如果通过人工对每一张素材图片通过缩放进行标准化处理将会产生很大的工作量，同时，只凭主观感觉确定比例，导致准确率得不到保证。

技术实现要素：

为此，本发明提供了一种图像显示方法和计算设备，以力图解决或者至少缓解上面存在的问题。

根据本发明的一个方面，提供了一种图像显示方法，包括步骤：获取待处理图像；创建预定尺寸的图像处理空间，图像处理空间中的每个像素点包括颜色和透明度信息；在所创建的图像处理空间中绘制待处理图像，以便图像处理空间中的每个像素点的颜色和透明度信息与待处理图像的颜色和透明度相对应；根据透明度值非零的像素点的位置和图像处理空间的预定尺寸来确定待处理图像的缩放比例；以及显示以所确定的缩放比例进行缩放的待处理图像。

可选的，在根据本发明的图像显示方法中，确定待处理图像的缩放比例的步骤包括：根据透明度值非零的像素点的位置来确定待处理图像在图像处理空间中的可视区域实际尺寸w；根据待处理图像的可视区域实际尺寸w和图像处理空间的预定尺寸r来计算待处理图像的缩放比例s＝r/w。

可选的，在根据本发明的图像显示方法中，确定待处理图像在图像处理空间中的可视区域实际尺寸w的步骤包括:根据图像处理空间中的透明度值非零的像素点的位置和图像处理空间的预定尺寸来计算待处理图像的可视区域左侧与图像处理空间的左侧的距离wl以及待处理图像的可视区域右侧与图像处理空间的右侧的距离wr；根据wl、wr以及图像处理空间的预定尺寸计算待处理图像的可视区域的实际尺寸w＝wp-wl-wr，其中wp为图像处理空间的预定宽度。

可选的，在根据本发明的图像显示方法中，确定待处理图像在图像处理空间中的可视区域实际尺寸w的步骤还可以包括:根据图像处理空间中的透明度非零的像素点的位置和图像处理空间的预定尺寸来计算获取待处理图像的可视区域左侧与图像处理空间的左侧的距离wl；根据wl、以及图像处理空间的预定尺寸计算待处理图像的可视区域的实际尺寸w＝wp-2wl，其中wp为图像处理空间的预定宽度。

可选的，在根据本发明的图像显示方法中，透明度非零的像素点的位置包括待处理图像在图像处理空间中的可视区域左侧透明度非零的像素点和待处理图像在图像处理空间中的可视区域右侧透明度非零的像素点。

可选的，在根据本发明的图像显示方法中，还包括确定透明度非零的像素点的位置的步骤，步骤包括：针对绘制有待处理图像的图像处理空间从左向右逐列进行检测，当检测到某一列像素中存在透明度值为非零的像素点时停止检测并根据检测结果确定左侧透明度非零的像素点的位置；

可选的，在根据本发明的图像显示方法中，对绘制有待处理图像的图像处理空间从左向右逐列进行像素透明度检测包括：以一维数组的方式来存储绘制有所述待处理图像的所述图像处理空间的像素信息，其中所述图像处理空间中的各个像素按照逐行逐列的顺序在所述一维数组中存储，而且每个像素的颜色和透明度信息分别对应于一个数组元素；对所述一维数组中每一列像素对应的数组元素进行逐列检测，对每一列像素从上到下依次检测该列的每一个像素点，若其中某个像素点的像素透明度值非零，确定所述透明度值非零像素点在该列，根据该列的列标号确定所述透明度值非零像素点的位置。

可选的，在根据本发明的图像显示方法中，该方法适于在支持浏览器引擎的应用中执行，以及图像处理空间为画布(canvas)对象。

可选的，在根据本发明的图像显示方法中，该方法在支持浏览器引擎的应用中执行时的实现方式包括：通过应用中支持的层叠样式表(css)根据缩放比例对待处理图像进行缩放后将其显示在应用的显示界面中。

根据本发明的又一个方面，提供一种计算设备，包括：至少一个处理器；以及存储器，存储有程序指令，其中，程序指令被配置为适于由至少一个处理器执行，程序指令包括用于执行根据本发明的图像显示方法的指令。

根据本发明的又一个方面，提供一种存储有程序指令的可读存储介质，当程序指令被计算设备读取并执行时，使得移动终端执行根据本发明的图像显示方法。

根据本发明的图像显示方法，在获取到待显示图像后，将图像作为待处理图像绘制在创建的预定尺寸的图像处理空间中，根据像素透明度值非零点和图像处理空间的预定尺寸确定所述待处理图像的缩放比例，最后将缩放后的待处理图像进行显示。在上述方案中，将图像显示比例不统一的素材图片在显示前完成自动化缩放，使得所显示的图像呈现标准比例，消除了因图片显示比例不同给用户造成的视觉错误，同时省去了对大量素材图片进行人工标准化处理的工作。

canvas是html5中的新增标签，利用canvas进行图像处理，可以对图像中的每一个像素点进行操作，根据每个像素点包含的rgba四个通道可以将canvas中的图像数据转换成一维数组，数组中的元素对应图像中像素点的一个通道，在该一维数组中查找图像每列像素对应的元素并逐列判断每个像素点透明度信息可以快速计算出图像的尺寸，进而完成缩放，所以在支持html5的应用中均可以通过canvas完成图像的缩放。

附图说明

为了实现上述以及相关目的，本文结合下面的描述和附图来描述某些说明性方面，这些方面指示了可以实践本文所公开的原理的各种方式，并且所有方面及其等效方面旨在落入所要求保护的主题的范围内。通过结合附图阅读下面的详细描述，本公开的上述以及其它目的、特征和优势将变得更加明显。遍及本公开，相同的附图标记通常指代相同的部件或元素。

图1示出了根据本发明一个实施例的计算设备100的框图；

图2示出了根据跟发明一个实施例的图像显示方法200的流程图；

图3示出了根据本发明一个实施例的图像显示方法将待处理图像绘制到图像处理空间时的显示效果图；

图4示出了根据本发明的一个实施例的图像显示方法将待处理图像进行处理后的显示效果图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

图1示出了根据本发明一个实施例的计算设备100的示意图。在基本的配置102中，计算设备100典型地包括系统存储器106和一个或者多个处理器104。存储器总线108可以用于在处理器104和系统存储器106之间的通信。

取决于期望的配置，处理器104可以是任何类型的处理，包括但不限于：微处理器(μp)、微控制器(μc)、数字信息处理器(dsp)或者它们的任何组合。处理器104可以包括诸如一级高速缓存110和二级高速缓存112之类的一个或者多个级别的高速缓存、处理器核心114和寄存器116。示例的处理器核心114可以包括运算逻辑单元(alu)、浮点数单元(fpu)、数字信号处理核心(dsp核心)或者它们的任何组合。示例的存储器控制器118可以与处理器104一起使用，或者在一些实现中，存储器控制器118可以是处理器104的一个内部部分。

取决于期望的配置，系统存储器106可以是任意类型的存储器，包括但不限于：易失性存储器(诸如ram)、非易失性存储器(诸如rom、闪存等)或者它们的任何组合。系统存储器106可以包括操作系统120、一个或者多个应用122以及程序数据124。应用122实际上是多条程序指令，其用于指示处理器104执行相应的操作。在一些实施方式中，应用122可以布置为在操作系统上使得处理器104利用程序数据124进行操作。

计算设备100还可以包括有助于从各种接口设备(例如，输出设备142、外设接口144和通信设备146)到基本配置102经由总线/接口控制器130的通信的接口总线140。示例的输出设备142包括图形处理单元148和音频处理单元150。它们可以被配置为有助于经由一个或者多个a/v端口152与诸如显示器或者扬声器之类的各种外部设备进行通信。示例外设接口144可以包括串行接口控制器154和并行接口控制器156，它们可以被配置为有助于经由一个或者多个i/o端口158和诸如输入设备(例如，键盘、鼠标、笔、语音输入设备、触摸输入设备)或者其他外设(例如打印机、扫描仪等)之类的外部设备进行通信。示例的通信设备146可以包括网络控制器160，其可以被布置为便于经由一个或者多个通信端口164与一个或者多个其他计算设备162通过网络通信链路的通信。

网络通信链路可以是通信介质的一个示例。通信介质通常可以体现为在诸如载波或者其他传输机制之类的调制数据信号中的计算机可读指令、数据结构、程序模块，并且可以包括任何信息递送介质。“调制数据信号”可以这样的信号，它的数据集中的一个或者多个或者它的改变可以在信号中编码信息的方式进行。作为非限制性的示例，通信介质可以包括诸如有线网络或者专线网络之类的有线介质，以及诸如声音、射频(rf)、微波、红外(ir)或者其它无线介质在内的各种无线介质。这里使用的术语计算机可读介质可以包括存储介质和通信介质二者。

在根据本发明的计算设备100中，应用122包括用户数据存储应用128，用户数据存储应用128包括多条程序指令，而程序数据124可以包括由数据存储装置110中获取到的各条用户行为记录。装置228可以指示处理器204执行用户数据存储方法300，对程序数据224进行分析处理，以便于将第一数据存储装置110中的用户行为记录转存于第二数据存储装置120中，以提高数据存储效率，并便于计算分析。

计算设备100可以实现为小尺寸便携(或者移动)电子设备的一部分，这些电子设备可以是诸如蜂窝电话、个人数字助理(pda)、个人媒体播放器设备、无线网络浏览设备、个人头戴设备、应用专用设备、或者可以包括上面任何功能的混合设备。计算设备100还可以实现为包括桌面计算机和笔记本计算机配置的个人计算机。在一些实施例中，计算设备100被配置为执行本发明一实施例的图像显示方法。

如图2，示出了根据本发明一个实施例的图像显示方法200的流程图。

如图2所示，方法200始于步骤s210，获取待处理图像。根据本发明的一个实施例，可以通过下述方式获取待处理图像，在用户浏览网页时，当用户选定浏览的目标图像时，即完成了获取待处理图像的过程。通过步骤s210，可以获取到我们所要处理的图像。

可选的，在执行步骤s210之前，还包括对素材图像进行预处理的步骤，例如，图像色彩饱和度调整、剪裁、居中等处理。

随后，进入步骤s220中，创建预定尺寸的图像处理空间。根据本发明的一个实施例，图像处理空间用于绘制及处理待处理图像，图像处理空间的预定尺寸可根据实际需要设定。在一个具体示例中，本发明实施例的图像显示方法在在支持html5的浏览器中实现，图像处理空间为canvas画布，预定尺寸包括画布的像素宽度和像素高度。

随后，进入步骤s230中，在图像处理空间绘制待处理图像。根据本发明的一个实施例，将用户选定的待显示图片作为待处理图像绘制在canvas画布上。

随后，进入步骤s240，根据透明度值非零的像素点的位置和所述图像处理空间的预定尺寸来确定所述待处理图像的缩放比例。根据本发明的一实施例，待处理图像可视区域在图像处理空间的位置居中，本步骤可以分为如下三步：

1)获取经s230处理后的图像处理空间中待处理图像的透明度非零的像素点的位置。

假设图像处理空间的像素宽度为wp，像素高度为wh，首先，对图像处理空间的每一个列像素进行编号0,1,2,3……wp，对每一行像素进行编号0,1,2,3……wh，每个像素点都有rgba四个值，所以可以将图像处理空间看做是一个长度为4×wp×wh一维数组，则第j列第i行的像素点对应数组中的i×wp×4+j×4，i×wp×4+j×4+1，i×wp×4+j×4+2，i×wp×4+j×4+3四个元素，其中第i×wp×4+j×4+3个元素标识该像素点的透明度值。

对上述绘制待处理图像的图像处理空间从左向右逐列进行检测，从上到下依次对每列中的每个元素进行检测，当检测到第n列中存在透明度值非零的像素点时停止检测，并确定透明度值非零像素点的位置为第n列。

2)根据1)中获取的待处理图像的透明度非零的像素点的位置计算待处理图像可视区域的宽度w＝wp-2×n。

3)根据待处理图像的可视区域的宽度和图像处理空间的宽度计算待处理图像的缩放比例

下面给出本发明的一个实施例的计算缩放比例的函数代码：

例如，图像处理空间的像素宽度为300，高度为180，并绘制有待处理图像如图3所示。该图像处理空间可看做是一个包含300*180*4个元素的一维数组，第j列第i行的像素点的透明度值对应数组中的第i*300*4+j*4+3，对绘制有待处理图像的图像处理空间的每一列像素从左到右逐列进行检测，同时检测每一列像素时从上到下依次检测，假设第10列检测到透明度值非零的像素点，则计算待处理图像可视区域宽度为w＝300-2*30＝240,计算图像的缩放比例为s＝300/240＝1.25。

根据本发明的又一实施例，待处理图像可视区域在图像处理空间的位置不居中，透明度非零的像素点的位置包括待处理图像在图像处理空间中的可视区域左侧透明度非零的像素点和待处理图像在所述图像处理空间中的可视区域右侧透明度非零的像素点，确定待处理图像的可视区域的尺寸w＝wp-wl-wr；wp为图像处理空间的预定尺寸，wl为可视区域的左侧到图像处理空间左侧的距离，wr为可视区域的右侧到图像处理空间的右侧的距离，根据待处理图像的可视区域的宽度和图像处理空间的宽度计算待处理图像的缩放比例

随后进入步骤s250，显示以所确定的缩放比例进行缩放的待处理图像。根据本发明的一实施例，在支持html5的浏览器引擎的应用中，通过其支持的层叠样式表(css)根据所述缩放比例对待处理图像缩放后显示在应用的显示界面中。

将上述示例中的图像进行缩放的效果图如图4所示。

当然，以上只是根据绘制有待处理图像的canvas画布中透明度值非零点的像素点位置和canvas画布的尺寸计算待处理图像的缩放比例的一个示例，本领域技术人员可以根据实际需要选用任意算法，本发明对待处理图像缩放比例的具体算法不做限制。

这里描述的各种技术可结合硬件或软件，或者它们的组合一起实现。从而，本发明的方法和设备，或者本发明的方法和设备的某些方面或部分可采取嵌入有形媒介，例如可移动硬盘、u盘、软盘、cd-rom或者其它任意机器可读的存储介质中的程序代码(即指令)的形式，其中当程序被载入诸如计算机之类的机器，并被所述机器执行时，所述机器变成实践本发明的设备。

在程序代码在可编程计算机上执行的情况下，计算设备一般包括处理器、处理器可读的存储介质(包括易失性和非易失性存储器和/或存储元件)，至少一个输入装置，和至少一个输出装置。其中，存储器被配置用于存储程序代码；处理器被配置用于根据该存储器中存储的所述程序代码中的指令，执行本发明的图像显示方法。

以示例而非限制的方式，可读介质包括可读存储介质和通信介质。可读存储介质存储诸如计算机可读指令、数据结构、程序模块或其它数据等信息。通信介质一般以诸如载波或其它传输机制等已调制数据信号来体现计算机可读指令、数据结构、程序模块或其它数据，并且包括任何信息传递介质。以上的任一种的组合也包括在可读介质的范围之内。

在此处所提供的说明书中，算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与本发明的示例一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下被实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员应当理解在本文所公开的示例中的设备的模块或单元或组件可以布置在如该实施例中所描述的设备中，或者可替换地可以定位在与该示例中的设备不同的一个或多个设备中。前述示例中的模块可以组合为一个模块或者此外可以分成多个子模块。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

本发明还公开了：

a9、如a8所述的图像显示方法，其中，所述方法在支持浏览器引擎的应用中执行时的实现方式包括：

通过应用中支持的层叠样式表(css)根据所述缩放比例对所述待处理图像进行缩放后将其显示在应用的显示界面中。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

此外，所述实施例中的一些在此被描述成可以由计算机系统的处理器或者由执行所述功能的其它装置实施的方法或方法元素的组合。因此，具有用于实施所述方法或方法元素的必要指令的处理器形成用于实施该方法或方法元素的装置。此外，装置实施例的在此所述的元素是如下装置的例子：该装置用于实施由为了实施该发明的目的的元素所执行的功能。

如在此所使用的那样，除非另行规定，使用序数词“第一”、“第二”、“第三”等等来描述普通对象仅仅表示涉及类似对象的不同实例，并且并不意图暗示这样被描述的对象必须具有时间上、空间上、排序方面或者以任意其它方式的给定顺序。

尽管根据有限数量的实施例描述了本发明，但是受益于上面的描述，本技术领域内的技术人员明白，在由此描述的本发明的范围内，可以设想其它实施例。此外，应当注意，本说明书中使用的语言主要是为了可读性和教导的目的而选择的，而不是为了解释或者限定本发明的主题而选择的。因此，在不偏离所附权利要求书的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。对于本发明的范围，对本发明所做的公开是说明性的，而非限制性的，本发明的范围由所附权利要求书限定。