CN118502863B

CN118502863B - Image carousel display method and device based on circular arrangement

Info

Publication number: CN118502863B
Application number: CN202410916780.8A
Authority: CN
Inventors: 周少博; 吴栋; 李蕾; 苗宇
Original assignee: Oneweb Beijing Technology Co ltd
Current assignee: Oneweb Beijing Technology Co ltd
Priority date: 2024-07-10
Filing date: 2024-07-10
Publication date: 2024-09-20
Anticipated expiration: 2044-07-10
Also published as: CN118502863A

Abstract

The embodiment of the invention provides a circular arrangement-based image carousel display method, a circular arrangement-based image carousel display device and electronic equipment, belonging to the technical field of image processing, wherein the method comprises the following steps: setting an image processing parameter vector K for an original image set P so as to perform image preprocessing on the original image set P based on the image processing parameter vector K to obtain a carousel image set PL; designing a layout control vector Ks for the carousel image set PL; applying transform attribute to each image in the carousel image set PL, and calculating x and y coordinates according to the image index and the radius of the circle to enable the images to be arrayed on the circumference; and adjusting the sizes and the arrangement modes of the images according to different screen sizes, and matching the display effects of the carousel images on different devices. The scheme can improve the loading efficiency of the carousel images and the compatibility in different use scenes.

Description

Image carousel display method and device based on circular arrangement

Technical Field

The present invention relates to the field of image processing technologies, and in particular, to a circular arrangement-based image carousel display method, apparatus, and electronic device.

Background

The circular image carousel display mode is different from the traditional carousel display mode sliding transversely or longitudinally. In this arrangement, the pictures are not arranged linearly, but in a circular or annular fashion, creating a unique visual effect. This effect is typically achieved by CSS3 transforms (e.g., rotate and translate) in combination with JavaScript or specific carousel plug-ins, such that the picture appears to rotate about a center point.

In circular carousel, the user can click a button or automatically play to cycle browse the pictures, the pictures simulate the motion on a circular track when being switched, some implementations can keep the center picture larger, and surrounding pictures are gradually reduced, so that a 3D profound feeling or a plane cycle rolling effect is formed. Such effects are common in some web page designs, particularly those websites or applications that want to appeal to users through unusual visual effects.

The prior art has the following main problems:

1. Compatibility problem:

Different browsers support CSS3 and HTML5 differently, which may cause the carousel effect to appear inconsistent among the different browsers.

2. Performance problems:

when the number of pictures is large or the size of the pictures is large, the loading speed and the page performance can be affected, especially on a mobile device, the animation effect can occupy a large amount of computing resources, and the page is blocked or dropped.

3. And (3) response type design:

The circular arrangement of pictures needs to be adapted under different screen sizes, and good display on both small and large screens needs to be ensured.

4. User interaction:

The user hopes to conveniently click and slide the pictures to browse, and needs to process the touch event and the mouse event, so that the duration and the effect of the animation need to be properly adjusted to ensure that the user experience is not abrupt.

5. Maintenance and extensibility:

The maintainability and expansibility of the code need to be considered, so that the code is prevented from being difficult to modify due to the change of the requirement, and if the picture or the content needs to be dynamically loaded, various problems in the loading process, such as lazy loading, picture caching and the like, need to be processed.

6. SEO and accessibility:

the image carousel is friendly to a search engine, and the SEO is prevented from being influenced by excessive JavaScript.

7. Development difficulty:

The layout and animation of the circular arrangement is relatively complex, requiring high CSS and JavaScript skills by the developer, and may require the use of a third party library or framework, such as GSAP (GreenSock Animation Platform), to achieve the complex animation effect.

The above problems are to be solved.

Disclosure of Invention

In view of the above, embodiments of the present invention provide a circular arrangement-based image carousel display method, apparatus and electronic device, which at least partially solve the problems in the prior art.

In a first aspect, an embodiment of the present invention provides a circular arrangement-based image carousel display method, including:

after n original image sets P to be carousel are obtained, setting an image processing parameter vector K for the original image sets P so as to perform image preprocessing on the original image sets P based on the image processing parameter vector K to obtain carousel image sets PL;

For a carousel image set PL, designing a layout control vector Ks= [ CS, IS, TI, AD, RD ], wherein CS represents a selector of a container containing all images, IS represents an image selector array, each element in the image selector array IS a character string, TI IS equal to n and represents the total number of images participating in carousel, AD represents the duration of transition animation, RD represents carousel direction;

Applying transform attribute to each image in the carousel image set PL, calculating x and y coordinates according to the image index and the radius of a circle, arranging the images on the circumference, initializing a rotation to be an angle calculated based on the image index, arranging the images around a central point, and adding the characteristics in the design layout control vector to each image;

According to different screen sizes, the sizes and arrangement modes of the images are adjusted, the display effect of the carousel images on different devices is matched, and the radius of the circular arrangement and the spacing of the images are dynamically adjusted so as to adapt to different view port sizes.

According to a specific implementation of an embodiment of the disclosure, the method further includes:

the HTML structure of the foundation is designed to contain a container element for wrapping all the images, and the HTML tag of each image is determined to ensure that the images can be correctly displayed under different equipment and screen sizes.

And writing JavaScript codes to control logic of image carousel, wherein the logic comprises automatic playing, pausing and manual switching of images, and the JavaScript is used for processing user interaction events to realize manual switching of images.

only when the image enters the viewport, loading is started, and initial loading time and resource consumption are reduced;

using Polyfill and browser prefixes ensures compatibility of CSS3 and HTML5 features in different browsers;

and adding a substitute text for each image, improving the grabbing property and the barrier-free property of the search engine, and ensuring that the image carousel function is still available when the JavaScript is disabled.

According to a specific implementation manner of the embodiment of the present disclosure, the performing image preprocessing on the original image set P based on the image processing parameter vector K to obtain a carousel image set PL includes:

Modifying the luminance value s of the image by means of equalization based on the image processing parameter vector K:

s=cdf(I)/((L-1))×L

s is the luminance value of the equalized pixel, I is the original pixel luminance value, cdf (I) is the cumulative distribution function of I, and L is the number of luminance levels of the image contained in the image processing parameter vector K;

Based on the image processing parameter vector K, the overall brightness of the image is increased or decreased:

I'(x,y)=I(x,y)+Kl

i' (x, y) is the adjusted pixel value, I (x, y) is the original pixel value, kl is the luminance adjustment parameter contained in the image processing parameter vector K;

changing the contrast of the image based on the image processing parameter vector K:

I'(x,y)=Kz⋅(I(x,y)-μ)+μ

μ is the average luminance value of the image, kz is the contrast enhancement factor contained in the image processing parameter vector K.

In a second aspect, an embodiment of the present invention provides an image carousel display device based on circular arrangement, including:

The setting module is used for setting an image processing parameter vector K aiming at the original image set P after acquiring n original image sets P to be carousel to facilitate image preprocessing of the original image set P based on the image processing parameter vector K so as to obtain a carousel image set PL;

The control module IS used for designing a layout control vector Ks= [ CS, IS, TI, AD, RD ] aiming at a carousel image set PL, wherein CS represents a selector of a container containing all images, IS represents an image selector array, each element in the image selector array IS a character string and represents a selector of a single image, TI IS equal to n and represents the total number of images participating in carousel, AD represents the duration time of transition animation, and RD represents the carousel direction;

A layout module for applying transform attribute to each image in the carousel image set PL, calculating x and y coordinates according to the image index and the radius of the circle, arranging the images on the circumference, initializing the rotation to be an angle calculated based on the image index, arranging the images around the center point, and adding the features in the design layout control vector to each image;

The matching module is used for matching the display effect of the carousel images on different devices according to the sizes and arrangement modes of the images of different screen sizes, and dynamically adjusting the radius of the circular arrangement and the spacing of the images so as to adapt to different view port sizes.

In a third aspect, an embodiment of the present invention further provides an electronic device, including:

At least one processor; and

A memory communicatively coupled to the at least one processor; wherein,

The memory stores instructions executable by the at least one processor to enable the at least one processor to perform the circular arrangement based image carousel display method of any of the foregoing Ren Di aspects or first aspects.

In a fourth aspect, embodiments of the present invention further provide a non-transitory computer readable storage medium storing computer instructions for causing a computer to perform the circular arrangement based image carousel display method of the first aspect or any implementation manner of the first aspect.

In a fifth aspect, embodiments of the present invention also provide a computer program product comprising a computer program stored on a non-transitory computer readable storage medium, the computer program comprising program instructions which, when executed by a computer, cause the computer to perform the circular arrangement based image carousel display method of the first aspect or any implementation of the first aspect.

The image carousel display scheme based on circular arrangement in the embodiment of the invention comprises the following steps: after n original image sets P to be carousel are obtained, setting an image processing parameter vector K for the original image sets P so as to perform image preprocessing on the original image sets P based on the image processing parameter vector K to obtain carousel image sets PL; for a carousel image set PL, designing a layout control vector Ks= [ CS, IS, TI, AD, RD ], wherein CS represents a selector of a container containing all images, IS represents an image selector array, each element in the image selector array IS a character string, TI IS equal to n and represents the total number of images participating in carousel, AD represents the duration of transition animation, RD represents carousel direction; applying transform attribute to each image in the carousel image set PL, calculating x and y coordinates according to the image index and the radius of a circle, arranging the images on the circumference, initializing a rotation to be an angle calculated based on the image index, arranging the images around a central point, and adding the characteristics in the design layout control vector to each image; according to different screen sizes, the sizes and arrangement modes of the images are adjusted, the display effect of the carousel images on different devices is matched, and the radius of the circular arrangement and the spacing of the images are dynamically adjusted so as to adapt to different view port sizes. The invention realizes circular arrangement and smooth transition of images through CSS animation and transformation technology, and simultaneously processes loading and interaction of images by combining JavaScript dynamic operation, thereby realizing high-performance and responsive image carousel effect. By optimizing the picture loading strategy, the lazy loading technique is employed to reduce the initial loading time and to ensure a good adaptation on different devices with the media query. In addition, the modern event processing mechanism is used for improving user interaction experience, barrier-free design and SEO optimization are combined, and compatibility and accessibility of image carousel in various use scenes are ensured.

Drawings

In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings that are needed in the embodiments will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and that other drawings can be obtained according to these drawings without inventive effort for a person skilled in the art.

Fig. 1 is a schematic flow chart of an image carousel display method based on circular arrangement according to an embodiment of the present invention;

fig. 2 is a schematic flow chart of another image carousel display method based on circular arrangement according to an embodiment of the present invention;

Fig. 3 is a schematic structural diagram of an image carousel display device based on circular arrangement according to an embodiment of the present invention;

fig. 4 is a schematic diagram of an electronic device according to an embodiment of the present invention.

Detailed Description

Embodiments of the present invention will be described in detail below with reference to the accompanying drawings.

Other advantages and effects of the present disclosure will become readily apparent to those skilled in the art from the following disclosure, which describes embodiments of the present disclosure by way of specific examples. It will be apparent that the described embodiments are merely some, but not all embodiments of the present disclosure. The disclosure may be embodied or practiced in other different specific embodiments, and details within the subject specification may be modified or changed from various points of view and applications without departing from the spirit of the disclosure. It should be noted that the following embodiments and features in the embodiments may be combined with each other without conflict. All other embodiments, which can be made by one of ordinary skill in the art without inventive effort, based on the embodiments in this disclosure are intended to be within the scope of this disclosure.

It is noted that various aspects of the embodiments are described below within the scope of the following claims. It should be apparent that the aspects described herein may be embodied in a wide variety of forms and that any specific structure and/or function described herein is merely illustrative. Based on the present disclosure, one skilled in the art will appreciate that one aspect described herein may be implemented independently of any other aspect, and that two or more of these aspects may be combined in various ways. For example, an apparatus may be implemented and/or a method practiced using any number of the aspects set forth herein. In addition, such apparatus may be implemented and/or such methods practiced using other structure and/or functionality in addition to one or more of the aspects set forth herein.

It should also be noted that the illustrations provided in the following embodiments merely illustrate the basic concepts of the disclosure by way of illustration, and only the components related to the disclosure are shown in the drawings and are not drawn according to the number, shape and size of the components in actual implementation, and the form, number and proportion of the components in actual implementation may be arbitrarily changed, and the layout of the components may be more complicated.

In addition, in the following description, specific details are provided in order to provide a thorough understanding of the examples. However, it will be understood by those skilled in the art that the aspects may be practiced without these specific details.

The embodiment of the disclosure provides an image carousel display method based on circular arrangement. The circular arrangement-based image carousel display method provided in the present embodiment may be performed by a computing device, which may be implemented as software or as a combination of software and hardware, and the computing device may be integrally provided in a server, a terminal device, or the like.

Referring to fig. 1 and 2, an embodiment of the present disclosure provides an image carousel display method based on circular arrangement, including:

s101, after n original image sets P to be carousel are obtained, setting an image processing parameter vector K for the original image sets P so as to perform image preprocessing on the original image sets P based on the image processing parameter vector K, and obtaining a carousel image set PL.

In particular, n original images that need to be carousel may be obtained, which are the content that is planned to be shown in the carousel, such as a product picture, a landscape or other visual content.

The original image is directly carousel, which can lead to slow image loading due to the large size of the original image, and the like, therefore, the image processing parameter vector K can be defined, and the original image is preprocessed before being loaded.

As an example, an image processing parameter vector K may be defined, which may contain the following elements:

resize (width, height) or scaling.

Crop area or target aspect ratio.

Brightness, brightness adjustment value.

Contrast, contrast adjustment value.

Color_correction: color correction configuration.

Compression level or target file size.

Circular_mask, whether circular clipping is applied or not, and specific parameters.

A pre-processing operation may be performed on each image according to the parameters in vector K using a programming language. Script writing or batch processing of these images using software functions ensures that each step is accurately performed according to parameters.

As an alternative example, the luminance value s of the image may be modified in an equalized manner based on the image processing parameter vector K:

s=cdf(I)/((L-1))×L

I'(x,y)=I(x,y)+Kl

I'(x,y)=Kz⋅(I(x,y)-μ)+μ

Further, the image may be subjected to random noise filtering processing based on the image processing parameter vector K:

G (m, q) is a filter kernel, m, q is a filter offset parameter value, and σ is the standard deviation of the images in the set of carousel images.

After the preprocessing is completed, a new image set PL will be obtained, each image in this set having been optimized for circular array carousel presentations. The images should be visually coordinated, properly sized, quickly loaded, and seamlessly integrated into the designed carousel layout.

S102, designing a layout control vector Ks= [ CS, IS, TI, AD, RD ] for a carousel image set PL, wherein CS represents a selector of a container containing all images, IS represents an image selector array, each element in the image selector array IS a character string and represents a selector of a single image, TI IS equal to n and represents the total number of images participating in carousel, AD represents the duration of transition animation, and RD represents carousel direction.

The layout control vector Ks for the carousel image set PL may include the following elements:

CS, container selector, for locating HTML elements containing all carousel images. CSS selectors (e.g., ID, class name, label, etc.) may be used to identify containers for carousel graphs. For example, if the container has an ID of carousel-container, CS may be the string "carousel-container".

IS, an image selector array for locating each carousel image within a container. Each image selector is a string of characters, which may be a CSS selector (e.g., ID, class name, etc.). The array IS should contain all the selectors of images in the container that participate in the carousel. For example, if an image IS of the class name carousel-image and carries a different ID (e.g., carousel-image-1, carousel-image-2, etc.), IS may be [ "carousel-image-1", "carousel-image-2", ].

TI, the total number of images participating in the carousel, which IS an integer, represents the number of elements in the IS array and also represents the number of images that the carousel map needs to traverse.

AD, the duration of the transition animation may be a value representing time, and may be seconds(s), milliseconds (ms), or the like. For example, if the animation duration is 1 second, the AD may be 1000 (milliseconds).

RD, carousel direction, indicates whether the image scrolls forward (e.g., left to right) or backward (e.g., right to left). RD may be an enumerated value or string to indicate the direction of the carousel. For example, the character string "forward" may be used to indicate forward scrolling and "backward" may be used to indicate backward scrolling. Or numbers may be used such as 1 for forward and-1 for backward.

S103, applying a transform attribute to each image in the carousel image set PL, calculating x and y coordinates according to the image index and the radius of a circle, arranging the images on the circumference, initializing a rotation to be an angle calculated based on the image index, arranging the images around a central point, and adding the features in the design layout control vector to each image.

Specifically, the position (x, y) of each image may be calculated, and for example, the center point coordinates of the carousel map may be set to (cx, cy).

For each image in the set of carousel images, its angle=2×pi×i/n on the circumference is calculated from its index i (starting from 0) in the set, where n is the total number of images and pi is the circumference rate.

And calculating the position where the image is to be placed by using the calculated angle through a formula from polar coordinates to rectangular coordinates.

X=cx+r×cos (angle), y=cy+r×sin (angle), where r is the radius of the circle.

The initial rotation angle of the images is calculated based on the index of the images in the set, and each image is rotated by an equal angle relative to the previous image, namely rotation= (360/n) ×i degrees.

For each image in PL, a CSS transform attribute value is constructed that includes translation (x, y) and rotation (rotate (degrees)), where x, y are the previously calculated position coordinates and degrees is the calculated rotation angle.

Through the steps, the positions and the rotation angles can be dynamically set for each image in the carousel image set, so that the images are circumferentially arranged, and additional layout control characteristics can be integrated as required.

S104, adjusting the sizes and arrangement modes of the images according to different screen sizes, matching the display effect of the carousel images on different devices, and dynamically adjusting the radius of the circular arrangement and the spacing of the images so as to adapt to different view port sizes.

The screen size and viewport size (i.e., the size of the browser window) of the current device may be obtained using a front-end technique (e.g., javaScript), for example, by attributes such as window.

And calculating the due maximum width and height of the carousel image according to the screen size and the view port size. If the image is required to maintain a fixed aspect ratio, the corresponding height can be calculated from the screen width. For a radius of a circular arrangement, it can be calculated from the width and number of images. For example, if there are four images to be evenly distributed on a circle, the radius of the circle will be half the image width plus half the image pitch.

The image spacing can be dynamically adjusted according to the screen size and the number of images. For example, on smaller screens, the spacing may need to be reduced to accommodate more images; on larger screens, the spacing may then be increased to provide a better visual experience.

The style and layout of the image are set using CSS. For example, auto may be used to ensure that the image maintains the correct aspect ratio when scaled through max-width and height. The effect of circular alignment is achieved using the flexbox, grid or position properties of the CSS. For circular arrangements, it may be desirable to incorporate the transform attribute of CSS to achieve rotation and positioning of the image.

JavaScript code can be written to monitor changes in window size (through the resize event) and dynamically adjust the size, spacing, and arrangement of images. When the window size changes, the size and spacing of the images are recalculated and the CSS style or DOM structure is updated to achieve a new layout.

Front end frameworks and libraries (e.g., react, vue, angular, etc.) can be used to simplify the development process and improve maintainability of the code. These frames and libraries typically provide a rich set of components and tools to address issues such as image size, spacing, and arrangement.

Through the steps, the size and arrangement mode of the images can be dynamically adjusted according to different screen sizes and view port sizes, so that the adaptation and optimization of the carousel images on different devices can be realized.

Referring to fig. 2, as another embodiment of the present invention, the method includes the steps of:

S201, image preparation and optimization, namely, before the front-end circular arrangement image carousel display is started, all images are optimized. Through image compression and clipping technology, the file size of each picture is reduced, and quick and clear image loading is ensured. The size and resolution of the pictures are unified so as to ensure that each image can be seamlessly joined in the carousel display, and the visual effect is consistent.

S202, HTML structure design, namely constructing a basic HTML structure and creating a container element containing all pictures. Within the container, a corresponding HTML tag (e.g. < img > or < div >) is created for each picture, ensuring that these tags can flexibly accommodate different devices and screen sizes. Semantically labeled tags are used to facilitate SEO optimization and accessibility.

S203, CSS layout and animation, namely realizing circular arrangement of images by using a CSS layout technology. The rotation and the positioning of the pictures are set through the transformation attribute of the CSS, so that the pictures are uniformly distributed along the circumference. Specifically, accurate positioning of the picture can be achieved by a combination of transform: rotation and transform: transform. In addition, a smooth transitional animation effect is designed and realized, for example, a transition attribute or an animation attribute is used, so that natural and smooth image switching in the carousel process is ensured, and the clamping or flickering is avoided.

S204, javaScript dynamic operation, namely writing JavaScript codes and controlling various logic of image carousel. The automatic playing function is realized by setting a timer (such as SETINTERVAL), and the displayed pictures are switched regularly. The user can manually switch the pictures by clicking a button or touch sliding, javaScript listens to these interaction events, and updates the image presentation accordingly. To enhance the user experience, animation effects, such as fades, smooth scrolling, etc., may be added.

S205, adopting a CSS media query technology to realize the responsive design of image carousel. The size and arrangement mode of the pictures are adjusted according to the screen size of the equipment, so that good display effect can be provided on various equipment. The radius of the circular arrangement and the spacing of the pictures can be dynamically adjusted to adapt to different sizes of the view ports, and visual consistency and aesthetic property are ensured.

And S206, lazy loading of pictures, namely, in order to improve the loading performance of the pages, realizing lazy loading technology of the pictures. And judging whether the picture enters the viewport or not by monitoring the scrolling event, and loading the picture when the picture is about to enter the viewport. This not only reduces initial load time, but also saves bandwidth and memory resources. Intersection Observer API can be used to efficiently implement lazy load functionality.

S207, browser compatibility processing, namely considering that the supporting degree of CSS3 and HTML5 characteristics of different browsers is different, using Polyfill and browser prefix to ensure compatibility. The essential prefixes (e.g. -webkit-, -moz-, etc.) are added to the key CSS attributes to ensure consistent presentation in the mainstream browser. And (3) performing extensive cross-browser testing, and timely finding and repairing compatibility problems in a specific browser.

And S208, SEO and accessibility optimization, namely adding a substitute text (alt text) for each picture, and improving the grabbing property of a search engine and the barrier-free property of pages. Ensuring that the carousel functionality is still partially operational with JavaScript disabled, such as providing a static image list presentation. The design concept of progressive enhancement is used, i.e. enabling advanced effects in a browser supporting advanced features, while providing basic functionality in a browser not supported.

And S209, optimizing performance, namely optimizing calculation of animation and transitional effects, reducing the number of rearrangement (reflow) and redrawing (repaint), and improving page performance. And CSS hardware acceleration technology (such as using transform and opacity attributes) is utilized to improve the smoothness and response speed of the animation. The DOM operation times are reduced as much as possible, and the document fragments (Document Fragment) and the virtual DOM technology are used for improving the operation efficiency.

S210, optimizing user interaction, namely enhancing user interaction experience, and adopting a modern event processing mechanism (such as using addEventListener) to process operations of clicking, touch sliding and the like of a user. Gesture support is provided, so that a user can conveniently switch pictures on the mobile device. Through proper feedback effects (such as visual feedback after button clicking), the friendliness and intuitiveness of interaction are improved.

According to the method for displaying the front-end circular arrangement image carousel disclosed by the invention, circular arrangement and smooth transition of images are realized through CSS animation and transformation technology, and meanwhile, loading and interaction of images are processed by combining with JavaScript dynamic operation, so that a high-performance and responsive image carousel effect is realized. According to the scheme, the picture loading strategy is optimized, the lazy loading technology is adopted to reduce initial loading time, and the media query is utilized to ensure good adaptation on different devices. In addition, the modern event processing mechanism is used for improving user interaction experience, barrier-free design and SEO optimization are combined, and compatibility and accessibility of image carousel in various use scenes are ensured. The whole technical scheme aims to solve the defects of the traditional image carousel in the aspects of performance, compatibility, responsive design, user interaction and the like, and provides a smooth, efficient and well-compatible circular image carousel display effect for users.

s=cdf(I)/((L-1))×L

I'(x,y)=I(x,y)+Kl

I'(x,y)=Kz⋅(I(x,y)-μ)+μ

According to a specific implementation manner of the embodiment of the present disclosure, the adjusting the size and the arrangement manner of the images according to different screen sizes matches the display effect of the carousel image on different devices, including:

determining a scaling factor ScaleFactor:

ScaleFactor=min(ViewportWidth/W_base ,1)

w _base denotes a reference width value, and ViewportWidth denotes a width value of a video window of the carousel image.

According to a specific implementation manner of the embodiment of the present disclosure, the adjusting the size and the arrangement manner of the images according to different screen sizes matches the display effect of the carousel images on different devices, and further includes:

according to the scaling factor ScaleFactor, an adaptive width value I _w and an adaptive height value I _h of the carousel image are calculated:

I_w=I_wbase×ScaleFactor

I_h=I_w/I_wbase × I_hbase

I _wbase denotes an original reference width value of the carousel image, and I _hbase denotes an original reference height value of the carousel image.

Corresponding to the above method embodiment, referring to fig. 3, the embodiment of the present invention further discloses an image carousel display device 30 based on circular arrangement, including:

The setting module 301 sets an image processing parameter vector K for the original image set P after obtaining n original image sets P to be carousel to facilitate image preprocessing of the original image set P based on the image processing parameter vector K, thereby obtaining a carousel image set PL;

The control module 302, for the carousel image set PL, designs a layout control vector ks= [ CS, IS, TI, AD, RD ], CS represents a selector of a container containing all images, IS represents an image selector array, each element in the image selector array IS a character string, represents a selector of a single image, TI IS equal to n, represents the total number of images participating in carousel, AD represents the duration of transition animation, and RD represents carousel direction;

a layout module 303 that applies transform attributes to each image in the carousel image set PL, calculates x and y coordinates from the image index and the radius of the circle, aligns the images circumferentially, initializes the rotation to an angle calculated based on the image index, aligns the images around a center point, and adds features in the design layout control vector to each image;

The matching module 304 adjusts the size and arrangement mode of the images according to different screen sizes, matches the display effect of the carousel images on different devices, and dynamically adjusts the radius of the circular arrangement and the spacing of the images so as to adapt to different view port sizes.

Referring to fig. 4, an embodiment of the present invention also provides an electronic device 60, including:

At least one processor; and

A memory communicatively coupled to the at least one processor; wherein,

The memory stores instructions executable by the at least one processor to enable the at least one processor to perform the circular arrangement based image carousel display method of the foregoing method embodiments.

Embodiments of the present invention also provide a non-transitory computer readable storage medium storing computer instructions for causing a computer to perform the foregoing method embodiments.

Embodiments of the present invention also provide a computer program product comprising a computer program stored on a non-transitory computer readable storage medium, the computer program comprising program instructions which, when executed by a computer, cause the computer to perform the circular arrangement based image carousel display method of the foregoing method embodiments.

Referring now to fig. 4, a schematic diagram of an electronic device 60 suitable for use in implementing embodiments of the present disclosure is shown. The electronic devices in the embodiments of the present disclosure may include, but are not limited to, mobile terminals such as mobile phones, notebook computers, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), in-vehicle terminals (e.g., in-vehicle navigation terminals), and the like, and stationary terminals such as digital TVs, desktop computers, and the like. The electronic device shown in fig. 4 is merely an example and should not be construed to limit the functionality and scope of use of the disclosed embodiments.

As shown in fig. 4, the electronic device 60 may include a processing means (e.g., a central processing unit, a graphics processor, etc.) 601, which may perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM) 602 or a program loaded from a storage means 608 into a Random Access Memory (RAM) 603. In the RAM603, various programs and data necessary for the operation of the electronic device 60 are also stored. The processing device 601, the ROM602, and the RAM603 are connected to each other through a bus 604. An input/output (I/O) interface 605 is also connected to bus 604.

In general, the following devices may be connected to the I/O interface 605: input devices 606 including, for example, a touch screen, touchpad, keyboard, mouse, image sensor, microphone, accelerometer, gyroscope, etc.; an output device 607 including, for example, a Liquid Crystal Display (LCD), a speaker, a vibrator, and the like; storage 608 including, for example, magnetic tape, hard disk, etc.; and a communication device 609. The communication means 609 may allow the electronic device 60 to communicate with other devices wirelessly or by wire to exchange data. While fig. 4 shows the electronic device 60 with various means, it is to be understood that not all of the illustrated means are required to be implemented or provided. More or fewer devices may be implemented or provided instead.

In particular, according to embodiments of the present disclosure, the processes described above with reference to flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method shown in the flowcharts. In such an embodiment, the computer program may be downloaded and installed from a network via communication means 609, or from storage means 608, or from ROM 602. The above-described functions defined in the methods of the embodiments of the present disclosure are performed when the computer program is executed by the processing device 601.

The foregoing is merely illustrative of the present invention, and the present invention is not limited thereto, and any changes or substitutions easily contemplated by those skilled in the art within the scope of the present invention should be included in the present invention. Therefore, the protection scope of the invention is subject to the protection scope of the claims.

Claims

1. The circular arrangement-based image carousel display method is characterized by comprising the following steps of:

According to different screen sizes, the sizes and arrangement modes of the images are adjusted, the display effect of the carousel images on different devices is matched, and the radius of the circular arrangement and the spacing of the images are dynamically adjusted so as to adapt to different view port sizes;

The image preprocessing is performed on the original image set P based on the image processing parameter vector K to obtain a carousel image set PL, including:

s is the luminance value of the equalized pixel, I is the original pixel luminance value, cdf (I) is the cumulative distribution function of I, and L is the number of luminance steps of the image contained in the image processing parameter vector K;

I '(x, y) =i (x, y) +kl, I' (x, y) being the adjusted pixel value, I (x, y) being the original pixel value, kl being the luminance adjustment parameter contained in the image processing parameter vector K;

μ is an average luminance value of the image, kz is a contrast enhancement factor contained in the image processing parameter vector K;

based on the image processing parameter vector K, carrying out random noise filtering processing on the image:

， g (m, q) is a filter kernel function, m, q is a filter offset parameter value, σ is a standard deviation of images in the set of carousel images;

The method for matching the display effect of the carousel images on different devices by adjusting the sizes and the arrangement modes of the images according to different screen sizes comprises the following steps:

determining a scaling factor ScaleFactor:

， Representing a reference width value, viewportWidth representing a width value of a video window of the carousel image;

calculating the adaptive width value of the carousel image according to the scaling factor ScaleFactor And adaptive height value：

，，Representing the original reference width value of the carousel image,Representing the original reference height value of the carousel image.

2. The method according to claim 1, wherein the method further comprises:

3. The method according to claim 2, wherein the method further comprises:

4. A method according to claim 3, characterized in that the method further comprises:

5. An image carousel display device based on circular arrangement, characterized by comprising:

the matching module is used for adjusting the sizes and arrangement modes of the images according to different screen sizes, matching the display effects of the carousel images on different devices, and dynamically adjusting the radius of the circular arrangement and the spacing of the images so as to adapt to different view port sizes;

determining a scaling factor ScaleFactor:

6. An electronic device, the electronic device comprising:

At least one processor; and

A memory communicatively coupled to the at least one processor; wherein,

The memory stores instructions executable by the at least one processor to enable the at least one processor to perform the circular arrangement based image carousel display method of any one of the preceding claims 1-4.