CN110308844B - 图像数据处理方法及计算机存储介质 - Google Patents
图像数据处理方法及计算机存储介质 Download PDFInfo
- Publication number
- CN110308844B CN110308844B CN201810258594.4A CN201810258594A CN110308844B CN 110308844 B CN110308844 B CN 110308844B CN 201810258594 A CN201810258594 A CN 201810258594A CN 110308844 B CN110308844 B CN 110308844B
- Authority
- CN
- China
- Prior art keywords
- image
- rolling
- gpu
- scroll
- video memory
- 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
Links
- 238000003860 storage Methods 0.000 title claims abstract description 20
- 238000003672 processing method Methods 0.000 title claims abstract description 16
- 238000005096 rolling process Methods 0.000 claims abstract description 178
- 238000012545 processing Methods 0.000 claims abstract description 89
- 238000004422 calculation algorithm Methods 0.000 claims abstract description 55
- 238000009877 rendering Methods 0.000 claims abstract description 42
- 238000000034 method Methods 0.000 claims description 47
- 230000008569 process Effects 0.000 description 27
- 230000000694 effects Effects 0.000 description 20
- 238000010586 diagram Methods 0.000 description 14
- 238000004519 manufacturing process Methods 0.000 description 8
- 238000004590 computer program Methods 0.000 description 7
- 230000006870 function Effects 0.000 description 7
- 230000008859 change Effects 0.000 description 5
- 238000012886 linear function Methods 0.000 description 5
- 230000003287 optical effect Effects 0.000 description 3
- 230000001960 triggered effect Effects 0.000 description 3
- 238000013459 approach Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000033001 locomotion Effects 0.000 description 2
- 230000009466 transformation Effects 0.000 description 2
- 230000003044 adaptive effect Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 125000004122 cyclic group Chemical group 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 239000000463 material Substances 0.000 description 1
- 239000011159 matrix material Substances 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 230000005055 memory storage Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012805 post-processing Methods 0.000 description 1
- 238000007781 pre-processing Methods 0.000 description 1
- 230000000644 propagated effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0485—Scrolling or panning
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
- G06T13/80—2D [Two Dimensional] animation, e.g. using sprites
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Processing Or Creating Images (AREA)
- Controls And Circuits For Display Device (AREA)
Abstract
本发明实施例提供了一种图像数据处理方法及计算机存储介质,其中,所述图像数据处理方法包括:通过浏览器将待处理的图像加载到图形处理器GPU的显存中;通过所述浏览器向所述GPU传递预设的滚动偏移量和滚动控制参数,通过所述GPU调用与所述滚动控制参数对应的滚动控制算法,控制所述滚动控制算法按照所述滚动偏移量对所述显存中的图像进行滚动处理;根据所述滚动处理的结果,在所述浏览器中对所述图像进行图像渲染。通过本发明实施例,有效实现了在网络课堂中的滚动动画,且实现成本低。
Description
技术领域
本发明实施例涉及计算机技术领域,尤其涉及一种图像数据处理方法及计算机存储介质。
背景技术
随着计算机和互联网技术的发展,借助于计算机和网络辅助学习和教学已成为一种趋势。为了提高网络课堂的趣味性,吸引学生的注意力,网络课堂引入了滚动动画的方式,如,以滚动动画作为网络课堂背景。
目前,网络课堂中滚动动画的实现方式一种为通过动图实现,一种为通过视频实现。其中,动图方式中,需要使用多张图像制作成类似GIF格式的动图,来达到滚动效果,这种方式制作成本高、文件大、改动困难,对滚动速度控制难。而视频方式中,需要将多张图像制作成视频,制作成本更高、文件更大、更难以改动。
因此,如何在网络课堂中以较低成本实现滚动动画的效果,成为亟待解决的问题。
发明内容
有鉴于此,本发明实施例提供了一种图像数据处理方法及装置,以解决如何在网络课堂中以较低成本实现滚动动画的效果的问题。
根据本发明实施例的第一方面,提供了一种图像数据处理方法,包括:通过浏览器将待处理的图像加载到图形处理器GPU的显存中;通过所述浏览器向所述GPU传递预设的滚动偏移量和滚动控制参数,通过所述GPU调用与所述滚动控制参数对应的滚动控制算法,控制所述滚动控制算法按照所述滚动偏移量对所述显存中的图像进行滚动处理;根据所述滚动处理的结果,在所述浏览器中对所述图像进行图像渲染。
根据本发明实施例的第二方面,还提供了一种计算机存储介质,所述计算机存储介质中存储有:用于通过浏览器将待处理的图像加载到图形处理器GPU的显存中的指令;用于通过所述浏览器向所述GPU传递预设的滚动偏移量和滚动控制参数,通过所述GPU调用与所述滚动控制参数对应的滚动控制算法,控制所述滚动控制算法按照所述滚动偏移量对所述显存中的图像进行滚动处理的指令;用于根据所述滚动处理的结果,在所述浏览器中对所述图像进行图像渲染的指令。
根据本发明实施例提供的方案,浏览器网页控制GPU(Graphics ProcessingUnit,图形处理器)处理待处理的图像,根据预设的滚动偏移量和滚动控制参数进行滚动处理及渲染显示。采用这种方式,只需将待处理的原始图像加载进GPU的显存中即可,无需进行滚动效果的文件制作,节约了制作成本;原始图像相对于制作出的文件,尺寸更小,更易于处理和存储;此外,滚动效果通过编辑网页语言即可实现,可根据实际滚动需要灵活设置,既方便改动又易于对滚动效果进行控制。由此,有效实现了在网络课堂中的滚动动画,且实现成本低。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明实施例中记载的一些实施例,对于本领域普通技术人员来讲,还可以根据这些附图获得其他的附图。
图1是根据本发明实施例一的一种图像数据处理方法的步骤流程图;
图2是根据本发明实施例二的一种图像数据处理方法的步骤流程图;
图3是根据本发明实施例三的一种图像数据处理方法的步骤流程图;
图4是图3所示实施例中的一种通过GPU进行图像滚动处理的处理结果示意图;
图5是图3所示实施例中的另一种通过GPU进行图像滚动处理的处理结果示意图;
图6是图3所示实施例中的一种拼接后的图像示意图;
图7是图3所示实施例中的另一种拼接后的图像示意图;
图8是图3所示实施例中的一种通过图像拼接进行图像滚动处理的示意图;
图9是图3所示实施例中的另一种通过图像拼接进行图像滚动处理的示意图。
具体实施方式
当然,实施本发明实施例的任一技术方案必不一定需要同时达到以上的所有优点。
为了使本领域的人员更好地理解本发明实施例中的技术方案,下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅是本发明实施例一部分实施例,而不是全部的实施例。基于本发明实施例中的实施例,本领域普通技术人员所获得的所有其他实施例,都应当属于本发明实施例保护的范围。
实施例一
参照图1,示出了根据本发明实施例一的一种图像数据处理方法的步骤流程图。
本实施例的图像数据处理方法包括以下步骤:
步骤S102:通过浏览器将待处理的图像加载到GPU的显存中。
本实施例的方案通过网页端实现,也即,通过浏览器及其网页实现,在进行图像的滚动处理时,先将待处理的原始图像加载到GPU的显存中。其中,该浏览器可以是独立的浏览器,也可以是应用程序中通过浏览器组件实现的浏览器。
GPU主要用来处理显示信息,在处理的过程中,会产生大量的临时数据(未处理的、正在处理的、已经处理完成的),这些临时数据通过显存进行存储。
该待处理的图像可能是一张图像,也可能包括多张(两张及两张以上)图像。若为一张图像,则可以实现单张图像的循环滚动;若为多张图像,则一种情况下,该多张图像可以作为一个整体,进行这个整体图像的循环滚动,另一种情况下,可以按照预先设定,在其中的一张图像循环滚动一定时间后再循环滚动另一张图像,等等。
步骤S104:通过浏览器向GPU传递预设的滚动偏移量和滚动控制参数,通过GPU调用与滚动控制参数对应的滚动控制算法,控制滚动控制算法按照滚动偏移量对所述显存中的图像进行滚动处理。
其中,滚动偏移量用于指示图像的滚动偏移的程度,包括横向(水平方向)和/或纵向(竖直方向)偏移量。滚动控制参数用于控制图像的滚动模式,如,进行匀速滚动或变速滚动等等。GPU会根据滚动控制参数调用对应的滚动控制算法,按照滚动偏移量对图像进行滚动处理。
在具体实现时,可以通过网页代码实现所述通过浏览器向GPU传递预设的滚动偏移量和滚动控制参数,通过GPU调用与滚动控制参数对应的滚动控制算法,控制滚动控制算法按照滚动偏移量对所述显存中的图像进行滚动处理。例如,首先由浏览器将滚动偏移量和滚动控制参数传递给GPU;GPU在接收到滚动偏移量和滚动控制参数后,根据滚动控制参数调用相应的滚动控制算法,进而控制滚动控制算法以滚动偏移量为依据,对图像进行滚动处理。其中,GPU对滚动偏移量和滚动控制参数的上述处理可以通过驱动GPU的语言如GLSL语言实现。GLSL语言又称着色器语言,用来在OpenGL中着色编程,开发人员可以编写的短小的自定义程序,在GPU上执行的,代替固定渲染管线的一部分,使渲染管线中不同层次具有可编程性。GLSL使用C语言作为基础高阶着色语言,避免了使用汇编语言或硬件规格语言的复杂性。
步骤S106:根据滚动处理的结果,在浏览器中对所述图像进行图像渲染。
在GPU对图像进行了滚动处理后,即可在浏览器中显示滚动处理的效果,如显示滚动处理的浏览器背景或网页课堂的背景等。
根据本实施例,浏览器网页控制GPU处理待处理的图像,根据预设的滚动偏移量和滚动控制参数进行滚动处理及渲染显示。采用这种方式,只需将待处理的原始图像加载进GPU的显存中即可,无需进行滚动效果的文件制作,节约了制作成本;原始图像相对于制作出的文件,尺寸更小,更易于处理和存储;此外,滚动效果通过编辑网页语言即可实现,可根据实际滚动需要灵活设置,既方便改动又易于对滚动效果进行控制。由此,有效实现了在网络课堂中的滚动动画,且实现成本低。
实施例二
参照图2,示出了根据本发明实施例二的一种图像数据处理方法的步骤流程图。
本实施例的图像数据处理方法包括以下步骤:
步骤S202:确定需要对待处理的图像进行滚动处理。
其中,对图像是否需要进行滚动处理的判断可以由本领域技术人员根据实际需要采用任意适当的方式,例如,当某种触发条件被触发时进行判断,如判断需要加载滚动背景或者某种滚动操作的选项被触发等等,本发明实施例对此不作限制。
步骤S204:判断当前浏览器是否支持硬件渲染模式;若支持,则执行步骤S206-S210;若不支持,则执行步骤S212-S216,通过图像拼接在浏览器中进行待处理的图像的滚动处理。
硬件渲染模式即通过GPU进行图像渲染的模式,若浏览器可以通过GPU进行图像渲染,则认为浏览器支持硬件渲染模式;否则,则认为浏览器不支持硬件渲染模式,需要进行软件渲染处理,即通过图像拼接在浏览器中进行待处理的图像的滚动处理。
步骤S206:通过浏览器将待处理的图像加载到GPU的显存中。
在整个图像滚动显示的生命周期中,原始图像仅加载到GPU显存中一次,浏览器所在设备的内存和GPU显存不存在反复交换,节省了资源。
步骤S208:通过浏览器向GPU传递预设的滚动偏移量和滚动控制参数,通过GPU调用与滚动控制参数对应的滚动控制算法,控制滚动控制算法按照滚动偏移量对GPU显存中的图像进行滚动处理。
其中,滚动偏移量可以为横向即水平方向的滚动偏移量,这种情况下,图像水平滚动;滚动偏移量也可以为纵向即竖直方向的滚动偏移量,这种情况下,图像竖直滚动;滚动偏移量还可以为横向和纵向的偏移量,这种情况下,图像斜向滚动。
滚动控制参数用于控制图像滚动的模式,在一种可行方式中,滚动控制参数包括用于指示进行匀速滚动的参数或者用于指示进行变速滚动的参数,即图像可以进行匀速滚动或者进行变速滚动。不同的滚动模式对应不同的滚动控制算法,例如,通过线性函数实现图像的匀速滚动,通过非线性函数实现图像的变速滚动,等等。通过不同的图像滚动模式,可以灵活地实现不同的图像滚动需要,也提升了显示效果和用户使用体验。基于此,通过GPU调用与滚动控制参数对应的滚动控制算法,控制滚动控制算法按照滚动偏移量对GPU显存中的图像进行滚动处理可以包括:通过GPU调用与用于指示进行匀速滚动的参数对应的匀速滚动控制算法,控制匀速滚动控制算法按照滚动偏移量对GPU显存中的图像进行匀速滚动处理;或者,通过GPU调用与用于指示进行变速滚动的参数对应的变速滚动控制算法,控制变速滚动控制算法按照滚动偏移量对GPU显存中的图像进行变速滚动处理。
在具体实现时,一种可行方式中,可以在步骤S206通过浏览器将待处理的图像加载到GPU的显存之前,将待处理的图像划分为多个不同区块。其中,具体的划分方式可以由本领域技术人员根据实际需要采用任意适当的划分方式,能满足图像滚动处理需要即可。一般来说,可以采用平均划分的方式,例如,一张100*100像素的图像,可以平均划分为10*10个区块,每个区块大小为10*10个像素;又例如,一张100*150像素的图像,可以划分为10*15个区块,横向15个,纵向10个,每个区块的大小为10*10个像素。通过将待处理的图像划分为多个不同区块,以区块为单位而不是像素为单位进行处理,区块尺寸大于像素尺寸,可以有效提高图像滚动处理的速度和效率。
基于划分的多个不同区块,在控制滚动控制算法按照滚动偏移量对GPU显存中的图像进行滚动处理时,可以控制滚动控制算法根据每个区块的原坐标和滚动偏移量,确定每个区块的新坐标,根据每个区块的新坐标对GPU显存中的图像进行滚动处理。例如,滚动偏移量指示对图像水平左移10个像素或一个区块的位置,则可以将每个区块的原坐标和横坐标加上10个像素的横向距离或一个区块的横向距离,提高图像滚动处理的速度和效率。
步骤S210:根据GPU对GPU显存中的图像进行滚动处理的结果,在浏览器中对所述图像进行图像渲染。
其中,图像渲染可以由本领域技术人员根据实际需求采用任意适当的常规方式实现,本发明实施例地此不作限制。
通过上述步骤S206-S210的过程,实现了通过硬件即GPU对浏览器中的图像进行滚动处理。
而若当前浏览器不支持硬件渲染模式,则需要通过软件方式实现图像滚动处理,如下述步骤S212-S216中通过图像拼接在浏览器中进行待处理的图像的滚动处理。
步骤S212:对待处理的图像进行图像拼接。
本步骤可以在浏览器所在的终端设备的内存中实现,也即,对待处理的原始图像在内存中做拼接。
可选地,在对待处理的图像进行图像拼接时,可以先复制待处理的图像,并将复制后的图像在水平方向上与待处理的图像进行拼接;再复制拼接后的图像,并将复制后的图像在竖直方向上与拼接后的图像进行再次拼接。或者,也可以先复制待处理的图像,并将复制后的图像在竖直方向上与待处理的图像进行拼接;再复制拼接后的图像,并将复制后的图像在水平方向上与拼接后的图像进行再次拼接。通过上述拼接方式,无论图像向哪个方向滚动,都可以实现相应的滚动效果,不会出现朝某一方向滚动时没有图像的现象,有效保证了图像滚动的实现效果。
但不限于此,若可以事先确定图像仅向一个方向滚动,如仅向水平方向滚动或者仅向竖直方向滚动,则可以仅在相应的方向上进行图像拼接。例如,若图像仅向水平方向滚动,则可以复制待处理的图像,并将复制后的图像在水平方向上与待处理的图像进行拼接即可;而若图像仅向竖直方向滚动,则可以复制待处理的图像,并将复制后的图像在竖直方向上与待处理的图像进行拼接即可。这种方式中,图像复制少,图像数据相应的也少,可以提高图像滚动的处理速度和效率。
步骤S214:根据滚动偏移量,从拼接后的图像中确定待渲染的图像部分。
图像进行拼接后,每次根据滚动偏移量即可确定待渲染显示的部分,如滚动偏移量指示将图像向左移动一个区块的位置,则在一次滚动中,待渲染显示部分以拼接后的图像的左边界后第二个区块的开始位置开始,以原始图像的水平方向的宽度为距离,显示该距离内的所有区块。
步骤S216:根据滚动控制参数,对待渲染的图像部分进行滚动处理,并在浏览器中渲染显示滚动处理的结果。
如前所述,滚动控制参数用于控制图像滚动的模式,滚动控制参数可以包括用于指示进行匀速滚动的参数或者用于指示进行变速滚动的参数。
在根据滚动控制参数对待渲染的图像部分进行滚动处理时,可以根据滚动控制参数,调用相对应的滚动控制算法,对待渲染的图像部分进行相应的滚动处理,如匀速滚动或变速滚动等。
但不限于上述图像拼接方式,在实际应用中,本领域技术人员还可以根据需求采用其它适当的图像拼接方式,如,基于图像拼接技术,将原始图像按照给定参数进行动态拼接,连续渲染产生滚动效果等。
通过上述步骤S212-S216的过程,实现了通过软件方式即图像拼接的方式对浏览器中的图像进行滚动处理。
根据本实施例,浏览器网页控制GPU处理待处理的图像,根据预设的滚动偏移量和滚动控制参数进行滚动处理及渲染显示。采用这种方式,只需将待处理的原始图像加载进GPU的显存中即可,无需进行滚动效果的文件制作,节约了制作成本;原始图像相对于制作出的文件,尺寸更小,更易于处理和存储;此外,滚动效果通过编辑网页语言即可实现,可根据实际滚动需要灵活设置,既方便改动又易于对滚动效果进行控制。由此,有效实现了在网络课堂中的滚动动画,且实现成本低。
实施例三
参照图3,示出了根据本发明实施例三的一种图像数据处理方法的步骤流程图。
本实施例以一个具体实例的方式,对本发明实施例提供的图像数据处理方法进行说明。本实施例的图像数据处理方法包括以下步骤:
步骤S302:获取网络课堂的背景图像。
本实施例中,以一张背景图像为例。
步骤S304:触发对背景图像进行滚动显示。
其中,触发进行滚动显示的条件可以由本领域技术人员根据实际需求采用任意适当的方式,本发明实施例对此不作限制,例如,背景图像加载时即触发等等。
步骤S306:测试浏览器是否支持硬件渲染模式,若支持,则执行步骤S308;若不支持,则执行步骤S310。
如果浏览器支持硬件渲染模式,系统优先使用硬件渲染,执行步骤S308以提高图像处理速度,改善用户体验;如果浏览器不支持硬件渲染模式,为了保持较为一致的用户体验,本实施例中采用退化为软件渲染模式的方式,执行步骤S310。
步骤S308:执行硬件渲染过程。然后,转步骤S312执行。
本实施例中,使用VSCode代码编辑器,以及JavaScript和GLSL,驱动GPU执行相应的网页代码,以实现硬件渲染过程。
本实施例的硬件渲染过程包括:将背景图像加载到GPU显存中;根据图像处理请求,向GPU传递滚动偏移量和滚动控制参数;GPU根据滚动偏移量和滚动控制参数执行图像滚动处理;渲染显示处理结果。
该过程中,整个图像的滚动处理生命周期中,原始图片仅加载到显存中一次,内存和显存不存在反复交换,节省了资源。
以采用匀速滚动处理,滚动偏移量为X=1,即水平向左偏移一个像素为例。一种可行方式中,采用Fn(x,y,X)=D(mod((x+X),width),y)进行偏移后的坐标计算。其中,x表示当前像素点的横坐标,y表示当前像素点的纵坐标,X表示滚动偏移量,width表示原始图像的宽度,mod()表示取余,Fn()表示坐标变换函数,D()表示像素点坐标。
图4左侧阵列表示原始图像,设定原始图像包括6*6个像素,当X=1时,对于每个像素,新坐标计算如下:
Fn(0,0,X=1)=D(mod((0+X),6),0)=D(1,0);
Fn(1,0,X=1)=D(mod((1+X),6),0)=D(2,0)
…
Fn(5,0,X=1)=D(mod((5+X),6),0)=D(0,0)
按照上述新坐标渲染显示的图像如图4右侧阵列所示。
而当X=15时,如图5所示。图5左侧阵列表示原始图像,设定原始图像包括6*6个像素,当X=15时,对于每个像素,新坐标计算如下:
Fn(0,0,X=15)=D(mod((0+X),6),0)=D(3,0)
Fn(1,0,X=15)=D(mod((1+X),6),0)=D(4,0)
…
Fn(5,0,X=15)=D(mod((5+X),6),0)=D(2,0)
按照上述新坐标渲染显示的图像如图5右侧阵列所示。
在渲染显示过程中,采用匀速滚动处理,可选地,可采用线性函数如X=v*t+b计算滚动速度,其中,X表示滚动偏移量,v表示滚动速度,t表示一次滚动偏移的时间,b表示初始化偏移值,由本领域技术人员根据显示效果设置,取值为0时表示无偏移。该匀速模式可很好地表示匀速移动,例如匀速行驶的汽车背景,匀速流动的河流等等。
当然,也可以采用变速滚动处理,可选地,可采用非线性函数如正弦函数或余弦函数等计算滚动速度,例如X=sin(v*t)+b等,其中的参数与上述线性函数中的参数含义相同。该变速模式可以很好地表示变动节奏,比如按照音乐节奏进行图像滚动等。
步骤S310:执行软件渲染过程。然后,转步骤S312执行。
本实施例中,软件渲染过程包括:将原始图像在内存做拼接;根据图像处理请求,获取滚动偏移量和滚动控制参数;根据滚动偏移量从拼接后的图像中获取待渲染显示的图像部分;根据滚动控制参数对该图像部分进行滚动处理;渲染显示处理结果。
其中,先将原始图像在终端设备的内存中进行拼接。一种拼接后的图像示意图如图6所示,图6中,设定原始图像包括6*6个像素,仅将原始图像在水平方向上进行拼接。另一种拼接后的图像示意图如图7所示,图7中,对原始图像在水平方向和竖直方向均进行了拼接。
基于拼接后的图像,根据滚动偏移量确定待渲染显示的图像部分。例如,对图6所示的图像进行滚动处理,设定滚动偏移量X=1。一种可行方式中,将D(mod((0+X),6),0)到D(mod((0+X),6)+width,height)之间围成的图像区域确定为待渲染显示的图像部分。其中,D()表示像素点坐标,width表示原始图像的宽度,如图6中的图像的宽度为6个像素,height表示原始图像的高度,如图6中的图像的高度为6个像素。
当X=1时,即水平向左偏移1个像素时,待渲染显示的图像部分如图8中斜线部分所示;当X=15时,即水平向左偏移15个像素时,待渲染显示的图像部分如图9斜线部分所示。
步骤S312:在浏览器中的设定区域显示渲染处理的处理结果。
如,在浏览器中网络课堂的背景区域部分显示步骤S308或步骤S310的处理结果。
步骤S314:判断是否需要继续进行图像的滚动处理;若需要,则继续进行图像滚动处理;否则,结束流程。
若需要继续进行图像的滚动处理,则可以返回相应的渲染步骤,如返回步骤S308或者返回步骤S310继续进行图像滚动处理。例如,当采用硬件渲染模式时,可以根据滚动偏移量和滚动控制参数,继续通过GPU进行图像滚动处理;当采用软件渲染模式时,可以根据滚动偏移量和滚动控制参数,继续基于拼接后的图像进行图像滚动处理。
因GPU具有更密集的ALU(Aarithmetic and Logic Unit,算术逻辑单元),对图像这种矩阵数据运算更快,因此,采用GPU方式具有更快的图像数据处理速度和效率。
此外,需要说明的是,上述过程中,均仅以进行水平方向偏移为例进行说明,对于仅以垂直方向进行偏移的情形,或者,同时进行水平方向和垂直方向偏移的情形,本领域技术人员可参照本实施例进行适应性变换和预处理即可。
根据本实施例,使用网页语言,通过滚动偏移量和滚动控制参数控制图像的滚动效果,仅需原始图像素材,无需各种图像后期处理,简化了图像滚动处理的实现,且减少了数据处理负担和数据传输负担;在浏览器不支持硬件渲染模式情况下,提供了软件渲染模式的处理方案,具有更好的兼容性;图像滚动效果更平滑,可控性更好,用户体验也更好。可见,通过本实施例,有效实现了在网络课堂中的滚动动画,且实现成本低。
实施例四
本发明实施例还提供了一种计算机存储介质,该计算机存储介质中存储有:用于通过浏览器将待处理的图像加载到GPU的显存中的指令;用于通过浏览器向GPU传递预设的滚动偏移量和滚动控制参数,通过GPU调用与滚动控制参数对应的滚动控制算法,控制滚动控制算法按照滚动偏移量对所述显存中的图像进行滚动处理的指令;用于根据滚动处理的结果,在浏览器中对所述图像进行图像渲染的指令。
可选地,所述滚动控制参数包括用于指示进行匀速滚动的参数或者用于指示进行变速滚动的参数;所述用于通过所述GPU调用与所述滚动控制参数对应的滚动控制算法,控制所述滚动控制算法按照所述滚动偏移量对所述显存中的图像进行滚动处理的指令,包括:用于通过所述GPU调用与用于指示进行匀速滚动的参数对应的匀速滚动控制算法,控制所述匀速滚动控制算法按照所述滚动偏移量对所述显存中的图像进行匀速滚动处理的指令;或者,用于通过所述GPU调用与用于指示进行变速滚动的参数对应的变速滚动控制算法,控制所述变速滚动控制算法按照所述滚动偏移量对所述显存中的图像进行变速滚动处理的指令。
可选地,在所述用于通过浏览器将待处理的图像加载到图形处理器GPU的显存中的指令之前,所述计算机存储介质中还存储有:用于将所述待处理的图像划分为多个不同区块的指令;所述用于控制所述滚动控制算法按照所述滚动偏移量对所述显存中的图像进行滚动处理的指令,包括:用于控制所述滚动控制算法根据每个区块的原坐标和所述滚动偏移量,确定每个区块的新坐标,根据每个区块的新坐标对所述显存中的图像进行滚动处理的指令。
可选地,在所述用于通过浏览器将待处理的图像加载到图形处理器GPU的显存中的指令之前,所述计算机存储介质中还存储有:用于判断所述浏览器是否支持硬件渲染模式的指令;用于若判断结果为支持,则执行所述用于通过浏览器将待处理的图像加载到图形处理器GPU的显存中的指令;用于若判断结果为不支持,则通过图像拼接在所述浏览器中进行所述待处理的图像的滚动处理的指令。
可选地,所述用于通过图像拼接在所述浏览器中进行所述待处理的图像的滚动处理的指令,包括:用于对所述待处理的图像进行图像拼接的指令;用于根据所述滚动偏移量,从拼接后的所述图像中确定待渲染的图像部分的指令;用于根据所述滚动控制参数,对所述图像部分进行滚动处理,并在所述浏览器中渲染显示所述滚动处理的结果的指令。
可选地,所述用于对所述待处理的图像进行图像拼接的指令,包括:用于复制所述待处理的图像,并将复制后的图像在水平方向上与所述待处理的图像进行拼接的指令;用于复制所述拼接后的图像,并将复制后的图像在竖直方向上与拼接后的图像进行再次拼接的指令;或者,用于复制所述待处理的图像,并将复制后的图像在竖直方向上与所述待处理的图像进行拼接的指令;用于复制所述拼接后的图像,并将复制后的图像在水平方向上与拼接后的图像进行再次拼接的指令。
本实施例的计算机存储介质用于实现前述方法实施例一、实施例二、或实施例三中相应的图像数据处理方法,并具有相应的方法实施例的有益效果,在此不再赘述。
通过以上的实施方式的描述,本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现,当然也可以通过硬件。基于这样的理解,上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品可以存储在计算机可读存储介质中,所述计算机可读记录介质包括用于以计算机(例如计算机)可读的形式存储或传送信息的任何机制。例如,机器可读介质包括只读存储器(ROM)、随机存取存储器(RAM)、磁盘存储介质、光存储介质、闪速存储介质、电、光、声或其他形式的传播信号(例如,载波、红外信号、数字信号等)等,该计算机软件产品包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。
最后应说明的是:以上实施例仅用以说明本发明实施例的技术方案,而非对其限制;尽管参照前述实施例对本发明进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。
本领域的技术人员应明白,本发明实施例的实施例可提供为方法、装置(设备)、或计算机程序产品。因此,本发明实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本发明实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本发明实施例是参照根据本发明实施例的方法、装置(设备)和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
Claims (8)
1.一种图像数据处理方法,其特征在于,包括:
通过浏览器将待处理的图像加载到图形处理器GPU的显存中,所述待处理的图像为无需进行拼接处理的原始图像;
通过所述浏览器向所述GPU传递预设的滚动偏移量和滚动控制参数,通过所述GPU调用与所述滚动控制参数对应的滚动控制算法,控制所述滚动控制算法按照所述滚动偏移量对所述显存中的图像进行滚动处理,所述滚动偏移量与滚动速度、时间和初始偏移值相关;其中,所述按照所述滚动偏移量对所述显存中的图像进行滚动处理,包括:将所述原始图像中像素点的原始坐标加上所述滚动偏移量之和,并除以原始图像的宽度之后的余数,确定为对所述显存中的原始图像进行滚动处理后像素点的新坐标;
根据所述滚动处理的结果,在所述浏览器中对所述图像进行图像硬件渲染;
其中,在所述通过浏览器将待处理的图像加载到图形处理器GPU的显存中之前,所述方法还包括:判断所述浏览器是否支持硬件渲染模式;若支持,则执行所述通过浏览器将待处理的图像加载到图形处理器GPU的显存中的步骤;若不支持,则通过图像拼接在所述浏览器中进行所述待处理的图像的滚动处理。
2.根据权利要求1所述的方法,其特征在于,所述滚动控制参数包括用于指示进行匀速滚动的参数或者用于指示进行变速滚动的参数;
所述通过所述GPU调用与所述滚动控制参数对应的滚动控制算法,控制所述滚动控制算法按照所述滚动偏移量对所述显存中的图像进行滚动处理,包括:通过所述GPU调用与用于指示进行匀速滚动的参数对应的匀速滚动控制算法,控制所述匀速滚动控制算法按照所述滚动偏移量对所述显存中的图像进行匀速滚动处理;或者,通过所述GPU调用与用于指示进行变速滚动的参数对应的变速滚动控制算法,控制所述变速滚动控制算法按照所述滚动偏移量对所述显存中的图像进行变速滚动处理。
3.根据权利要求1或2所述的方法,其特征在于,
在所述通过浏览器将待处理的图像加载到图形处理器GPU的显存中之前,所述方法还包括:将所述待处理的图像划分为多个不同区块;
所述控制所述滚动控制算法按照所述滚动偏移量对所述显存中的图像进行滚动处理,包括:控制所述滚动控制算法根据每个区块的原坐标和所述滚动偏移量,确定每个区块的新坐标,根据每个区块的新坐标对所述显存中的图像进行滚动处理。
4.根据权利要求1所述的方法,其特征在于,所述通过图像拼接在所述浏览器中进行所述待处理的图像的滚动处理,包括:
对所述待处理的图像进行图像拼接;
根据所述滚动偏移量,从拼接后的所述图像中确定待渲染的图像部分;
根据所述滚动控制参数,对所述图像部分进行滚动处理,并在所述浏览器中渲染显示所述滚动处理的结果。
5.根据权利要求4所述的方法,其特征在于,所述对所述待处理的图像进行图像拼接,包括:
复制所述待处理的图像,并将复制后的图像在水平方向上与所述待处理的图像进行拼接;复制所述拼接后的图像,并将复制后的图像在竖直方向上与拼接后的图像进行再次拼接;
或者,
复制所述待处理的图像,并将复制后的图像在竖直方向上与所述待处理的图像进行拼接;复制所述拼接后的图像,并将复制后的图像在水平方向上与拼接后的图像进行再次拼接。
6.一种计算机存储介质,其特征在于,所述计算机存储介质中存储有:
用于通过浏览器将待处理的图像加载到图形处理器GPU的显存中的指令,所述待处理的图像为无需进行拼接处理的原始图像;
用于通过所述浏览器向所述GPU传递预设的滚动偏移量和滚动控制参数,通过所述GPU调用与所述滚动控制参数对应的滚动控制算法,控制所述滚动控制算法按照所述滚动偏移量对所述显存中的图像进行滚动处理的指令,所述滚动偏移量与滚动速度、时间和初始偏移值相关;其中,所述按照所述滚动偏移量对所述显存中的图像进行滚动处理,包括:将所述原始图像中像素点的原始坐标加上所述滚动偏移量之和,并除以原始图像的宽度之后的余数,确定为对所述显存中的原始图像进行滚动处理后像素点的新坐标;
用于根据所述滚动处理的结果,在所述浏览器中对所述图像进行图像硬件渲染的指令;
其中,在所述用于通过浏览器将待处理的图像加载到图形处理器GPU的显存中的指令之前,所述计算机存储介质中还存储有:用于判断所述浏览器是否支持硬件渲染模式的指令;用于若判断结果为支持,则执行所述用于通过浏览器将待处理的图像加载到图形处理器GPU的显存中的指令;用于若判断结果为不支持,则通过图像拼接在所述浏览器中进行所述待处理的图像的滚动处理的指令。
7.根据权利要求6所述的计算机存储介质,其特征在于,所述滚动控制参数包括用于指示进行匀速滚动的参数或者用于指示进行变速滚动的参数;
所述用于通过所述GPU调用与所述滚动控制参数对应的滚动控制算法,控制所述滚动控制算法按照所述滚动偏移量对所述显存中的图像进行滚动处理的指令,包括:用于通过所述GPU调用与用于指示进行匀速滚动的参数对应的匀速滚动控制算法,控制所述匀速滚动控制算法按照所述滚动偏移量对所述显存中的图像进行匀速滚动处理的指令;或者,用于通过所述GPU调用与用于指示进行变速滚动的参数对应的变速滚动控制算法,控制所述变速滚动控制算法按照所述滚动偏移量对所述显存中的图像进行变速滚动处理的指令。
8.根据权利要求6或7所述的计算机存储介质,其特征在于,
在所述用于通过浏览器将待处理的图像加载到图形处理器GPU的显存中的指令之前,所述计算机存储介质中还存储有:用于将所述待处理的图像划分为多个不同区块的指令;
用于控制所述滚动控制算法按照所述滚动偏移量对所述显存中的图像进行滚动处理的指令,包括:用于控制所述滚动控制算法根据每个区块的原坐标和所述滚动偏移量,确定每个区块的新坐标,根据每个区块的新坐标对所述显存中的图像进行滚动处理的指令。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810258594.4A CN110308844B (zh) | 2018-03-27 | 2018-03-27 | 图像数据处理方法及计算机存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810258594.4A CN110308844B (zh) | 2018-03-27 | 2018-03-27 | 图像数据处理方法及计算机存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN110308844A CN110308844A (zh) | 2019-10-08 |
CN110308844B true CN110308844B (zh) | 2021-02-05 |
Family
ID=68074212
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201810258594.4A Active CN110308844B (zh) | 2018-03-27 | 2018-03-27 | 图像数据处理方法及计算机存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN110308844B (zh) |
Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US7271814B2 (en) * | 2001-10-13 | 2007-09-18 | Picsel Technologies, Ltd. | Systems and methods for generating visual representations of graphical data and digital document processing |
CN104244073A (zh) * | 2014-09-26 | 2014-12-24 | 北京大学 | 一种视频中滚动字幕的自动检测和识别方法 |
-
2018
- 2018-03-27 CN CN201810258594.4A patent/CN110308844B/zh active Active
Patent Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US7271814B2 (en) * | 2001-10-13 | 2007-09-18 | Picsel Technologies, Ltd. | Systems and methods for generating visual representations of graphical data and digital document processing |
CN104244073A (zh) * | 2014-09-26 | 2014-12-24 | 北京大学 | 一种视频中滚动字幕的自动检测和识别方法 |
Non-Patent Citations (1)
Title |
---|
jQuery动画效果实现图片无缝连续滚动;秋恨雪;《脚本之家》;20160112;全文 * |
Also Published As
Publication number | Publication date |
---|---|
CN110308844A (zh) | 2019-10-08 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN109670558B (zh) | 使用深度学习的数字图像完成 | |
CN106575445B (zh) | 毛皮虚拟化身动画 | |
US8418063B2 (en) | Aiding device in creation of content involving image display according to scenario and aiding method therein | |
KR20080090671A (ko) | 3d 객체 모델에 텍스쳐를 매핑하는 방법 및 장치 | |
JP7432005B2 (ja) | 二次元画像の三次元化方法、装置、機器及びコンピュータプログラム | |
US20090262139A1 (en) | Video image display device and video image display method | |
CN103247064B (zh) | 一种三维动态图形的生成方法、装置和移动终端 | |
KR101656167B1 (ko) | 애니메이션 재생 방법, 장치, 기기, 프로그램 및 기록매체 | |
CN109671147B (zh) | 基于三维模型的纹理贴图生成方法及装置 | |
CN104571887A (zh) | 一种基于静态图片的动态交互方法和装置 | |
CN107423366B (zh) | 一种轮播图切换方法及装置 | |
CN114581565A (zh) | 动画路径可视化编辑方法、装置、计算机设备、存储介质 | |
CN107134004A (zh) | 一种在Flash动画中模拟球体运动的方法及装置 | |
CN110308844B (zh) | 图像数据处理方法及计算机存储介质 | |
CN104254875A (zh) | 信息处理装置、信息处理方法及信息处理计算机程序产品 | |
CN113470153A (zh) | 虚拟场景的渲染方法、装置及电子设备 | |
CN104574483A (zh) | 一种生成可定制动态图的方法和装置 | |
CN114428573B (zh) | 特效图像处理方法、装置、电子设备及存储介质 | |
EP3400514B1 (en) | Haptic correlated graphic effects | |
CN114913277A (zh) | 一种物体立体交互展示方法、装置、设备及介质 | |
US8363053B2 (en) | Method and apparatus for rendering outline of multimedia character image | |
JP3380979B2 (ja) | 映像生成装置及び方法並びに記録媒体 | |
JP6823946B2 (ja) | 図形を描画する方法、描画装置及びシミュレータ | |
JP2012014391A (ja) | 漫画作成支援装置、漫画作成支援方法およびプログラム | |
JP6950641B2 (ja) | 画像生成装置、画像生成方法、およびプログラム |
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 |