Image frame adding method and device, equipment and medium

Abstract

The invention discloses an image frame adding method and device, equipment and a medium, and the method comprises the steps: responding to a frame adding request, and loading a frame adding assembly; responding to the input attribute data through the frame adding component, and generating a frame style; associating a tag attribute corresponding to an image tag in the target page to the frame style and the attribute data; and rendering the to-be-rendered image associated with the image tag according to the tag attribute, generating an image with a frame, and displaying the image on the target page. Therefore, binding association of the frame style and the label attribute of the image is realized by introducing the frame adding component, diversified flexible adjustment can be dynamically performed on the image frame in response to externally input attribute data, code redundancy is reduced through component packaging, and code reusability and maintainability are improved.

Description

Technical Field

[0001] The present invention relates to the technical field of picture editing, and in particular to a method, device, equipment and medium for adding an image border. Background Art

[0002] In today's digital age, images play a vital role in various application scenarios. Whether it is web design, mobile application development, advertising, artistic creation, etc., beautiful pictures can often attract users' attention and improve user experience. However, in many cases, simple picture display may not meet specific design requirements. In order to make the picture more prominent and attractive, it is often necessary to decorate and process the picture.

[0003] Among them, adding borders to images by processing the visual style of interface elements is a common method. In existing solutions, it is usually done directly in the HTML or The image border style is set on the label through CSS.

[0004] When it is necessary to add similar or identical border styles to images in multiple places, users are required to repeatedly write the same CSS code. At the same time, since the style code may be distributed in multiple files, it may be affected by other CSS rules (such as CSS cascading and inheritance). In the process of setting the style directly through CSS, additional JavaScript code is required to control the style changes, resulting in reduced code reusability and inability to flexibly implement diversified addition of image borders. Summary of the invention

[0005] The present invention provides a method, device, equipment and medium for adding image borders, which solves the technical problems that the existing image border adding solutions require repeated code writing, are easily affected by CSS rules and rely on additional JavaScript code for style change control, resulting in reduced code reusability and maintainability, and cannot flexibly realize the diversified addition of image borders.

[0006] A first aspect of the present invention provides a method for adding an image border, comprising:

[0007] Respond to the border adding request and load the border adding component;

[0008] The border adding component responds to the input attribute data and generates the border style;

[0009] Associating the tag attribute corresponding to the image tag in the target page with the border style and the attribute data;

[0010] The image to be rendered associated with the image tag is rendered according to the tag attribute to generate an image with a border and display it on the target page.

[0011] Optionally, the generating a border style by adding a border component in response to the inputted attribute data includes:

[0012] Receive input attribute data through the border adding component; the attribute data includes border width, border type, border radius and border color;

[0013] Creating a first border style that matches the border width by using the border adding component;

[0014] By using the border adding component, according to the border type, a corresponding frame line is added outside the first border style to obtain a second border style;

[0015] The border adding component is used to adjust the border rounding of the second border style according to the border rounding to obtain a third border style;

[0016] The border color of the third border style is adjusted according to the border color by the border adding component to generate a border style.

[0017] Optionally, the border color includes a starting color and an ending color; and the step of adjusting the border color of the third border style according to the border color by the border adding component to generate a border style includes:

[0018] Add components through the border to determine whether the starting color and ending color are empty values;

[0019] If both the starting color and the ending color are not null values, the border color of the third border style is adjusted according to the starting color and the ending color to generate a border style with a color gradient;

[0020] If the starting color or the ending color is a null value, the starting color or the ending color is set as the border color of the third border style to generate a single-color border style.

[0021] Optionally, it also includes:

[0022] If the border radius is a null value, the border radius of the second border style is set to a preset radius value to obtain a third border style.

[0023] Optionally, the attribute data further includes an image address, and the tag attribute includes a tag address and a tag style; and associating the tag attribute corresponding to the image tag in the target page with the border style and the attribute data includes:

[0024] Associating the tag address corresponding to the image tag in the target page with the image address to obtain the image to be rendered from the image address;

[0025] The label style corresponding to the image label is associated with the border style to obtain the border style from the border style.

[0026] Optionally, rendering the to-be-rendered image associated with the image tag according to the tag attribute, generating an image with a border and displaying it on the target page includes:

[0027] Determine the corresponding border style according to the tag attributes;

[0028] Draw the border style on the edge of the image to be rendered associated with the image tag to generate an image with a border;

[0029] The framed image is displayed on the target page.

[0030] Optionally, the method further comprises:

[0031] When receiving the attribute update data, generating a new border style according to the attribute update data;

[0032] Jump to the step of rendering the image to be rendered associated with the image tag according to the tag attribute, generating an image with a border and displaying it on the target page.

[0033] The second aspect of the present invention further provides a device for adding an image border, comprising:

[0034] The component loading module is used to respond to the border adding request and load the border adding component;

[0035] The border style generation module is used to generate border styles by responding to the input attribute data through the border adding component;

[0036] A tag associating module, used to associate the tag attribute corresponding to the image tag in the target page with the border style and the attribute data;

[0037] The image rendering module is used to render the image to be rendered associated with the image tag according to the tag attribute, generate an image with a border and display it on the target page.

[0038] The third aspect of the present invention also provides an electronic device, including a memory and a processor, wherein the memory stores a computer program, and when the computer program is executed by the processor, the processor executes the steps of the image border adding method as described in any one of the first aspect of the present invention.

[0039] The fourth aspect of the present invention further provides a computer-readable storage medium having a computer program stored thereon, and when the computer program is executed, the method for adding an image border as described in any one of the first aspect of the present invention is implemented.

[0040] It can be seen from the above technical solutions that the present invention has the following advantages:

[0041] The present invention loads a border adding component by responding to a border adding request; generates a border style by responding to input attribute data through the border adding component; associates the label attribute corresponding to the image label in the target page with the border style and attribute data; renders the image to be rendered associated with the image label according to the label attribute, generates an image with a border and displays it on the target page. Thus, by introducing the border adding component, the binding association between the border style and the label attribute of the image is realized, and the image border can be dynamically and flexibly adjusted in a diversified manner in response to the attribute data input externally, and at the same time, code redundancy is reduced through component encapsulation, thereby improving code reusability and maintainability. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative labor.

[0043] Figure 1 A flowchart of a method for adding an image border provided by an embodiment of the present invention;

[0044] Figure 2 A detailed flowchart of some steps of a method for adding an image border provided by an embodiment of the present invention;

[0045] Figure 3 A schematic diagram of a first border style provided by an embodiment of the present invention;

[0046] Figure 4 A schematic diagram of a second border style in dotted line form provided by an embodiment of the present invention;

[0047] Figure 5 A schematic diagram of a second border style in dotted line form provided in an embodiment of the present invention;

[0048] Figure 6 A schematic diagram of a third border style provided by an embodiment of the present invention;

[0049] Figure 7 A schematic diagram of a color gradient border style provided in an embodiment of the present invention;

[0050] Figure 8 A structural block diagram of a device for adding a border to an image provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0051] The embodiments of the present invention provide a method, device, equipment and medium for adding image borders, which are used to solve the technical problems that the existing image border adding solutions require repeated code writing, are easily affected by CSS rules and rely on additional JavaScript code for style change control, resulting in reduced code reusability and maintainability, and cannot flexibly realize the diversified addition of image borders.

[0052] In order to make the purpose, features and advantages of the present invention more obvious and easy to understand, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the embodiments described below are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0053] See also Figure 1 , Figure 1 A flowchart of a method for adding an image border provided by an embodiment of the present invention.

[0054] The present invention provides a method for adding an image border, comprising:

[0055] Step 101, responding to a border adding request, loading a border adding component;

[0056] The border adding request refers to the request information for calling the border adding component to add a border to an image, and the response can be received through the browser.

[0057] The border adding component refers to a Vue component that encapsulates the logic and style of adding image borders. It allows users to achieve the expected visual effect by introducing this component and passing attribute data props in any scenario where an image border is required, thereby reducing code redundancy and improving code reusability and maintainability.

[0058] In this embodiment, the method is applied to a browser, and by loading and executing the Vue front-end framework in the browser, it is indicated that the front-end page needs to be constructed at this time. When the browser receives a border adding request, the border adding component is loaded and initialized in Vue. Specifically, the name attribute name of the border adding component can be used for retrieval, so that the browser can quickly locate the border adding component for loading.

[0059] It should be noted that Vue is a progressive JavaScript framework for building user interfaces.

[0060] Step 102, generating a border style by adding a border component in response to the input property data;

[0061] Attribute data refers to data props used to specify the image address src and the characteristics of the image border, including but not limited to border width width, border type type, border radius radius and border color, where the border color may include the starting color startcolor and the ending color endcolor.

[0062] The border style is used to add border decoration to an element, enhance the visual effect and distinguish different elements. In this embodiment, the element is an image.

[0063] After the border adding component is loaded, if the attribute data transmitted from the outside is received, it indicates that the external user, parent component or template needs to add a border to a certain image. The border adding component receives the transmitted attribute data and stores it on the component instance.

[0064] At the same time, the border adding component parses internal functional attributes such as computed attributes, calculates according to the attribute data through the computed attributes, and generates the corresponding border style.

[0065] Step 103, associating the tag attributes corresponding to the image tag in the target page with the border style and attribute data;

[0066] Image tags refer to the tags to which any image in the target page belongs. Tag. Tag attributes may include but are not limited to src attribute and style attribute.

[0067] While calculating the border style, the border adding component parses the internal function attributes such as <template>Part, associate the tag attributes corresponding to the image tag in the target page with the border style and attribute data, so that the subsequent browser can render the image according to the tag attributes of the image tag.

[0068] Step 104 , rendering the image to be rendered associated with the image tag according to the tag attribute, generating an image with a border and displaying it on the target page.

[0069] In this embodiment, after completing the construction of the border style and associating it with the tag attributes, the browser can now obtain the image to be rendered associated with the image tag from the associated image address according to the tag attributes, and then add the border style to the image to be rendered according to the tag attributes, thereby generating a bordered image, and drawing the bordered image on the target page for display.

[0070] In the embodiment of the present invention, by responding to a border adding request, a border adding component is loaded; the border adding component responds to the input attribute data to generate a border style; the tag attribute corresponding to the image tag in the target page is associated with the border style and attribute data; the image to be rendered associated with the image tag is rendered according to the tag attribute, and an image with a border is generated and displayed on the target page. Thus, by introducing the border adding component, the binding association between the border style and the tag attribute of the image is realized, and the image border can be dynamically and flexibly adjusted in a diversified manner in response to the external input attribute data, and at the same time, the code redundancy is reduced through component encapsulation, and the code reusability and maintainability are improved.

[0071] See also Figure 2 , Figure 2 A flowchart of the steps of a method for adding a border to an image in an embodiment of the present invention is shown to refine the process of generating a border style.

[0072] An embodiment of the present invention provides a method for adding an image border, comprising the following steps:

[0073] Step 201, responding to a border adding request, loading a border adding component;

[0074] In this embodiment, the specific implementation process of step 201 is similar to step 101 and will not be repeated here.

[0075] Step 202, receiving input attribute data through the border adding component; the attribute data includes border width, border type, border radius and border color;

[0076] In this embodiment, the source of the attribute data may be a parent component of the border adding component, a related template, or input from an external user.

[0077] Border width refers to the width attribute of the border style, which is used to control the width of the image element. It can be set in pixels, percentages, or relative units. For example, the width of the image element can be set to 200 pixels or 50% of the width of its parent element.

[0078] The border type type refers to the type of line segments that make up the border style, including but not limited to dotted lines, solid lines, or dashed lines.

[0079] Border radius refers to the border radius attribute, which is used to set the border radius of an element. It can make the interface look softer and rounder, reduce the sharpness, thereby improving the visual effect and user experience. The radius of each corner can be set by pixel value or percentage.

[0080] Border color is used to define the color of the border style. It can be a single color or a combination of at least two colors, depending on the number of values ​​corresponding to the border color.

[0081] Step 203, creating a first border style that meets the border width by using a border adding component;

[0082] In this embodiment, after receiving the attribute data, the border adding component uses a preset line segment to create a first border style that meets the border width. Figure 3 shown.

[0083] Step 204, adding corresponding frame lines outside the first border style according to the border type through the border adding component to obtain a second border style;

[0084] At the same time, the border adding component selects the target border line from multiple line segment types according to the border type, and adds the border line outside the first border style. For example, if a dotted line is selected, a dotted line is added outside the first border style. Figure 4 If you choose a dotted line, add a dotted line outside the first border style as shown below. Figure 5 shown.

[0085] In addition, if the border type is empty or if you choose not to add a border line, the first border style will not be operated on and will be directly used as the second border style.

[0086] Step 205, adjusting the border radius of the second border style according to the border radius by using the border adding component to obtain a third border style;

[0087] After obtaining the second border style, the border adding component further adjusts the border rounding of the second border style according to the specific value of the border rounding to generate the following: Figure 6 The third border style shown makes the four corners of the border more rounded, improving the visual effect.

[0088] In another example of the present invention, the following steps are also included:

[0089] If the border radius is a null value, the border radius of the second border style is set to a preset radius value to obtain a third border style.

[0090] The preset corner fillet value may be an original value or a corner fillet value selected by a user, and this embodiment does not impose any limitation on this.

[0091] Step 206, adjusting the border color of the third border style according to the border color by using the border adding component to generate a border style;

[0092] In one example of the present invention, the border color includes a start color and an end color; step 206 may include the following sub-steps:

[0093] Add components through the border to determine whether the starting color and ending color are empty values;

[0094] If both the start color and the end color are not null values, the border color of the third border style is adjusted according to the start color and the end color to generate a border style with color gradient;

[0095] If the start color or end color is a null value, the start color or end color is set to the border color of the third border style to generate a single-color border style.

[0096] In this embodiment, after generating the third border style, the border adding component determines whether the starting color startcolor and the ending color endcolor in the border color are null values. If both are not null values, it indicates that a color gradient border style needs to be generated at this time. At this time, the starting color can be used as the starting color of the third border style gradient, and the ending color can be used as the ending color of the third border style gradient, to create an effect of smooth transition from one color to another color. Figure 7 shown.

[0097] If there is a null value in either the start color or the end color, a non-null start color or end color is selected as the border color of the third border style to generate a single-color border style.

[0098] In addition, in order to further improve the border diversity of border styles, the border color can include an intermediate transformation color in addition to the starting color and the ending color. The intermediate transformation color can include multiple values. The border style is divided into multiple frame lines according to the pixel value, and a gradient transition is performed in each frame line according to the set color.

[0099] In a specific implementation, the property data props of the above border style can be as follows:

[0100] startcolor: "#8f41e9"

[0101] endcolor: "#578aef"

[0102] type: "dashed"

[0103] width: "4px"

[0104] radius: "5px"

[0105] src: require("@ / assets / images / 110.png")

[0106] The border style can be generated by adding the computed attribute headerStyle in the border component. The code analysis can be as follows:

[0107] Step 207, associating the tag attributes corresponding to the image tag in the target page with the border style and attribute data;

[0108] In an example of the present invention, the attribute data further includes an image address, and the tag attributes include a tag address and a tag style; step 207 may include the following sub-steps:

[0109] Associating the tag address corresponding to the image tag in the target page with the image address to obtain the image to be rendered from the image address;

[0110] Associate the label style corresponding to the image label with the border style to obtain the border style from the border style.

[0111] The image tag is an image container set at a specific position in the target page, and is used to display the corresponding image in the target page.

[0112] In this embodiment, the attribute data also includes the image address src, and the tag attributes include the tag address and the tag style. The corresponding tag address is associated with the image address src, so that the browser can directly obtain the image to be rendered from the image address, and it is convenient to make subsequent changes to the image to be rendered.

[0113] At the same time, the tag style style corresponding to the image tag can be associated with the border style headerStyle, so that the browser can directly call the tag style to render the image to be rendered during the subsequent rendering process, thereby directly applying the border style to the image to be rendered.

[0114] Step 208 , rendering the image to be rendered associated with the image tag according to the tag attribute, generating an image with a border and displaying it on the target page.

[0115] In one example of the present invention, step 208 may include the following sub-steps:

[0116] Determine the corresponding border style according to the tag attributes;

[0117] Draw a border style on the edge of the image to be rendered associated with the image tag to generate an image with a border;

[0118] Displays a bordered image on the target page.

[0119] In this embodiment, after the image tag is associated with the border style and attribute data, the corresponding border style is determined according to the tag style in the tag attribute, and the image to be rendered is obtained according to the tag address in the image tag, and the border style is drawn on the edge of the image to be rendered to generate a bordered image such as Figure 7 As shown, the bordered image is displayed on the target page for the user to view.

[0120] In another example of the present invention, the method may further include the following steps S11-S12:

[0121] S11, when receiving the attribute update data, generating a new border style according to the attribute update data;

[0122] S12, jump to the step of rendering the image to be rendered associated with the image tag according to the tag attribute, generating an image with a border and displaying it on the target page.

[0123] In a specific implementation, after the image tag is associated with the border style and the attribute data, in order to further improve the flexibility of the bordered image rendering and facilitate users to change different styles, the browser can monitor in real time whether the attribute update data is received. If the attribute update data is received, a new border style is generated according to the attribute update data. The specific process can be seen in steps 202-206, and then jump to step 208 to render and display the bordered image.

[0124] It should be noted that the specific content items of the attribute update data can be the same as the attribute data, but the specific content can be different, so that the border style of the bordered image can be adjusted at any time. This parameterized configuration method not only improves the flexibility of the picture border effect, reduces the errors caused by style modifications, but also makes the component easier to maintain and expand.

[0125] In addition, in the specific implementation, the image border can also be adjusted in the following ways:

[0126] 1) If the style changes of the image and border are not very dynamic, or can be managed by CSS classes, you can define one or more CSS classes and dynamically add or remove these classes to the image element through JavaScript. This method does not require Vue components, but may require more DOM operations and possible CSS files or <style>标签中的样式定义。

[0127] 2）引入第三方库： 在Vue生态系统中，有许多UI库（如Vuetify、Quasar、ElementUI等）提供了丰富的组件和样式选项，其中可能包括能够处理图片边框的组件。缺点是引入第三方库意味着项目将依赖于外部代码。这增加了项目的复杂度，因为开发者需要管理这些外部依赖的版本和更新。另外第三方库可能包含大量的代码和功能，这些可能并不是项目所必需的，这可能导致项目的加载时间增加。

[0128] 在本发明实施例中，通过将图片边框实现的功能封装成一个Vue组件，使得图片边框的效果可以作为一个独立的、可复用的单元存在。用户可在项目的任何位置引入实现图片边框的效果代码。同时通过图片边框样式封装在组件内部，并通过计算属性动态生成图片边框样式，简化了样式管理的工作。用户无需在全局样式表中编写大量的图片边框实现规则，也无需担心样式冲突或冗余的问题。

[0129] 请参阅图8，图8示出了本发明实施例中的一种图像边框添加装置的结构框图。

[0130] 本发明实施例提供了一种图像边框添加装置，包括：

[0131] 组件加载模块801，用于响应边框添加请求，加载边框添加组件；

[0132] 边框样式生成模块802，用于通过边框添加组件响应输入的属性数据，生成边框样式；

[0133] 标签关联模块803，用于将目标页面内图像标签对应的标签属性关联至边框样式和属性数据；

[0134] 图像渲染模块804，用于根据标签属性对图像标签关联的待渲染图像进行渲染，生成带边框图像并在目标页面显示。

[0135] 可选地，边框样式生成模块802包括：

[0136] 数据接收子模块，用于通过边框添加组件接收输入的属性数据；属性数据包括边框宽度、边框类型、边框圆角和边框颜色；

[0137] 边框创建子模块，用于通过边框添加组件创建符合边框宽度的第一边框样式；

[0138] 框线调整子模块，用于通过边框添加组件按照边框类型，在第一边框样式外新增对应的框线，得到第二边框样式；

[0139] 圆角调整子模块，用于通过边框添加组件按照边框圆角对第二边框样式的边框圆角进行调整，得到第三边框样式；

[0140] 边框颜色调整子模块，用于通过边框添加组件按照边框颜色对第三边框样式的边框颜色进行调整，生成边框样式。

[0141] 可选地，边框颜色包括起始颜色和结束颜色；边框颜色调整子模块具体用于：

[0142] 通过边框添加组件分别判断起始颜色和结束颜色是否为空值；

[0143] 若起始颜色和结束颜色均不为空值，则按照起始颜色和结束颜色对第三边框样式的边框颜色进行调整，生成颜色渐变的边框样式；

[0144] 若起始颜色或结束颜色为空值，则将起始颜色或结束颜色设置为第三边框样式的边框颜色，生成单一颜色的边框样式。

[0145] 可选地，圆角调整子模块具体还用于：

[0146] 若边框圆角为空值，则将第二边框样式的边框圆角设置为预设圆角值，得到第三边框样式。

[0147] 可选地，属性数据还包括图像地址，标签属性包括标签地址和标签样式；标签关联模块803具体用于：

[0148] 将目标页面内图像标签对应的标签地址关联至图像地址，以从图像地址获取待渲染图像；

[0149] 将图像标签对应的标签样式关联至边框样式，以从边框样式获取到边框样式。

[0150] 可选地，图像渲染模块804具体用于：

[0151] 按照标签属性确定对应的边框样式；

[0152] 在图像标签关联的待渲染图像的边缘绘制边框样式，生成带边框图像；

[0153] 在目标页面显示带边框图像。

[0154] 可选地，装置还包括：

[0155] 边框样式更新模块，用于当接收到属性更新数据时，按照属性更新数据生成新的边框样式；

[0156] 循环模块，用于跳转执行根据标签属性对图像标签关联的待渲染图像进行渲染，生成带边框图像并在目标页面显示的步骤。

[0157] 本发明实施例还提供了一种电子设备，包括存储器及处理器，所述存储器中储存有计算机程序，所述计算机程序被所述处理器执行时，使得所述处理器执行如本发明任一实施例所述的图像边框添加方法的步骤。

[0158] 本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被执行时实现如本发明任一实施例所述的图像边框添加方法。

[0159] 所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的装置、模块和子模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

[0160] 在本发明所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个模块或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或模块的间接耦合或通信连接，可以是电性，机械或其它的形式。

[0161] 所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理模块，即可以位于一个地方，或者也可以分布到多个网络模块上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。

[0162] 另外，在本发明各个实施例中的各功能模块可以集成在一个处理模块中，也可以是各个模块单独物理存在，也可以两个或两个以上模块集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。

[0163] 所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台电子设备（可以是个人计算机，服务器，或者网络设备等）执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器（ROM，Read-OnlyMemory）、随机存取存储器（RAM，Random Access Memory）、磁碟或者光盘等各种可以存储程序代码的介质。

[0164] 以上所述，以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。< / style> < / template>

Claims

1. A method for adding an image border, characterized in that: include: Respond to the border adding request and load the border adding component; The border adding component responds to the input attribute data and generates the border style; Associating the tag attribute corresponding to the image tag in the target page with the border style and the attribute data; The image to be rendered associated with the image tag is rendered according to the tag attribute to generate an image with a border and display it on the target page.

2. The method according to claim 1, characterized in that The border adding component responds to the input property data to generate a border style, including: Receive input attribute data through the border adding component; the attribute data includes border width, border type, border radius and border color; Creating a first border style that matches the border width by using the border adding component; By using the border adding component, according to the border type, a corresponding frame line is added outside the first border style to obtain a second border style; The border adding component is used to adjust the border rounding of the second border style according to the border rounding to obtain a third border style; The border color of the third border style is adjusted according to the border color by the border adding component to generate a border style.

3. The method according to claim 2, characterized in that The border color includes a starting color and an ending color; the border color of the third border style is adjusted according to the border color by the border adding component to generate a border style, including: Add components through the border to determine whether the starting color and ending color are empty values; If both the starting color and the ending color are not null values, the border color of the third border style is adjusted according to the starting color and the ending color to generate a border style with a color gradient; If the starting color or the ending color is a null value, the starting color or the ending color is set as the border color of the third border style to generate a single-color border style.

4. The method according to claim 2, characterized in that: Also includes: If the border radius is a null value, the border radius of the second border style is set to a preset radius value to obtain a third border style.

5. The method according to claim 1, characterized in that The attribute data also includes an image address, and the tag attribute includes a tag address and a tag style; and associating the tag attribute corresponding to the image tag in the target page with the border style and the attribute data includes: Associating the tag address corresponding to the image tag in the target page with the image address to obtain the image to be rendered from the image address; The label style corresponding to the image label is associated with the border style to obtain the border style from the border style.

6. The method according to claim 1, characterized in that The step of rendering the image to be rendered associated with the image tag according to the tag attribute, generating an image with a border and displaying it on the target page includes: Determine the corresponding border style according to the tag attributes; Draw the border style on the edge of the image to be rendered associated with the image tag to generate an image with a border; The framed image is displayed on the target page.

7. The method according to any one of claims 1 to 6, characterized in that: The method further comprises: When receiving the attribute update data, generating a new border style according to the attribute update data; Jump to the step of rendering the image to be rendered associated with the image tag according to the tag attribute, generating an image with a border and displaying it on the target page.

8. A device for adding an image border, characterized in that: include: The component loading module is used to respond to the border adding request and load the border adding component; The border style generation module is used to generate border styles by responding to the input attribute data through the border adding component; A tag associating module, used to associate the tag attribute corresponding to the image tag in the target page with the border style and the attribute data; The image rendering module is used to render the image to be rendered associated with the image tag according to the tag attribute, generate an image with a border and display it on the target page.

9. An electronic device, characterized in that: The method comprises a memory and a processor, wherein a computer program is stored in the memory, and when the computer program is executed by the processor, the processor executes the steps of the method for adding an image border as described in any one of claims 1 to 7.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed, the method for adding an image border as described in any one of claims 1 to 7 is implemented.

Images