Image processing method, device, equipment, computer readable storage medium and computer program product

Abstract

The application provides an image processing method, device and equipment, a computer readable storage medium and a computer program product. The method comprises: displaying an image in an image container of a shared document, the image being in a first position relative to the image container; in response to a position adjustment operation for the image, obtaining a position adjustment parameter indicated by the position adjustment operation; updating the first position based on the position adjustment parameter to obtain a second position of the image relative to the image container; updating Cascading Style Sheet (CSS) properties of the image container in the shared document based on the second position; and rendering the image container in the shared document based on the updated CSS properties of the image container to achieve position adjustment of the image in the image container. The application can improve image processing efficiency and reduce storage and transmission costs.

Description

Technical Field

[0001] This application relates to computer technology, and more particularly to an image processing method, apparatus, device, computer-readable storage medium, and computer program product. Background Technology

[0002] In related technologies, image processing requires cropping to adapt to different image containers. Frequent image cropping operations mean that a new image file needs to be generated for each adjustment, which not only increases the server's storage burden but also intensifies network traffic, thus affecting loading speed and user experience. Furthermore, to maintain the original image quality and support restoration operations, the addresses of the original and all historical versions of the image must be retained, further increasing the consumption of storage and network resources and degrading the user experience. Summary of the Invention

[0003] This application provides an image processing method, apparatus, device, computer-readable storage medium, and computer program product that can perform image processing while ensuring image quality and reducing storage and transmission costs.

[0004] The technical solution of this application embodiment is implemented as follows:

[0005] This application provides an image processing method, the method comprising:

[0006] An image is displayed in an image container of a shared document, the image being positioned relative to the image container in a first position;

[0007] In response to a position adjustment operation on the image, obtain the position adjustment parameters indicated by the position adjustment operation;

[0008] The first position is updated based on the position adjustment parameters to obtain the second position of the image relative to the image container;

[0009] Based on the second position, update the Cascading Style Sheet properties of the image container in the shared document;

[0010] Based on the updated Cascading Style Sheet properties of the image container, the image container in the shared document is rendered to adjust the position of the image in the image container.

[0011] This application provides an image processing apparatus, the apparatus comprising:

[0012] A display module is used to display an image in an image container of a shared document, the image being positioned relative to the image container at a first position;

[0013] The acquisition module is configured to acquire the position adjustment parameters indicated by the position adjustment operation in response to the position adjustment operation of the image;

[0014] An update module is used to update the first position based on the position adjustment parameters to obtain a second position of the image relative to the image container; and based on the second position, update the Cascading Style Sheet properties of the image container in the shared document.

[0015] The rendering module is used to render the image container in the shared document based on the updated Cascading Style Sheet properties of the image container, so as to adjust the position of the image in the image container.

[0016] In the above scheme, both the image and the image container are rectangular in shape. The display module is further configured to control the center of the image to coincide with the center of the image container; when the center of the image coincides with the center of the image container, adjust the first side of the image so that the first side coincides with the side of the image container; determine the adjustment ratio for the first side, and adjust the second side of the image based on the adjustment ratio; wherein the first side is different from the second side, and both the first side and the second side are the width or height of the image; based on the adjusted second side of the image, render the image container in the shared document to display the image in the image container.

[0017] In the above scheme, the display module is further configured to construct a two-dimensional coordinate system with the center point of the image container as the origin, and in the two-dimensional coordinate system, move the first edge of the image along a first direction to coincide with the horizontal axis of the two-dimensional coordinate system, and move the second edge of the image along a second direction to coincide with the vertical axis of the two-dimensional coordinate system; obtain the width and height of the image, and move the image along a third direction by half of the width, and move the image along a fourth direction by half of the height, so that the center of the image coincides with the center of the image container.

[0018] In the above scheme, the position adjustment parameters include the third position of the target vertex of the image relative to the image container. The update module is further used to obtain the fourth position of the target vertex relative to the image container, wherein the fourth position is the position of the target vertex when the image is in the first position relative to the image container; and the first position is updated based on the third position and the fourth position to obtain the second position of the image relative to the image container.

[0019] In the above scheme, the update module is further configured to determine the position offset of the target vertex relative to the image container based on the third position and the fourth position; determine the width and height of the image based on the position offset; and update the first position based on the width and height of the image to obtain the second position of the image relative to the image container.

[0020] In the above scheme, the first position, the second position, the third position, and the fourth position are all coordinate positions in a two-dimensional coordinate system, which is a coordinate system constructed with the center of the image container. The update module is further configured to determine, based on the third position and the fourth position, a first offset of the target vertex on the horizontal axis of the two-dimensional coordinate system and a second offset of the target vertex on the vertical axis of the two-dimensional coordinate system; obtain the initial width and initial height of the image when the image is in the first position; and adjust the initial width and initial height of the image based on the first offset and the second offset to obtain the width and height of the image.

[0021] In the above scheme, the update module is further configured to obtain the rendering tree of the shared document and find the document object model node corresponding to the image container in the rendering tree; based on the second position, update the Cascading Style Sheet properties associated with the document object model node in the rendering tree.

[0022] In the above scheme, the shared document is used for collaborative editing by at least two clients. The image processing device further includes a sending module, which, after updating the Cascading Style Sheet (CSS) properties of the image container in the shared document, sends the updated CSS properties of the image container to other clients of the shared document, so that the other clients update the shared document displayed on the other clients based on the updated CSS properties of the image container.

[0023] In the above scheme, the image processing device further includes: a receiving module, configured to, after displaying an image in an image container of a shared document, display adjustment controls for the image in response to a trigger operation for the image; display a mask over the image in response to a trigger operation for the adjustment controls; and receive a position adjustment operation for the image based on the mask.

[0024] This application provides an electronic device, including:

[0025] Memory is used to store executable instructions or computer programs.

[0026] The processor, when executing computer-executable instructions or computer programs stored in the memory, implements the image processing method provided in the embodiments of this application.

[0027] This application provides a computer-readable storage medium storing computer-executable instructions or computer programs for implementing the image processing method provided in this application when executed by a processor.

[0028] This application provides a computer program product, including computer-executable instructions or a computer program, which, when executed by a processor, implements the image processing method provided in this application.

[0029] The embodiments of this application have the following beneficial effects:

[0030] In this application, an image is displayed within an image container in a shared document, and an initial position of the image relative to the image container is set. When the user performs a position adjustment operation, the position adjustment parameters are obtained, the initial position of the image is updated using the position adjustment parameters, the new position of the image is determined, and the Cascading Style Sheets (CSS) properties of the image container are updated based on the new position information. The image container is then re-rendered based on the updated CSS properties to achieve precise adjustment of the image position. This not only improves the efficiency of image processing and reduces storage requirements and network resource consumption, but also maintains image quality, speeds up page loading, and enhances the user experience. Attached Figure Description

[0031] Figure 1 This is a schematic diagram of the architecture of the image processing system provided in the embodiments of this application;

[0032] Figure 2 This is a schematic diagram of the structure of an electronic device for implementing an image processing method provided in an embodiment of this application;

[0033] Figure 3A This is a first flowchart illustrating the image processing method provided in this application embodiment;

[0034] Figure 3B This is a schematic diagram of the second process of the image processing method provided in the embodiments of this application;

[0035] Figure 4A This is a first schematic diagram of image initialization provided in an embodiment of this application;

[0036] Figure 4B This is a second schematic diagram of image initialization provided in the embodiments of this application;

[0037] Figure 5AThis is a first schematic diagram of image adjustment provided in an embodiment of this application;

[0038] Figure 5B This is a second schematic diagram of image adjustment provided in the embodiments of this application;

[0039] Figure 5C This is a third schematic diagram of image adjustment provided in the embodiments of this application;

[0040] Figure 6 This is a schematic diagram of the third process of the image processing method provided in the embodiments of this application;

[0041] Figure 7 This is a schematic diagram showing a scaled-down image provided in an embodiment of this application;

[0042] Figure 8 This is a schematic diagram of image cropping provided by related technologies;

[0043] Figure 9 This is a schematic diagram of the fourth process of the image processing method provided in the embodiments of this application. Detailed Implementation

[0044] To make the objectives, technical solutions, and advantages of this application clearer, the application will be further described in detail below with reference to the accompanying drawings. The described embodiments should not be regarded as limitations on this application. All other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0045] In the following description, references are made to “some embodiments,” which describe a subset of all possible embodiments. However, it is understood that “some embodiments” may be the same subset or different subsets of all possible embodiments and may be combined with each other without conflict.

[0046] In the following description, the terms "first, second, third, fourth" are used merely to distinguish similar objects and do not represent a specific ordering of objects. It is understood that "first, second, third, fourth" may be interchanged in a specific order or sequence where permitted, so that the embodiments of this application described herein can be implemented in an order other than that illustrated or described herein.

[0047] In this application embodiment, the terms "module" or "unit" refer to a computer program or part of a computer program that has a predetermined function and works with other related parts to achieve a predetermined goal, and can be implemented wholly or partially using software, hardware (such as processing circuitry or memory), or a combination thereof. Similarly, a processor (or multiple processors or memory) can be used to implement one or more modules or units. Furthermore, each module or unit can be part of an overall module or unit that includes the functionality of that module or unit.

[0048] Unless otherwise defined, all technical and scientific terms used in the embodiments of this application have the same meaning as commonly understood by one of ordinary skill in the art. The terminology used in the embodiments of this application is for the purpose of describing the embodiments of this application only and is not intended to limit this application.

[0049] In the implementation of this application, the collection and processing of relevant data should strictly comply with the requirements of relevant laws and regulations, obtain the informed consent or separate consent of the personal information subject, and carry out subsequent data use and processing within the scope of laws and regulations and the authorization of the personal information subject.

[0050] Before providing a further detailed description of the embodiments of this application, the nouns and terms involved in the embodiments of this application will be explained, and the nouns and terms involved in the embodiments of this application shall be interpreted as follows.

[0051] 1) Cascading Style Sheets (CSS) is a language used to describe the presentation of HyperText Markup Language (HTML) or Extensible Markup Language (XML) documents. CSS controls the layout, colors, fonts, and other visual and typographic effects of web pages, separating the presentation of web page content from its structure.

[0052] 2) Image container is a concept in web design, referring to HTML elements used to contain and display images. It is not only used to directly embed images, but also to give styles and layout control through CSS to achieve visual effects such as precise positioning, size adjustment, border decoration, and responsive layout of images. At the same time, image containers can also accommodate additional elements, such as titles and descriptions, to build richer and more semantic multimedia content displays.

[0053] 3) The render tree is the internal data structure that the browser builds when converting HTML documents and CSS styles into visual web pages. It contains the nodes of all visible elements and their geometric relationships on the page. It is generated by merging the Document Object Model (DOM) tree and the Cascading Style Sheets Object Model (CSSOM) tree, and is presented on the screen after calculating the layout and drawing pixels.

[0054] 4) In response to, used to indicate the conditions or states on which the operation performed depends. When the conditions or states on which it depends are met, one or more operations performed may be performed in real time or with a set delay. Unless otherwise specified, there is no restriction on the order in which the multiple operations are performed.

[0055] During their research, the inventors discovered that image processing often requires cropping to fit different fill positions. Frequent image cropping necessitates generating a new image file for each adjustment, increasing server storage load and network bandwidth consumption, thus impacting loading speed and user experience. Furthermore, to maintain original image quality and support restoration operations, the addresses of the original and all historical image versions must be retained, further escalating storage and network resource consumption and degrading the user experience.

[0056] Based on this, embodiments of this application provide an image processing method, apparatus, device, computer-readable storage medium, and computer program product, which can preserve image quality and reduce storage and transmission costs. The following describes exemplary applications of electronic devices provided in embodiments of this application for implementing the image processing method. The devices provided in embodiments of this application can be implemented as various types of terminals such as laptops, tablets, desktop computers, set-top boxes, smartphones, smart speakers, smartwatches, smart TVs, and vehicle terminals, or as servers.

[0057] The following describes an exemplary application system architecture, using an electronic device as a server, to illustrate how the image processing method provided in this invention is implemented collaboratively by the server and the terminal. (See also...) Figure 1 , Figure 1 This is a schematic diagram of the architecture of the image processing system provided in the embodiments of this application. To support an image processing application, in Figure 1 In the image processing system 100, the terminal 400 is connected to the server 200 through the network 300, which can be a wide area network or a local area network, or a combination of both.

[0058] Terminal 400 is used to respond to a user creating a shared document in the client by sending a shared document creation request to server 200 via network 300.

[0059] Server 200 is used to respond to shared document creation requests and send the relevant data of the shared document to terminal 400.

[0060] Terminal 400 is also used to display the page of the shared document based on relevant data of the shared document, display an image in the image container of the shared document, and the image is in a first position relative to the image container; in response to a position adjustment operation for the image, it obtains the position adjustment parameters indicated by the position adjustment operation; updates the first position based on the position adjustment parameters to obtain a second position of the image relative to the image container; updates the Cascading Style Sheet (CSS) properties of the image container in the shared document based on the second position; renders the image container in the shared document based on the updated CSS properties of the image container to realize the position adjustment of the image in the image container, and sends the updated CSS properties of the image container to server 200 so that server 200 can synchronize the updated CSS properties of the image container to other clients of the shared document.

[0061] In other embodiments, the image processing method provided by the present invention can also be implemented independently by a terminal. The terminal has a client installed that can implement the image processing method. When a user requests image processing in the client, the client displays an image in the image container of the shared document, with the image in a first position relative to the image container. In response to a position adjustment operation for the image, the position adjustment parameters indicated by the position adjustment operation are obtained. The first position is updated based on the position adjustment parameters to obtain a second position of the image relative to the image container. Based on the second position, the Cascading Style Sheet (CSS) properties of the image container in the shared document are updated. Based on the updated CSS properties of the image container, the image container in the shared document is rendered to achieve the position adjustment of the image in the image container.

[0062] Image processing plugins can also be embedded in the client running on the terminal to implement image processing methods locally on the client. For example, after receiving an image processing request, the terminal calls the image processing plugin to implement the image processing method. In response to the image processing request for the input string, the image is displayed in the image container of the shared document, with the image in a first position relative to the image container. In response to a position adjustment operation on the image, the position adjustment parameters indicated by the position adjustment operation are obtained. The first position is updated based on the position adjustment parameters to obtain a second position of the image relative to the image container. Based on the second position, the Cascading Style Sheet (CSS) properties of the image container in the shared document are updated. Based on the updated CSS properties of the image container, the image container in the shared document is rendered to achieve the position adjustment of the image in the image container.

[0063] In some embodiments, server 200 may be a standalone physical server, a server cluster consisting of multiple physical servers, or a distributed system. Terminals and servers can be connected directly or indirectly via wired or wireless communication, and this embodiment does not impose any limitations.

[0064] In this way, not only is the efficiency of image processing improved, but storage requirements and network resource consumption are reduced, while image quality is maintained, page loading speed is accelerated, and user experience is enhanced.

[0065] See Figure 2 , Figure 2 This is a schematic diagram of the structure of an electronic device for implementing an image processing method provided in an embodiment of this application. In practical applications, the electronic device can be implemented as various types of terminals such as laptops, tablets, desktop computers, smartphones, smart speakers, smartwatches, smart TVs, and vehicle terminals. It can also be implemented as a server or as a device cluster composed of servers and terminals. Figure 2 The illustrated electronic device 500 includes at least one processor 510, a memory 550, at least one network interface 520, and a user interface 530. The various components in the electronic device 500 are coupled together via a bus system 540. It is understood that the bus system 540 is used to implement communication between these components. In addition to a data bus, the bus system 540 also includes a power bus, a control bus, and a status signal bus. However, for clarity, ... Figure 2 The general labeled all buses as Bus System 540.

[0066] The processor 510 can be an integrated circuit chip with signal processing capabilities, such as a general-purpose processor, a digital signal processor (DSP), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The general-purpose processor can be a microprocessor or any conventional processor, etc.

[0067] User interface 530 includes one or more output devices 531 that enable the presentation of media content, including one or more speakers and / or one or more visual displays. User interface 530 also includes one or more input devices 532, including user interface components that facilitate user input, such as a keyboard, mouse, microphone, touch screen display, camera, other input buttons and controls.

[0068] The memory 550 may be removable, non-removable, or a combination thereof. Exemplary hardware devices include solid-state storage, hard disk drives, optical disk drives, etc. The memory 550 may optionally include one or more storage devices physically located away from the processor 510.

[0069] The memory 550 may include volatile memory or non-volatile memory, or both. The non-volatile memory may be read-only memory (ROM), and the volatile memory may be random access memory (RAM). The memory 550 described in this application embodiment is intended to include any suitable type of memory.

[0070] In some embodiments, memory 550 is capable of storing data to support various operations, examples of which include programs, modules, and data structures or subsets or supersets thereof, as illustrated below.

[0071] Operating system 551 includes system programs for handling various basic system services and performing hardware-related tasks, such as the framework layer, core library layer, and driver layer, for implementing various basic business functions and handling hardware-based tasks.

[0072] The network communication module 552 is used to reach other electronic devices via one or more (wired or wireless) network interfaces 520, exemplary network interfaces 520 including Bluetooth, WiFi, and Universal Serial Bus (USB).

[0073] Presentation module 553 enables the presentation of information (e.g., a user interface for operating peripheral devices and displaying content and information) via one or more output devices 531 (e.g., a display screen, a speaker, etc.) associated with user interface 530.

[0074] The input processing module 554 is used to detect one or more user inputs or interactions from one or more input devices 532, and to translate the detected inputs or interactions.

[0075] In some embodiments, the image processing apparatus provided in this application can be implemented in software. Figure 2 An image processing apparatus 555 stored in memory 550 is shown. This apparatus can be software in the form of programs and plug-ins, and includes the following software modules: a display module 5551, an acquisition module 5552, an update module 5553, and a rendering module 5554. These modules are logically linked and can therefore be arbitrarily combined or further separated according to their implemented functions. The functions of each module will be described below.

[0076] Below, based on the electronic device and system provided in the embodiments of this application, the image processing method provided in the embodiments of this application will be described.

[0077] See Figure 3A , Figure 3A This is a first flowchart illustrating the image processing method provided in this application embodiment. In practical applications, this method can be implemented by a terminal or a server alone, or by a terminal and a server working together. The following example uses a terminal implementation and will be combined with... Figure 3A The steps shown illustrate the image processing method provided in the embodiments of this application.

[0078] In step 101, the image is displayed in the image container of the shared document.

[0079] Here, the image is in the first position relative to the image container. The first position refers to the initial position of the image relative to the image container. The image container is used to display the image within it. It can be understood that the image displayed by the image container can be the entire content of the image or a part of the image content. The specific content of the image displayed by the image container is determined based on the position of the image relative to the image container.

[0080] It should be noted that when a user clicks the control to create a shared document, the client receives the instruction to create a shared document and sends a creation request to the server. The server returns the corresponding HyperText Markup Language (HTML) document and Cascading Style Sheets (CSS) file, which includes data such as the height and width of the image container.

[0081] When a user triggers an image addition command, the client receives the command and creates a new HTML element based on the corresponding data. It sets the class name and associates this new HTML element with the specific styles defined in the CSS for the image container. This includes hiding content that extends beyond the container's boundaries, ensuring only the image within the container is displayed on the page, and defining relative positioning so that absolutely positioned elements within the container are positioned relative to it. The newly created element is added to the Document Object Model (DOM). The browser running on the client detects the DOM change, begins re-rendering, and draws the image container onto the screen for display. It also converts the container's width and height into percentage values ​​for storage. Alternatively, when the user triggers the image addition command, the client can switch existing HTML elements from hidden to visible and render them based on the CSS styles defined for the image container, drawing the container onto the screen.

[0082] In this way, image containers can be dynamically created and managed on the page without refreshing the page, enabling real-time display and layout adjustments of image containers. This improves user experience and page response speed, while reducing server storage pressure and optimizing resource utilization efficiency by transmitting percentage values.

[0083] In some embodiments, both the image and the image container are rectangular in shape. See [link / reference] Figure 3B , Figure 3B This is a schematic diagram of the second process of the image processing method provided in the embodiments of this application. Figure 3A Step 101 shown can be implemented through steps 1011 to 1014, as explained in detail below.

[0084] In step 1011, the center of the control image is aligned with the center of the image container.

[0085] It should be noted that to ensure the center of the image coincides with the center of the image container, you can first move the vertices of the image to the center of the image container, and then, based on the position of the image relative to the image container, move the center of the image to coincide with the center of the image container, so that the image is centered within the image container. Here, the vertices of the image can be any one of the vertices of the top left, bottom left, top right, and bottom right corners of the image.

[0086] In some embodiments, the center of the controlled image can be aligned with the center of the image container by: constructing a two-dimensional coordinate system with the center point of the image container as the origin; moving the first edge of the image along a first direction to coincide with the horizontal axis of the two-dimensional coordinate system, and moving the second edge of the image along a second direction to coincide with the vertical axis of the two-dimensional coordinate system; obtaining the width and height of the image, and moving the image along a third direction by half the width and along a fourth direction by half the height, so that the center of the image coincides with the center of the image container.

[0087] It should be noted that the width and height of the image, as well as the width and height of the image container, are stored as percentage values. After obtaining the percentage values ​​corresponding to the width and height of the image container, the width and height of the image container can be obtained by multiplying the width and height of the shared document by the corresponding percentage values.

[0088] As an example, when the percentage value corresponding to the width of the obtained image container is 'a' and the percentage value corresponding to the height is 'b', and the width of the shared document is 'A' and the height of the image container is 'B', we can obtain the width of the image container as 'a*A' and the height of the image container as 'b*B'. When the percentage value corresponding to the width of the obtained image is 'c' and the height of the image is 'd', we can obtain the width of the image as 'c*a*A' and the height of the image as 'd*b*B'.

[0089] In this way, the image container can maintain the appropriate proportions and size regardless of the screen size or resolution on which the user views the document, thus ensuring a consistent user experience and proper image display. It also reduces layout problems and repetitive design work caused by fixed sizes. In addition, since it stores percentage values ​​of width and height instead of specific pixel values, storage requirements are reduced, allowing for flexible adjustment and display on different devices.

[0090] It should be noted that the two-dimensional coordinate system can be a rectangular coordinate system, the first edge can be the top or bottom edge of the image, and the first edge is parallel to the horizontal axis of the two-dimensional coordinate system. The second edge can be the left or right edge of the image, and the second edge is parallel to the vertical axis of the two-dimensional coordinate system. Furthermore, the first direction is opposite to the fourth direction, and the third direction is opposite to the second direction.

[0091] When the vertex of the image is the top left vertex, the first edge is the top edge of the image, and the second edge is the left edge of the image. Move the top edge of the image along the first direction to coincide with the horizontal axis of the two-dimensional coordinate system, and move the left edge of the image along the second direction to coincide with the vertical axis of the two-dimensional coordinate system. Then move the image along the third direction by half its width and along the fourth direction by half its height, so that the center of the image coincides with the center of the image container.

[0092] When the vertex of the image is the top right corner vertex, the first edge is the top edge of the image, and the second edge is the right edge of the image. Move the top edge of the image along the first direction to coincide with the horizontal axis of the two-dimensional coordinate system, and move the right edge of the image along the second direction to coincide with the vertical axis of the two-dimensional coordinate system. Then move the image along the third direction by half its width and along the fourth direction by half its height, so that the center of the image coincides with the center of the image container.

[0093] It is understandable that when the vertex of the image is the bottom left or bottom right vertex, a similar approach can be used to make the center of the image coincide with the center of the image container.

[0094] As an example, taking the top-left vertex of the image as an example, see [link to image]. Figure 4A , Figure 4A This is a first schematic diagram of image initialization provided in an embodiment of this application. At this time, Figure 4A In Figure A, the upper edge 402 of image 401 is the first edge, and the left edge 403 of image 401 is the second edge. The first edge 402 is moved downwards until it coincides with the horizontal axis of the two-dimensional coordinate system, and the second edge is moved to the right until it coincides with the vertical axis of the two-dimensional coordinate system. This allows us to obtain... Figure 4A In Figure B, the top-left vertex of the image coincides with the center of the image container. Figure 4A By moving image 401 to the left by half its width and then moving image 401 upwards by half its height, we can obtain... Figure 4A In Figure C, the center of the image coincides with the center of the image container.

[0095] In other embodiments, the alignment of the image center with the image container center can also be achieved by: constructing a two-dimensional coordinate system with the image container vertex as the origin; locating the image container center and the image vertex based on the two-dimensional coordinate system; moving the image vertex to the image center point; and aligning the image center with the image container center based on the image width and height. Here, the image container vertex can be any one of the top-left, bottom-left, top-right, and bottom-right vertexes of the image container, and the image vertex can be any one of the top-left, bottom-left, top-right, and bottom-right vertexes of the image.

[0096] As an example, taking the construction of a two-dimensional coordinate system based on the top left corner of the image container as the origin, we can first position the top left corner of the image to the origin of the two-dimensional coordinate system, take the top edge of the image as the first edge, take the left edge of the image as the second edge, move the first edge of the image down by half the height of the image container, and move the second edge of the image to the right by half the width of the image container, so that the top left corner of the image is moved to the center position of the image container. Then, move the image to the left by half its own width and up by half its own width, so that the center of the image coincides with the center of the image container.

[0097] As another example, taking the construction of a two-dimensional coordinate system based on the top right corner vertex of the image container as the origin, we can first position the top left corner vertex of the image to the origin of the two-dimensional coordinate system, take the top edge of the image as the first edge, take the left edge of the image as the second edge, move the first edge of the image down by half the height of the image container, and move the second edge of the image to the left by half the width of the image container, so that the top left corner vertex of the image is moved to the center position of the image container. Then, move the image to the left by half its own width and up by half its own width, so that the center of the image coincides with the center of the image container.

[0098] In this way, the center point of the image is precisely aligned with the center point of the image container, which facilitates subsequent adjustments to the image.

[0099] In step 1012, when the center of the image coincides with the center of the image container, the first side of the image is adjusted so that the first side coincides with the side of the image container.

[0100] In step 1013, an adjustment ratio for the first side is determined, and the second side of the image is adjusted based on the adjustment ratio.

[0101] Here, the first side is different from the second side, and the first side and the second side are the width or height of the image. It can be understood that when the first side is the width of the image, then the second side is the height of the image, and when the first side is the height of the image, the second side is the width of the image.

[0102] It should be noted that when the center of the image coincides with the center of the image container, adjusting the first side of the image so that it coincides with the side of the image container means adjusting the length of the first side to be the same as the length of the corresponding side of the image container. Taking the width of the image as an example, this means adjusting the width of the image to be the same as the width of the image container, and adjusting the height of the image accordingly based on the proportion of the image width adjustment.

[0103] As an example, see Figure 4B , Figure 4BThis is a second schematic diagram of image initialization provided in an embodiment of this application. Taking the width of image 402 as an example, when the width of image 402 is 200 pixels, the height is 300 pixels, and the width of the image container is 100 pixels, with the center of image 402 coinciding with the center of the image container, the width of image 402 is adjusted so that the width coincides with the edge of the image container, that is, the width of image 402 is adjusted to 100 pixels. Therefore, the adjustment ratio for the width of the image can be determined to be 2, and the height of image 402 is adjusted based on the adjustment ratio 2 to obtain the adjusted image. Figure 4B Image 403 in Figure B has a width of 100 pixels, which is the same as the width of the image container, and a height of 150 pixels.

[0104] In this way, the original aspect ratio of the image can be maintained, avoiding image distortion, while ensuring that one side of the image completely fills the container without exceeding the boundary or leaving blank space, thus improving the cleanliness and visual effect of the page layout. Furthermore, this adaptive adjustment also helps improve the responsiveness of the page, allowing images to display at their optimal size on different devices and screen sizes, enhancing the user experience.

[0105] In step 1014, the image container in the shared document is rendered based on the second side of the adjusted image to display the image in the image container.

[0106] It should be noted that after a user clicks the image upload control in the image container on the page, the client detects the image upload event, obtains the uploaded image, and creates a new image element. This image element corresponds to the image, and the parent container of the image element is the HTML element corresponding to the image container. When the new element is added to the DOM, the image styles pre-set in CSS are applied to the element corresponding to the image, including defining absolute positioning so that the image can move relative to the image container, and controlling the center of the image to coincide with the center of the image container. When the center of the image coincides with the center of the image container, the first side of the image is adjusted so that the first side coincides with the side of the image container. The adjustment ratio for the first side is determined, and the second side of the image is adjusted based on the adjustment ratio. The browser running on the client detects the change in the DOM and renders the image container in the shared document to display the image in the image container.

[0107] In some embodiments, after an image is displayed in an image container of a shared document, in response to a triggering operation on the image, adjustment controls for the image are displayed; in response to a triggering operation on the adjustment controls, a mask is displayed above the image container, the mask covering the image; based on the mask, a position adjustment operation on the image is received, wherein the triggering operation includes clicking, touching, etc.

[0108] As an example, taking a click action as the trigger, participate in... Figure 5A , Figure 5A This is a first schematic diagram of image adjustment provided in an embodiment of this application. After a user creates a new shared document, they click on the create control 501 to create an image group and upload images 502 and 503. (See also...) Figure 5B , Figure 5B This is a second schematic diagram of image adjustment provided in the embodiments of this application. After the image is displayed in the image container of the shared document, the user clicks... Figure 5B After image 504 in Figure A, an adjustment control 505 for image 504 will be displayed in the lower right corner of the image. Clicking the adjustment control 505 will... Figure 5B In Figure B, a mask is displayed above the image container, covering the image. Users can then adjust the image's position by zooming in and out, dragging, panning, and rotating it based on the mask. After adjustment, click the outside of the image to save. See [link to image documentation]. Figure 5C , Figure 5C This is a third schematic diagram of image adjustment provided in the embodiments of this application, which ultimately results in image 506 displayed in the image container.

[0109] In this way, by integrating image adjustment controls and masks into shared documents, users can directly perform operations such as adjusting the position of images within the shared document, which not only improves editing efficiency but also enhances the user experience, making image editing more intuitive and convenient.

[0110] In step 102, in response to the position adjustment operation for the image, the position adjustment parameters indicated by the position adjustment operation are obtained.

[0111] In step 103, the first position is updated based on the position adjustment parameters to obtain the second position of the image relative to the image container.

[0112] Here, the position adjustment operations for the image include moving, scaling, and rotating the image, and the position adjustment parameters include the third position of the target vertex of the image relative to the image container.

[0113] In some embodiments, see Figure 6 , Figure 6 This is a schematic diagram of the third process of the image processing method provided in the embodiments of this application. Figure 3A Step 103 shown can be implemented through steps 1031 to 1032, which are explained in detail below.

[0114] In step 1031, the fourth position of the target vertex relative to the image container is obtained.

[0115] In step 1032, the first position is updated based on the third and fourth positions to obtain the second position of the image relative to the image container.

[0116] In some embodiments, updating the first position based on the third and fourth positions to obtain the second position of the image relative to the image container can be achieved by: determining the position offset of the target vertex relative to the image container based on the third and fourth positions; determining the width and height of the image based on the position offset; and updating the first position based on the width and height of the image to obtain the second position of the image relative to the image container.

[0117] Wherein, the first position, the second position, the third position, and the fourth position are all coordinate positions in a two-dimensional coordinate system. The first position is used to represent the position of the image in the two-dimensional coordinate system before the current position adjustment operation. The second position is used to represent the position of the image in the two-dimensional coordinate system after the current position adjustment operation. The third position is used to represent the position of the target vertex in the two-dimensional coordinate system after the current position adjustment operation. The fourth position is the position of the target vertex when the image is in the first position relative to the image container, and is used to represent the position of the target vertex in the two-dimensional coordinate system before the current position adjustment operation.

[0118] In some embodiments, the two-dimensional coordinate system is a coordinate system constructed with the center of the image container. Accordingly, based on the third and fourth positions, the position offset of the target vertex relative to the image container can be determined in the following way: based on the third and fourth positions, the first offset of the target vertex on the horizontal axis of the two-dimensional coordinate system and the second offset of the target vertex on the vertical axis of the two-dimensional coordinate system can be determined. Based on the position offset, the width and height of the image can be determined in the following way: the initial width and initial height of the image when the image is in the first position can be obtained; based on the first and second offsets, the initial width and initial height of the image can be adjusted to obtain the width and height of the image.

[0119] Here, the fourth position includes the horizontal and vertical offsets of the target vertex in the two-dimensional coordinate system. The horizontal offset is the offset of the target vertex relative to the origin of the two-dimensional coordinate system on the horizontal axis. When the horizontal offset is negative, the target vertex is to the left of the origin of the two-dimensional coordinate system, and when the horizontal offset is positive, the target vertex is to the right of the origin of the two-dimensional coordinate system. Correspondingly, the vertical offset is the offset of the target vertex relative to the origin of the two-dimensional coordinate system on the vertical axis. When the vertical offset is negative, the target vertex is below the origin of the two-dimensional coordinate system, and when the vertical offset is positive, the target vertex is above the origin of the two-dimensional coordinate system.

[0120] It should be noted that the horizontal and vertical offsets are stored as percentage values. Therefore, obtaining the specific values ​​of the horizontal and vertical offsets requires calculation based on the width and height of the image and the width and height of the image container. When the user adjusts the position of the image, the percentage values ​​of the horizontal and vertical offsets at the fourth position are obtained. The percentage value of the horizontal offset at the fourth position is multiplied by the difference between the width of the image container and the initial width of the image to obtain the horizontal offset at the fourth position. The percentage value of the vertical offset at the fourth position is multiplied by the difference between the height of the image container and the initial height of the image to obtain the vertical offset at the fourth position.

[0121] As an example, when the percentage value of the target vertex's offset relative to the origin of the 2D coordinate system on the horizontal axis is offsetX, the calculated width of the image container is containerW, and the initial width of the image is startWidth, the offset of the target vertex relative to the origin of the 2D coordinate system on the horizontal axis is offsetX*(containerW-startWidth); when the percentage value of the target vertex's offset relative to the origin of the 2D coordinate system on the vertical axis is offsetY, the calculated height of the image container is containerH, and the height of the image is startHeight, the offset of the target vertex relative to the origin of the 2D coordinate system on the vertical axis is offsetY*(containerH-startHeight).

[0122] When a user adjusts the position of an image, the image will have a first offset on the horizontal axis and a second offset on the vertical axis. The first and second offsets generated during movement can be determined by adding a movement event detector to the HTML element. Both the first and second offsets are referenced to a two-dimensional coordinate system. The image can be adjusted by clicking the mouse, touching the screen, or using gestures.

[0123] As an example, taking the position adjustment operation implemented by mouse dragging as an example, the mouse press event is detected, and the initial horizontal axis offset and initial vertical axis offset of the mouse in the two-dimensional coordinate system are recorded at this time. The mouse movement event is detected, and the new horizontal axis offset and new vertical axis offset of the mouse in the two-dimensional coordinate system are determined when the mouse stops moving. Based on the difference between the initial horizontal axis offset and the new horizontal axis offset, the first offset is determined. Based on the difference between the initial vertical axis offset and the new vertical axis offset, the second offset is determined.

[0124] When a user performs a movement adjustment on an image, the horizontal and vertical offsets of the target vertex are calculated and updated based on the direction of movement. Specifically, taking the top-left corner of the image as the target vertex, when the image moves left or right, the horizontal offset of the target vertex is increased by a first offset, while the vertical offset remains unchanged. When the image moves up or down, the horizontal offset of the target vertex remains unchanged, while the vertical offset is increased by a second offset.

[0125] As an example, when the horizontal offset of the target vertex is startX, the vertical offset is startY, the first offset is clientX, and the second offset is clientY, when the image moves left or right, the horizontal offset of the target vertex is startX + clientX. When the image moves up or down, the vertical offset of the target vertex is startY + clientY.

[0126] When a user adjusts an image by zooming in or out, the system dynamically calculates and updates the horizontal and vertical offsets of the target vertex, as well as the image's width and height, based on the image vertex the user drags. The dragged image vertex can be any one of the top-left, top-right, bottom-left, or bottom-right corners of the image. Specifically, taking the top-left corner of the image as the target vertex as an example, see [link to example]. Figure 7 , Figure 7 This is a schematic diagram illustrating the scaling of an image provided in an embodiment of this application. When dragging the top-left vertex of the image, the horizontal offset of the target vertex is increased by a first offset, and the vertical offset of the target vertex is increased by a second offset. The initial width of the image is subtracted from the first offset, and the height of the image is determined based on the initial aspect ratio. When dragging the top-right vertex of the image, the horizontal offset of the target vertex remains unchanged, and the vertical offset of the target vertex is increased by a second offset. The initial width of the image is increased by the first offset, and the height of the image is determined based on the initial aspect ratio. When dragging the bottom-left vertex of the image, the horizontal offset of the target vertex is increased by a first offset, and the vertical offset of the target vertex remains unchanged. The initial width of the image is subtracted from the first offset, and the height of the image is determined based on the initial aspect ratio. When dragging the bottom-right vertex of the image, the horizontal and vertical offsets of the target vertex remain unchanged, and the initial width of the image is increased by the first offset, and the height of the image is determined based on the initial aspect ratio.

[0127] As an example, when the horizontal offset of the target vertex is startX, the vertical offset is startY, the first offset is clientX, the second offset is clientY, the initial width of the image is W, and the initial height is H, when dragging the top-left vertex of the image, the horizontal offset of the target vertex is startX + clientX, the vertical offset of the target vertex is startY + clientY, the width of the image is W - clientX, and the height of the image is (W - clientX) * (H / W); when dragging the bottom-left vertex of the image... When dragging, the horizontal offset of the target vertex is startX + clientX, the width of the image is W - clientX, and the height of the image is (W - clientX) * (H / W); when dragging the top right vertex of the image, the vertical offset of the target vertex is startY + clientY, the width of the image is W + clientX, and the height of the image is (W + clientX) * (H / W); when dragging the bottom right vertex of the image, the width of the image is W + clientX, and the height of the image is (W + clientX) * (H / W).

[0128] When the user performs a rotation adjustment on the image, taking the top left corner of the image as the target vertex as an example, the corresponding rotation radian is calculated based on the difference between the first offset and the horizontal axis offset of the image center point, and the difference between the second offset and the vertical axis offset of the image center point. The rotation radian is then converted into an angle, and the initial angle of the image is subtracted from this angle to obtain the new rotation angle of the image.

[0129] In this way, the first position can be updated based on the horizontal and vertical offsets of the target vertex, the height and width of the image, and the new rotation angle to obtain the second position of the image relative to the image container. In this way, the user can adjust the image simply by moving the image within the image container. The operation is simple and does not destroy the integrity of the image. This not only improves the efficiency of image processing and reduces storage requirements and network resource consumption, but also preserves the image quality.

[0130] In step 104, the Cascading Style Sheet properties of the image container in the shared document are updated based on the second location.

[0131] In some embodiments, step 104 can be implemented by: obtaining the rendering tree of the shared document and finding the document object model node corresponding to the image container in the rendering tree; and updating the Cascading Style Sheets property associated with the document object model node in the rendering tree based on the second position.

[0132] Here, the rendering tree contains DOM nodes and their corresponding Cascading Style Sheet properties. Based on the image container's identifier or class name, the document object model node corresponding to the image container can be found. The horizontal and vertical offsets of the target vertex at the second position, as well as the image's width and height, are converted into corresponding percentage values. Based on the percentage values ​​and the new rotation angle, the Cascading Style Sheet properties associated with the document object model node in the rendering tree are updated.

[0133] It should be noted that the horizontal offset of the target vertex can be divided by the difference between the width of the image container and the width of the image to obtain the percentage value corresponding to the horizontal offset of the target vertex; the vertical offset of the target vertex can be divided by the difference between the height of the image container and the height of the image to obtain the percentage value corresponding to the vertical offset of the target vertex; the width of the image can be divided by the width of the image container to obtain the percentage value corresponding to the width of the image; and the height of the image can be divided by the height of the image container to obtain the percentage value corresponding to the height of the image.

[0134] As an example, when the horizontal offset of the target vertex corresponding to the second position is newX, the vertical offset is newY, the width of the image container is containerW, the height of the image container is containerH, the width of the image is W1, and the height of the image is H1, the percentage value corresponding to the horizontal offset of the target vertex is newX / (containerW-W1), the percentage value corresponding to the vertical offset of the target vertex is newY / (containerH-H1), the percentage value corresponding to the width of the image is W1 / containerW, and the percentage value corresponding to the height of the image is H1 / containerH.

[0135] In this way, the page layout can dynamically adapt to different display needs, enhancing the responsiveness and interactivity of the page, while also improving the user experience and the visual effect of the page.

[0136] In some embodiments, the shared document is used for collaborative editing by at least two clients. After updating the Cascading Style Sheet (CSS) properties of the image container in the shared document, the updated CSS properties of the image container are sent to other clients of the shared document, so that the other clients can update the shared document displayed on the other clients based on the updated CSS properties of the image container.

[0137] Understandably, a shared document is a document that can be accessed and collaboratively edited by at least two clients simultaneously. It can be a text file, spreadsheet, presentation, etc. Collaborative editing refers to at least two users simultaneously editing the content of the shared document in the document editing window. When a client adjusts the style of an image container in the document, such as changing its position, size, or other CSS properties, these changes are captured in real time and sent to all other participating clients via the network. After receiving the updated CSS properties, each client immediately applies the CSS properties to its own view page, thereby ensuring that all users see the latest, synchronized images, maintaining consistency in editing and smooth collaboration.

[0138] In this way, the rendering tree of the shared document can be updated in real time and synchronized to all clients, ensuring that at least two clients can see the same shared document status, improving team work efficiency, ensuring that all participants can work on the same version, and enhancing the consistency and accuracy of the shared document.

[0139] In step 105, the image container in the shared document is rendered based on the updated Cascading Style Sheet properties of the image container to adjust the position of the image in the image container.

[0140] Here, based on the updated Cascading Style Sheet properties of the image container, the image container in the shared document can be rendered. First, the alignment of the image is set to ensure that the image can be appropriately adjusted according to the size of the image container. Then, by calculating the offset of the image relative to the container, the image is translated based on the offset to achieve the expected position within the container. At the same time, the image can be rotated to adapt to specific visual needs. Finally, the display size of the image is adjusted to ensure that it fits the space of the image container while maintaining the required proportions, thereby achieving the adjustment of the image position within the image container.

[0141] Specifically, the positions of the top and left edges of the image container are determined based on a two-dimensional coordinate system. The top edge of the image is moved above the top edge of the image container by multiplying the vertical offset of the target vertex of the top edge of the image container by the height of the image container. The left edge of the image is moved to the left of the left edge of the image container by multiplying the horizontal offset of the target vertex of the left edge of the image container by the width of the image container. Then, the image is moved to the right by the horizontal offset of the target vertex of its own width by the percentage value, and moved downward by the vertical offset of the target vertex of its own height by the percentage value. The width and height of the image are adjusted to the calculated width and height, and the image is rotated by the calculated new rotation angle to achieve the position adjustment of the image in the image container.

[0142] It should be noted that the final calculated percentage values ​​for the horizontal and vertical offsets of the target vertex, the image width, the image height, and the new rotation angle will be stored for subsequent image adjustments.

[0143] In this way, through the above steps, dynamic adjustment of the image is achieved, preserving the clarity and quality of the original image, reducing server storage costs and network transmission rates, and improving image loading performance.

[0144] The following will describe an exemplary application of the embodiments of this application in a real-world application scenario.

[0145] In related technologies, the method for adjusting the position of images within a document is through cropping. After a user uploads an image file, clicking the crop button above the image toolbar will bring up a square cropping box. See [link to relevant documentation]. Figure 8 , Figure 8 This is a diagram illustrating image cropping provided by related technologies. Users can adjust the final display position of the image by zooming in and out and dragging and panning the cropping frame.

[0146] During implementation, the applicant discovered the following problems with the relevant technology for image processing:

[0147] In related technologies, in most online collaborative document scenarios (i.e., shared documents mentioned above), image files (i.e., images mentioned above) need to be cropped to adjust the fill position. Each cropping generates a new image, and in order to restore the image, the address of the previous image needs to be retained. This results in the need to load a new image each time, which on the one hand reduces the quality of the original image, has poor real-time performance, and affects the overall user experience. On the other hand, it increases the additional server storage cost and network transmission volume.

[0148] Based on this, this application provides a method for adjusting the position of an image using browser CSS and Javascript technology. This technology operates only on the current image, without modifying the actual image file or regenerating the image, and has good cross-browser compatibility.

[0149] See Figure 9 , Figure 9 This is a schematic diagram of the fourth process of the image processing method provided in the embodiments of this application. The following uses a client-side implementation as an example, combined with... Figure 9 The steps shown illustrate an exemplary application of the embodiments of this application in the application scenario of online documents.

[0150] In step 901, the initial data of the image is obtained.

[0151] Here, the image container is set to a relative position, and the image is set to an absolute position, allowing the image to move relative to the image container. When the online document is opened, the browser running on the client constructs a Cartesian coordinate system based on the initial data of the image, with the top-left corner of the image container as the origin. Both the image and the image container are rectangles. The initial data of the image includes the percentage value corresponding to the horizontal axis offset of the top-left vertex of the image relative to the origin of the Cartesian coordinate system, the percentage value corresponding to the vertical axis offset of the top-left vertex of the image relative to the origin of the Cartesian coordinate system, the percentage value of the image width, the percentage value corresponding to the image height, and the rotation angle.

[0152] In step 902, the initial data is converted into specific values.

[0153] Here, since the browser generates specific values ​​when adjusting the image, while the saved image data is a percentage value, the percentage value needs to be converted in the initial state, and the specific value is used in subsequent adjustment calculations.

[0154] Specifically, the initial width of the image is obtained by multiplying the percentage value of the image width by the width of the image container; the initial height of the image is obtained by multiplying the percentage value of the image height by the height of the image container; the initial horizontal offset of the top-left vertex of the image is obtained by multiplying the percentage value of the horizontal offset of the top-left vertex of the image by the difference between the width of the container and the initial width of the image; and the initial vertical offset of the top-left vertex of the image is obtained by multiplying the percentage value of the vertical offset of the top-left vertex of the image by the difference between the height of the container and the initial height of the image.

[0155] In step 903, a user adjustment operation event is detected.

[0156] Here, when a user adjusts the position of an image, vertical and horizontal offsets are generated. Therefore, it is necessary to monitor the user's adjustment operation events, mainly by detecting mouse down and mouse move events. This will give us the horizontal offset of the mouse (the first offset mentioned above) and the vertical offset of the mouse (the second offset mentioned above). Alternatively, when the user adjusts the position of the image through screen touch, we can also detect the user's pressing and dragging operations on the image on the screen.

[0157] In step 904, a new specific value is calculated.

[0158] Here, image adjustment operations include moving, scaling, and rotating.

[0159] When the adjustment operation is a move, the initial horizontal offset of the top-left vertex of the image needs to be added to the horizontal offset of the mouse to obtain a new horizontal offset, and the initial vertical offset of the top-left vertex of the image needs to be added to the vertical offset of the mouse to obtain a new vertical offset.

[0160] When the adjustment operation is scaling, first determine the type of corner the user is dragging. Corner types include the top-left vertex, bottom-left vertex, top-right vertex, and bottom-right vertex. When dragging the top-left vertex, the initial horizontal offset of the top-left vertex needs to be added to the mouse's horizontal offset to obtain a new horizontal offset. The initial vertical offset of the top-left vertex also needs to be added to the mouse's vertical offset to obtain a new vertical offset. The image width is then subtracted from the mouse's horizontal offset to obtain the new image width. Based on the initial aspect ratio, the new image height is determined. Similarly, when dragging the bottom-left vertex, the initial horizontal offset of the top-left vertex needs to be added to the mouse's horizontal offset to obtain a new horizontal offset. The initial vertical offset of the top-left vertex is the new vertical offset. The image width... The image width is calculated by subtracting the mouse's horizontal offset from the image's height. The new image height is then determined based on the initial aspect ratio. Similarly, when dragging the top-right vertex, the initial horizontal offset of the top-left vertex becomes the new horizontal offset. The initial vertical offset of the top-left vertex is then added to the mouse's vertical offset to obtain the new vertical offset. The image width is then added to the mouse's horizontal offset to obtain the new image width. The new image height is then determined based on the initial aspect ratio. Likewise, when dragging the bottom-right vertex, the initial horizontal offset of the top-left vertex becomes the new horizontal offset. The initial vertical offset of the top-left vertex becomes the new vertical offset. The image width is then subtracted from the mouse's horizontal offset to obtain the new image width. The new image height is then determined based on the initial aspect ratio.

[0161] When the adjustment operation is rotation, the difference between the horizontal and vertical offset of the mouse and the center point of the image container on the horizontal and vertical axes is calculated. The corresponding radians are calculated using the difference, the radians are converted into angles, and the initial angle is subtracted from the rotation angle to obtain the new rotation angle.

[0162] In step 905, the specific value is converted into a percentage value.

[0163] Here, the new horizontal offset of the top-left corner vertex of the image is divided by the difference between the width of the image container and the new image width to obtain the percentage value corresponding to the new horizontal offset of the top-left corner vertex of the image. The new vertical offset of the top-left corner vertex of the image is divided by the difference between the height of the image container and the new image height to obtain the percentage value corresponding to the new vertical offset of the top-left corner vertex of the image. The new image width is divided by the width of the image container to obtain the percentage value corresponding to the new image width. The new image height is divided by the height of the image container to obtain the percentage value corresponding to the new image height.

[0164] In step 906, update the Cascading Style Sheet properties.

[0165] Here, the image element corresponding to the image can be found, the calculated percentage value can be passed to the Cascading Style Sheet property corresponding to the image element for updating, and the image container containing the image can be re-rendered so that the user can finally see the newly adjusted image style.

[0166] Thus, through the above steps, the fill position of an image can be calculated and displayed without modifying the actual image in the document or generating a new image file. This not only maintains the original clarity and quality of the image but also improves image loading speed by reducing server storage requirements and network traffic. Furthermore, it allows for dynamic adjustment of the image's display position based on user interaction and ensures good compatibility across different browsers, thereby enhancing the user experience.

[0167] The following description continues to illustrate the exemplary structure of the image processing apparatus 555 provided in the embodiments of the present invention as a software module. In some embodiments, such as... Figure 2 As shown, the software modules of the image processing device 555 may include: a display module 5551, an acquisition module 5552, an update module 5553, and a rendering module 5554.

[0168] Display module 5551 is used to display an image in an image container of a shared document, the image being in a first position relative to the image container.

[0169] The acquisition module 5552 is configured to acquire the position adjustment parameters indicated by the position adjustment operation in response to the position adjustment operation for the image.

[0170] The update module 5553 is used to update the first position based on the position adjustment parameters to obtain a second position of the image relative to the image container; and based on the second position, update the Cascading Style Sheet properties of the image container in the shared document.

[0171] The rendering module 5554 is used to render the image container in the shared document based on the updated Cascading Style Sheet properties of the image container, so as to adjust the position of the image in the image container.

[0172] In some embodiments, both the image and the image container are rectangular in shape. The display module 5551 is further configured to control the center of the image to coincide with the center of the image container; when the center of the image coincides with the center of the image container, adjust a first side of the image so that the first side coincides with the side of the image container; determine an adjustment ratio for the first side, and adjust a second side of the image based on the adjustment ratio; wherein the first side is different from the second side, and both the first side and the second side are the width or height of the image; based on the adjusted second side of the image, render the image container in the shared document to display the image in the image container.

[0173] In some embodiments, the display module 5551 is further configured to construct a two-dimensional coordinate system with the center point of the image container as the origin, and in the two-dimensional coordinate system, move the first edge of the image along a first direction to coincide with the horizontal axis of the two-dimensional coordinate system, and move the second edge of the image along a second direction to coincide with the vertical axis of the two-dimensional coordinate system; obtain the width and height of the image, and move the image along a third direction by half of the width, and move the image along a fourth direction by half of the height, so that the center of the image coincides with the center of the image container.

[0174] In some embodiments, the position adjustment parameters include a third position of the target vertex of the image relative to the image container. The update module 5553 is further configured to obtain a fourth position of the target vertex relative to the image container, wherein the fourth position is the position of the target vertex when the image is in a first position relative to the image container; and update the first position based on the third position and the fourth position to obtain a second position of the image relative to the image container.

[0175] In some embodiments, the update module 5553 is further configured to determine the position offset of the target vertex relative to the image container based on the third position and the fourth position; determine the width and height of the image based on the position offset; and update the first position based on the width and height of the image to obtain a second position of the image relative to the image container.

[0176] In some embodiments, the first position, the second position, the third position, and the fourth position are all coordinate positions in a two-dimensional coordinate system, which is a coordinate system constructed with the center of the image container; the update module 5553 is further configured to determine, based on the third position and the fourth position, a first offset of the target vertex on the horizontal axis of the two-dimensional coordinate system and a second offset of the target vertex on the vertical axis of the two-dimensional coordinate system; obtain the initial width and initial height of the image when the image is in the first position; and adjust the initial width and initial height of the image based on the first offset and the second offset to obtain the width and height of the image.

[0177] In some embodiments, the update module 5553 is further configured to obtain the rendering tree of the shared document and find the document object model node corresponding to the image container in the rendering tree; based on the second position, update the Cascading Style Sheet properties associated with the document object model node in the rendering tree.

[0178] In some embodiments, the shared document is used for collaborative editing by at least two clients. The image processing apparatus further includes a sending module, configured to send the updated Cascading Style Sheet (CSS) properties of the image container in the shared document to other clients of the shared document after updating the CSS properties of the image container, so that the other clients update the shared document displayed on the other clients based on the updated CSS properties of the image container.

[0179] In some embodiments, the image processing apparatus further includes: a receiving module, configured to, after displaying an image in an image container of a shared document, display adjustment controls for the image in response to a triggering operation for the image; display a mask over the image container in response to a triggering operation for the adjustment controls, the mask covering the image; and receive a position adjustment operation for the image based on the mask.

[0180] This application provides a computer program product comprising a computer program or computer-executable instructions stored in a computer-readable storage medium. The processor of an electronic device reads the computer-executable instructions from the computer-readable storage medium and executes the computer-executable instructions, causing the electronic device to perform the image processing method described in this application.

[0181] This application provides a computer-readable storage medium storing computer-executable instructions or a computer program. When the computer-executable instructions or the computer program are executed by a processor, the processor will execute the image processing method provided in this application. For example, ... Figure 3A , Figure 3B The methods shown are as follows.

[0182] In some embodiments, the computer-readable storage medium may be a memory such as RAM, ROM, flash memory, magnetic surface memory, optical disk, or CD-ROM; or it may be a variety of devices including one or any combination of the above-mentioned memories.

[0183] In some embodiments, computer-executable instructions may take the form of programs, software, software modules, scripts, or code, written in any form of programming language (including compiled or interpreted languages, or declarative or procedural languages), and may be deployed in any form, including as stand-alone programs or as modules, components, subroutines, or other units suitable for use in a computing environment.

[0184] As an example, computer-executable instructions may, but do not necessarily, correspond to files in a file system. They may be stored as part of a file that holds other programs or data, for example, in one or more scripts in a Hyper Text Markup Language (HTML) document, in a single file dedicated to the program in question, or in multiple co-located files (e.g., files that store one or more modules, subroutines, or code sections).

[0185] As an example, computer-executable instructions can be deployed to execute on a single electronic device, or on multiple electronic devices located at one location, or on multiple electronic devices distributed across multiple locations and interconnected via a communication network.

[0186] In summary, through the embodiments of this application, an image is displayed within an image container in a shared document, and an initial position of the image relative to the container is set. When the user performs a position adjustment operation, the corresponding position adjustment parameters are obtained, the initial position of the image is updated using the position adjustment parameters, the new position of the image is determined, and the CSS properties of the image container are updated according to the new position information. The image container is then re-rendered according to the updated CSS properties to achieve precise adjustment of the image position. This not only improves the efficiency of image processing and reduces storage requirements and network resource consumption, but also maintains image quality, speeds up page loading, and enhances the user experience.

[0187] The above description is merely an embodiment of this application and is not intended to limit the scope of protection of this application. Any modifications, equivalent substitutions, and improvements made within the spirit and scope of this application are included within the scope of protection of this application.

Claims

1. An image processing method, characterized in that, The method includes: An image is displayed in an image container of a shared document, the image being positioned relative to the image container in a first position; In response to a position adjustment operation on the image, obtain the position adjustment parameters indicated by the position adjustment operation; The first position is updated based on the position adjustment parameters to obtain the second position of the image relative to the image container; Based on the second position, update the Cascading Style Sheet properties of the image container in the shared document; Based on the updated Cascading Style Sheet properties of the image container, the image container in the shared document is rendered to adjust the position of the image in the image container.

2. The method according to claim 1, characterized in that, Both the image and the image container are rectangular in shape. Displaying the image within the image container of the shared document includes: The center of the image is aligned with the center of the image container; When the center of the image coincides with the center of the image container, adjust the first side of the image so that the first side coincides with the side of the image container; Determine the adjustment ratio for the first side, and adjust the second side of the image based on the adjustment ratio; Wherein, the first side is different from the second side, and both the first side and the second side are the width or height of the image; Based on the second side of the adjusted image, the image container in the shared document is rendered to display the image in the image container.

3. The method according to claim 2, characterized in that, The control of aligning the center of the image with the center of the image container includes: A two-dimensional coordinate system is constructed with the center point of the image container as the origin. In the two-dimensional coordinate system, the first edge of the image is moved along the first direction to coincide with the horizontal axis of the two-dimensional coordinate system, and the second edge of the image is moved along the second direction to coincide with the vertical axis of the two-dimensional coordinate system. Obtain the width and height of the image, and move the image by half the width along a third direction, and move the image by half the height along a fourth direction, so that the center of the image coincides with the center of the image container; Wherein, the first direction is opposite to the fourth direction, and the second direction is opposite to the third direction.

4. The method according to claim 1, characterized in that, The position adjustment parameters include the third position of the target vertex of the image relative to the image container. Updating the first position based on the position adjustment parameters to obtain the second position of the image relative to the image container includes: Obtain the fourth position of the target vertex relative to the image container, wherein the fourth position is the position of the target vertex when the image is in the first position relative to the image container; The first position is updated based on the third and fourth positions to obtain the second position of the image relative to the image container.

5. The method according to claim 4, characterized in that, The step of updating the first position based on the third and fourth positions to obtain the second position of the image relative to the image container includes: Based on the third and fourth positions, determine the position offset of the target vertex relative to the image container; Based on the position offset, the width and height of the image are determined, and the first position is updated based on the width and height of the image to obtain the second position of the image relative to the image container.

6. The method according to claim 5, characterized in that, The first position, the second position, the third position, and the fourth position are all coordinate positions in a two-dimensional coordinate system, which is a coordinate system constructed with the center of the image container. Determining the position offset of the target vertex relative to the image container based on the third and fourth positions includes: Based on the third position and the fourth position, determine the first offset of the target vertex on the horizontal axis of the two-dimensional coordinate system and the second offset of the target vertex on the vertical axis of the two-dimensional coordinate system. Determining the width and height of the image based on the position offset includes: Obtain the initial width and initial height of the image when it is in the first position; Based on the first offset and the second offset, the initial width and initial height of the image are adjusted to obtain the width and height of the image.

7. The method according to any one of claims 1 to 6, characterized in that, The step of updating the Cascading Style Sheet properties of the image container in the shared document based on the second position includes: Obtain the rendering tree of the shared document, and find the document object model node corresponding to the image container in the rendering tree; Based on the second position, update the Cascading Style Sheet properties associated with the Document Object Model node in the rendering tree.

8. The method according to any one of claims 1 to 6, characterized in that, The shared document is used for collaborative editing by at least two clients. After updating the Cascading Style Sheet properties of the image container in the shared document, the method further includes: The updated Cascading Style Sheet (CSS) properties of the image container are sent to other clients of the shared document, so that the other clients update the shared document displayed on the other clients based on the updated CSS properties of the image container.

9. The method according to any one of claims 1 to 6, characterized in that, After displaying the image in the image container of the shared document, the method further includes: In response to a trigger operation on the image, adjustment controls for the image are displayed; In response to a triggering operation on the adjustment control, a mask is displayed above the image container, the mask covering the image; Based on the mask layer, a position adjustment operation for the image is received.

10. An image processing apparatus, characterized in that, The device includes: A display module is used to display an image in an image container of a shared document, the image being positioned relative to the image container at a first position; The acquisition module is configured to acquire the position adjustment parameters indicated by the position adjustment operation in response to the position adjustment operation of the image; An update module is used to update the first position based on the position adjustment parameters to obtain a second position of the image relative to the image container; and based on the second position, update the Cascading Style Sheet properties of the image container in the shared document. The rendering module is used to render the image container in the shared document based on the updated Cascading Style Sheet properties of the image container, so as to adjust the position of the image in the image container.

11. The apparatus according to claim 10, characterized in that, Both the image and the image container are rectangular in shape. The display module is further configured to control the center of the image to coincide with the center of the image container; when the center of the image coincides with the center of the image container, adjust a first side of the image so that the first side coincides with the side of the image container; determine an adjustment ratio for the first side, and adjust a second side of the image based on the adjustment ratio; wherein the first side is different from the second side, and both the first side and the second side are the width or height of the image; and render the image container in the shared document based on the adjusted second side of the image to display the image in the image container.

12. The apparatus according to claim 10, characterized in that, The position adjustment parameters include the third position of the target vertex of the image relative to the image container. The update module is further configured to obtain a fourth position of the target vertex relative to the image container, wherein the fourth position is the position of the target vertex when the image is in a first position relative to the image container; and update the first position based on the third position and the fourth position to obtain a second position of the image relative to the image container.

13. An electronic device, characterized in that, The electronic device includes: Memory is used to store executable instructions or computer programs. A processor, when executing computer-executable instructions or computer programs stored in the memory, implements the image processing method according to any one of claims 1 to 9.

14. A computer-readable storage medium storing computer-executable instructions or a computer program, characterized in that, When the computer-executable instructions or computer program are executed by a processor, the image processing method according to any one of claims 1 to 9 is implemented.

15. A computer program product comprising computer-executable instructions or a computer program, characterized in that, When the computer-executable instructions or computer program are executed by a processor, the image processing method according to any one of claims 1 to 9 is implemented.

Images