一种图像显示方法、程序产品、电子设备及存储介质与流程

专利2025-08-11  500


本技术涉及图像处理,具体而言,涉及一种图像显示方法、程序产品、电子设备及存储介质。


背景技术:

1、随着互联网技术的发展,网页或应用程序内容越来越丰富,图片和视频占了很大一部分。在一些页面中,图片的大小或方向会影响观看,目前的解决方法是目前的解决方式是在点击图片时弹出一个新的窗口,例如模态弹窗,通过模态弹窗来预览大图,这样图片就起到了放大的效果。但是这种方式弹窗会遮挡一部分的页面内容,也即图片和文字无法同时观看,对浏览页面总成一定的影响,不便于浏览。


技术实现思路

1、本技术实施例的目的在于一种图像显示方法、程序产品、电子设备及存储介质,对图像进行变换,显示变换后的图像,在不遮挡页面其他内容的基础上,提高页面浏览的便捷性,从而提高用户体验。

2、第一方面,本技术实施例提供了一种图像显示方法,包括:获取图像的图像尺寸、显示图像的容器尺寸以及图像的显示方式;根据图像的显示方式,基于容器尺寸和图像尺寸的比值,确定缩放比例;利用缩放比例确定图像原点坐标以及显示尺寸;基于图像原点坐标以及显示尺寸,对图像进行变换,显示变换后的图像。

3、在上述的实现过程中,基于容器尺寸确定图像的缩放比例,并根据缩放比例确定图像原点坐标以及显示尺寸,这样变换之后的图像不会遮挡页面内的文字,同时可以改善因为图像方向改变,而造成的页面布局改变,不便于浏览的问题,提高页面浏览的便捷性,从而提高用户体验。

4、可选的,在本技术实施例中,图像尺寸包括图像宽度和图像高度;容器尺寸包括容器宽度和容器高度;显示方式包括等比显示;根据图像的显示方式,基于容器尺寸和图像尺寸的比值,确定缩放比例,包括:在显示方式为等比显示的情况下,获取图像宽度与容器宽度的第一比值,以及图像高度与容器高度的第二比值;将第一比值和第二比值中的最大值确定为缩放比例。

5、在上述实施例的实现过程中:将第一比值和第二比值中的最大值确定为缩放比例,变换后的图像不会因为缩放比例不合适,造成页面内容被隐藏,也不会使变换后的图像被拉伸。

6、可选的,在本技术实施例中,若显示方式为等比显示,则利用缩放比例确定图像原点坐标以及显示尺寸,包括:根据图像宽度与缩放比例的比值作为显示尺寸中的显示宽度;根据图像高度与缩放比例的比值作为显示尺寸中的显示高度;计算容器宽度与显示宽度的第一差值,以及容器高度与显示高度的第二差值;根据第一差值,确定图像原点坐标的横坐标,以及根据第二差值,确定图像原点坐标的纵坐标。

7、在上述实施例的实现过程中:在确定缩放比例的过程中,不仅需要考虑图片尺寸,同时需要考虑容器尺寸,图片的缩放比例需要与其容器尺寸相匹配,以确保图片在容器中完全展示而不被裁剪或拉伸。通过考虑容器尺寸,可以确保图片在不同设备或页面空间中上都能以较佳的方式显示。

8、可选的,在本技术实施例中,显示方式包括旋转显示;根据图像的显示方式,基于容器尺寸和图像尺寸的比值,确定缩放比例,包括:在显示方式为旋转显示的情况下,获取图像的旋转角度;基于旋转角度,判断图像所在的象限参数;根据象限参数的奇偶性、容器尺寸和图像尺寸的比值,确定缩放比例。

9、在上述实施例的实现过程中:如果将图像直接旋转,会造成页面的布局改变,因此,本技术实施例先根据旋转角度计算旋转显示的缩放比例,基于缩放比例重新确定显示图像的尺寸,这样处理之后,既实现了图像旋转的效果,同时不会引起页面的布局变化。

10、可选的,在本技术实施例中,图像尺寸包括图像宽度和图像高度;容器尺寸包括容器宽度和容器高度;根据象限参数的奇偶性、容器尺寸和图像尺寸的比值,确定缩放比例,包括:若象限参数为奇数,则获取图像宽度与容器宽度的第一比值,以及图像高度与容器高度的第二比值;将第一比值和第二比值中的最大值确定为缩放比例;若象限参数为偶数,则获取图像宽度与容器高度的第三比值;以及图像高度与容器宽度的第四比值,将第三比值和第四比值中的最大值确定为缩放比例。

11、在上述实施例的实现过程中:考虑到不同的旋转角度所处的象限参数不同,根据象限参数确定缩放比例,可以实现对图像的精确控制。并且根据象限参数的奇偶性确定缩放比例的算法,提高处理效率,节省大量时间。

12、可选的,在本技术实施例中,若显示方式为旋转显示,则利用缩放比例确定图像原点坐标以及显示尺寸,包括:根据图像宽度与缩放比例的比值作为显示尺寸中的显示宽度;根据图像高度与缩放比例的比值作为显示尺寸中的显示高度;计算容器宽度与显示宽度的第一差值,以及容器高度与显示高度的第二差值,根据象限参数,利用第一差值以及第二差值确定图像原点坐标。

13、在上述实施例的实现过程中:图像原点坐标是变换后的图像在图像坐标系中定义的一个基准点,也即作为图像处理的起点或参考点。本技术实施例通过象限参数确定图像原点坐标,这样确定的图像原点坐标所绘制处的变换后的图像不会改变遮挡页面其他内容,也不会改变页面布局,提高页面浏览的便捷性。

14、可选的,在本技术实施例中,在利用缩放比例确定图像原点坐标以及显示尺寸之后,方法还包括:通过监听鼠标事件,获取鼠标停留点相对容器的坐标点以及鼠标的滚轮滚动量;根据鼠标的滚轮滚动量获取缩放参数;根据显示尺寸和缩放参数,获取缩放处理图像尺寸;基于鼠标停留点相对容器的坐标点,以及缩放参数,计算坐标系偏移量;基于缩放处理图像尺寸以及坐标系偏移量,显示缩放处理后的图像。

15、在上述实施例的实现过程中:通过计算鼠标滚轮滚动量来动态调整缩放比例,用户可以更加精细地控制图像的放大或缩小程度,满足不同的查看需求。通过计算鼠标在图像上的位置,并将其作为缩放原点,可以实现以鼠标当前位置为中心的缩放效果。这种效果更符合用户的预期,提高了缩放操作的实用性。

16、第二方面,本技术实施例还提供了一种图像显示装置,包括:获取模块,用于获取图像的图像尺寸、显示图像的容器尺寸以及图像的显示方式;缩放比例确定模块,用于根据图像的显示方式,基于容器尺寸和图像尺寸的比值,确定缩放比例;坐标计算模块,用于利用缩放比例确定图像原点坐标以及显示尺寸;显示模块,用于基于图像原点坐标以及显示尺寸,对图像进行变换,显示变换后的图像。

17、第三方面,本技术实施例还提供了计算机程序产品,包括计算机程序指令,计算机程序指令被处理器运行时执行第一方面或第一方面的任意一种实现方式提供的方法。

18、第四方面,本技术实施例还提供了一种电子设备,包括:处理器和存储器,存储器存储有计算机程序指令,计算机程序指令被处理器运行时执行第一方面或第一方面的任意一种实现方式提供的方法。

19、第五方面,本技术实施例还提供了一种计算机可读存储介质,计算机可读存储介质上存储有计算机程序指令,计算机程序指令被处理器运行时执行第一方面或第一方面的任意一种实现方式提供的方法。

20、采用本技术提供的图像显示方法、程序产品、电子设备及存储介质,基于容器尺寸确定图像的缩放比例,并根据缩放比例确定图像原点坐标以及显示尺寸,这样变换之后的图像不会遮挡页面内的文字,同时可以改善因为图像方向改变,而造成的页面布局改变,不便于浏览的问题,提高页面浏览的便捷性,从而提高用户体验。


技术特征:

1.一种图像显示方法,其特征在于,包括:

2.根据权利要求1所述的方法,其特征在于,所述图像尺寸包括图像宽度和图像高度;所述容器尺寸包括容器宽度和容器高度;所述显示方式包括等比显示;所述根据所述图像的显示方式,基于所述容器尺寸和所述图像尺寸的比值,确定缩放比例,包括:

3.根据权利要求2所述的方法,其特征在于,若所述显示方式为等比显示,则利用所述缩放比例确定图像原点坐标以及显示尺寸,包括:

4.根据权利要求1所述的方法,其特征在于,所述显示方式包括旋转显示;所述根据所述图像的显示方式,基于所述容器尺寸和所述图像尺寸的比值,确定缩放比例,包括:

5.根据权利要求4所述的方法,其特征在于,所述图像尺寸包括图像宽度和图像高度;所述容器尺寸包括容器宽度和容器高度;所述根据所述象限参数的奇偶性、所述容器尺寸和所述图像尺寸的比值,确定缩放比例,包括:

6.根据权利要求4所述的方法,其特征在于,若所述显示方式为旋转显示,则利用所述缩放比例确定图像原点坐标以及显示尺寸,包括:

7.根据权利要求1-6任一所述的方法,其特征在于,在所述利用所述缩放比例确定图像原点坐标以及显示尺寸之后,所述方法还包括:

8.一种计算机程序产品,其特征在于,包括计算机程序指令,所述计算机程序指令被处理器运行时执行权利要求1至7任一所述方法。

9.一种电子设备,其特征在于,包括:处理器和存储器,所述存储器存储有计算机程序指令,所述计算机程序指令被所述处理器运行时执行如权利要求1至7任一所述的方法。

10.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质上存储有计算机程序指令,所述计算机程序指令被处理器运行时执行如权利要求1至7任一所述的方法。


技术总结
本申请提供一种图像显示方法、程序产品、电子设备及存储介质,所述方法包括:获取图像的图像尺寸、显示图像的容器尺寸以及图像的显示方式;根据图像的显示方式,基于容器尺寸和图像尺寸的比值,确定缩放比例;利用缩放比例确定图像原点坐标以及显示尺寸;基于图像原点坐标以及显示尺寸,对图像进行变换,显示变换后的图像。变换之后的图像不会遮挡页面内的文字,同时可以改善因为图像方向改变,而造成的页面布局改变,不便于浏览的问题,提高页面浏览的便捷性,从而提高用户体验。

技术研发人员:张清林
受保护的技术使用者:成都新希望金融信息有限公司
技术研发日:
技术公布日:2024/11/11
转载请注明原文地址: https://tieba.8miu.com/read-16808.html

最新回复(0)