Realization method of text field component based on Base64 coding
By designing a text domain component that supports Base64 encoding, the problem of lack of this function in the prior art is solved, and the need to efficiently process Base64 format data in cloud computing and web development is realized, which improves development efficiency and has flexibility and scalability.
Patent Information
- Application Number
- CN202510267058.0
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-03-07
- Publication Date
- 2025-06-10
AI Technical Summary
The lack of text domain components based on Base64 encoding in the prior art cannot meet the requirements of custom data injection and image generation in Base64 format in cloud computing and web development.
Design a text domain component based on Base64 encoding, providing text mode and picture mode, generating text data in Base64 encoding format through interface operations, supporting Base64 encoding and decoding switching, and performing Base64 format checksum text content size verification.
Reduces duplicate code development and improves application development efficiency. It is suitable for cloud computing and other applications containing Base64 encoding. It is flexible in design and scalable.
Smart Images
Figure CN120122940A_ABST
Abstract
Description
Technical Field
[0001] The present invention discloses an implementation method of a text field component based on Base64 encoding, which relates to the fields of cloud computing and web applications. Background Art
[0002] In cloud computing, to meet the needs of users to initialize cloud servers through scripts, when creating a cloud server, user-defined scripts (Windows, Linux) are injected into the cloud server through the interfaces provided by ECS to complete the initialization of the cloud server environment. In products such as cloud servers, cloud physical hosts, and elastic scaling, the injection of custom data in Base64 format is involved. In web development, especially in scenarios related to text field components, Base64 encoding also plays an important role. However, there is currently no text field component with relevant Base64 encoding that can be used. Summary of the Invention
[0003] Aiming at the problems of the prior art, the present invention provides an implementation method of a text field component based on Base64 encoding, which is applicable to the injection of custom script data for system pre-installed scripts, and can also be used to generate text data in Base64 encoding format for pictures. Using this component can reduce the development of duplicate code, be convenient for transplantation and use, and can effectively improve the efficiency of application development.
[0004] The specific solution proposed by the present invention is:
[0005] The present invention provides an implementation method of a text field component based on Base64 encoding, creates a text field component based on Base64 encoding, and the text field component is a front-end component, which generates text data in Base64 encoding format through interface operations.
[0006] The text field component includes two modes, namely a text mode and a picture mode.
[0007] In the text mode, the text field component includes a radio box for displaying the content after Base64 encoding and a component extended from a text field control. In the text mode, when text is input, text data in Base64 encoding format is generated: set the isbase64 attribute to support the switching between Base64 encoding and decoding, switch to the radio box, trigger the encoding and decoding operations of the data, and perform Base64 format verification. At the same time, set the size attribute to perform verification on the size of the text content.
[0008] The text field component in picture mode includes an upload button and a component that extends the text field control. In picture mode, it generates a Base64 - formatted string from the selected picture: sets the picture format type attribute and the picture size limit size attribute, selects a picture to be converted to Base64 format through the upload button, creates a FileReader object, reads the picture file through the readAsDataURL() method of the FileReader object, sets the read - completed event onload, obtains the Base64 - formatted string in the onload callback function, and validates the picture size.
[0009] Further, in text mode, the method for implementing a text field component based on Base64 encoding for triggering the encoding and decoding operations of data includes:
[0010] Encoding process: Convert the text data from utf - 16 to utf - 8 to obtain the result contentutf8, and perform Base64 encoding on contentutf8 to obtain the encoded data contentbase64.
[0011] Decoding process: For the encoded data contentbase64, first perform Base64 decoding to obtain contentutf8, and then convert contentutf8 from utf - 8 to utf - 16 to obtain the text data.
[0012] Select the encoding - switching radio box to execute the data encoding process, and the page displays the text content after Base64 encoding. If the radio box is not selected, the page displays the decoded text content.
[0013] Further, the method for implementing a text field component based on Base64 encoding for performing Base64 format verification includes:
[0014] Use the methods btoa() and atob() provided by JavaScript to verify whether the text meets the Base64 format requirements. The verification formula is: btoa(atob(value)) == value, where value is the text content, atob() is the Base64 encoding function, and btoa() is the Base64 decoding function. First, perform the encoding operation on the text content, then perform the decoding operation on the encoded content to obtain the result newValue, and finally determine whether the values of newValue and value are the same. If they are the same, it indicates that the text content meets the Base64 format; if they are different, it means that the text does not conform to the base64 encoding rules and an error handling is required.
[0015] Further, the implementation method of a text field component based on Base64 encoding performs a check on the size of the text content, including:
[0016] Obtain the number of bytes of the encoded text, compare the number of bytes with the size. If the number of bytes is less than or equal to the size, it indicates that the text content meets the size set by the component. If the number of bytes is greater than the size, it indicates that the text content exceeds the size set by the component, and an error handling is required.
[0017] Further, the implementation method of a text field component based on Base64 encoding performs a check on the size of the picture, including: After selecting a picture, obtain the size fileSize of the uploaded picture, compare fileSize with the size set by the size attribute, and perform error handling if the size limit is not met.
[0018] The present invention also provides an implementation device of a text field component based on Base64 encoding, including a creation module and a text field component.
[0019] The creation module creates a text field component based on Base64 encoding. The text field component is a front-end component that generates text data in Base64 encoding format through interface operations.
[0020] The text field component includes two modes, namely, a text mode and a picture mode.
[0021] In the text mode, the text field component includes a radio box for displaying the content after Base64 encoding and a component extended from the text field control. In the text mode, when text is input, text data in Base64 encoding format is generated: set the isbase64 attribute to support the switching between Base64 encoding and decoding. Switch to the radio box to trigger the encoding and decoding operations of the data, and perform Base64 format verification. At the same time, set the size attribute to perform a check on the size of the text content.
[0022] In the picture mode, the text field component includes an upload button and a component extended from the text field control. In the picture mode, the selected picture is generated into a Base64 format string: set the picture format type attribute and the picture size limit size attribute. Select a picture that needs to be converted to Base64 format through the upload button, create a FileReader object, perform a read operation on the picture file through the readAsDataURL() method of the FileReader object, set the read completion event onload, obtain the Base64 format string in the onload callback function, and perform a check on the picture size.
[0023] Further, in text mode, the implementation device of a text field component based on Base64 encoding triggers the encoding and decoding operations of data, including:
[0024] Encoding process: Convert the text data from utf-16 to utf-8 to obtain the result contentutf8, and perform Base64 encoding on contentutf8 to obtain the encoded data contentbase64.
[0025] Decoding process: For the encoded data contentbase64, first perform Base64 decoding to obtain contentutf8, and then convert contentutf8 from utf-8 to utf-16 to obtain the text data.
[0026] Select the encoding switch radio box to execute the data encoding process, and the page displays the text content after Base64 encoding. If the radio box is not selected, the page displays the decoded text content.
[0027] Further, the text field component of the implementation device of a text field component based on Base64 encoding performs Base64 format verification, including:
[0028] Use the methods btoa() and atob() provided by JavaScript to verify whether the text meets the Base64 format requirements. The verification formula is: btoa(atob(value)) == value, where value is the text content, atob() is the Base64 encoding function, and btoa() is the Base64 decoding function. First, perform the encoding operation on the text content, then perform the decoding operation on the encoded content to obtain the result newValue, and finally determine whether the values of newValue and value are the same. If they are the same, it indicates that the text content meets the Base64 format; if they are different, it means that the text does not conform to the Base64 encoding rules and needs to report an error for processing.
[0029] Further, the text field component of the implementation device of a text field component based on Base64 encoding performs verification of the text content size, including:
[0030] Obtain the number of bytes of the encoded text, compare the number of bytes with the size. If the number of bytes is less than or equal to the size, it indicates that the text content meets the size set by the component. If the number of bytes is greater than the size, it means that the text content exceeds the size set by the component and needs to report an error for processing.
[0031] Furthermore, the text field component of the implementation device of the text field component based on Base64 encoding verifies the size of the picture, including: after selecting the picture, obtaining the size fileSize of the uploaded picture, comparing fileSize with the size set by the size attribute, and if the size limit is not met, an error handling is performed.
[0032] The beneficial effects of the present invention are:
[0033] By using this method, the development of duplicate code can be reduced, and the efficiency of application development can be effectively improved;
[0034] It can be widely applied in the field of cloud computing and other applications involving Base64 encoding, and has great practical significance;
[0035] This method is flexibly designed, supporting users to select the component mode according to their needs. In the text mode, it can be set whether to display the text before and after encoding, and it supports users to set whether to perform size verification on the text content; in the picture mode, the picture format can be set, and the picture size limit is supported. The method of the present invention also has scalability. Description of the Drawings
[0036] Figure 1 It is a schematic flowchart of the method of the present invention in the text mode.
[0037] Figure 2 It is a schematic flowchart of the method of the present invention in the picture mode. Detailed Embodiments
[0038] Base64 encoding is a coding method that encodes binary data into ASCII characters, representing binary data based on 64 printable characters. These characters include uppercase letters A-Z, lowercase letters a-z, numbers 0-9, as well as the plus sign (+) and the forward slash ( / ). During the encoding process, any file or data is first converted into binary format. Then, consecutive binary data is divided into groups of 24 bits (i.e., 3 bytes) each. Each group of 24 bits is further split into four 6-bit subgroups, and each 6-bit group is mapped to a specific Base64 character. If the number of bytes of the original data is not a multiple of 3, the "=" symbol will be used as padding at the end to ensure that the length of the encoded string is a multiple of 4.
[0039] The present invention will be further described below in conjunction with the drawings and specific embodiments, so that those skilled in the art can better understand the present invention and be able to implement it, but the embodiments given are not intended to limit the present invention.
[0040] Embodiment 1
[0041] The present invention provides a method for implementing a text field component based on Base64 encoding, creating a text field component based on Base64 encoding. The text field component is a front-end component that generates text data in Base64 encoding format through interface operations.
[0042] The text field component includes two modes, namely, text mode and picture mode.
[0043] In text mode, the text field component includes a radio box for displaying the content after Base64 encoding and a component extended from a text field control. In text mode, when text is input, text data in Base64 encoding format is generated: set the isbase64 attribute to support switching between Base64 encoding and decoding. Switch to the radio box to trigger the encoding and decoding operations of the data. The triggering of the encoding and decoding operations of the data includes:
[0044] Encoding process: Convert the text data from utf-16 to utf-8 to obtain the result contentutf8, and perform Base64 encoding processing on contentutf8 to obtain the encoded data contentbase64.
[0045] Decoding process: For the encoded data contentbase64, first perform Base64 decoding to obtain contentutf8, and then perform utf-8 to utf-16 conversion on contentutf8 to obtain the text data.
[0046] When the encoding switch radio box is selected, the data encoding process is executed, and the text content after Base64 encoding is displayed on the page. If the radio box is not selected, the decoded text content is displayed on the page.
[0047] And perform Base64 format verification, including:
[0048] Use the methods btoa() and atob() provided by JavaScript to verify whether the text meets the Base64 format requirements. The verification formula is: btoa(atob(value)) == value, where value is the text content, atob() is the Base64 encoding function, and btoa() is the Base64 decoding function. First, perform an encoding operation on the text content, then perform a decoding operation on the encoded content to obtain the result newValue, and finally determine whether the values of newValue and value are the same. If they are the same, it indicates that the text content meets the Base64 format. If they are different, it means that the text does not conform to the base64 encoding rules and needs to be reported as an error.
[0049] At the same time, set the size attribute to perform verification of the text content size, including:
[0050] Obtain the number of bytes of the encoded text, compare the number of bytes with the size. If the number of bytes is less than or equal to the size, it means that the text content meets the size set by the component. If the number of bytes is greater than the size, it means that the text content exceeds the size set by the component, and error handling is required.
[0051] In the picture mode, the text field component includes an upload button and a component extended from the text field control. In the picture mode, the selected picture is generated into a Base64 format string: set the picture format type attribute and the picture size limit size attribute. The type attribute is in an array format, and the value range is common picture formats: jpg, jpeg, png, bmp, gif, etc. Setting the type attribute means that the selected picture format needs to meet one of the types in the type. If not, error handling is performed. Select a picture to be converted to the Base64 format through the upload button, create a FileReader object, and perform a read operation on the picture file through the readAsDataURL() method of the FileReader object. Set the onload event for reading completion. In the onload callback function, obtain the Base64 format string.
[0052] And perform a verification on the picture size, including: after selecting a picture, obtain the size fileSize of the uploaded picture, compare fileSize with the size set by the size attribute, and perform error handling if the size limit is not met.
[0053] Embodiment 2
[0054] The present invention also provides an implementation device for a text field component based on Base64 encoding, including a creation module and a text field component.
[0055] The creation module creates a text field component based on Base64 encoding. The text field component is a front-end component that generates text data in Base64 encoding format through interface operations.
[0056] The text field component includes two modes, namely the text mode and the picture mode.
[0057] In the text mode, the text field component includes a radio box for displaying the content after Base64 encoding and a component extended from the text field control. In the text mode, input text to generate text data in Base64 encoding format: set the isbase64 attribute to support the switching between Base64 encoding and decoding. Switch to the radio box to trigger the encoding and decoding operations of the data, and perform Base64 format verification. At the same time, set the size attribute to perform verification on the size of the text content.
[0058] The text field component includes an upload button and a component for extending the text field control in picture mode. In picture mode, it generates a Base64-encoded string from the selected picture: sets the type attribute of the picture format and the size limit size attribute, selects a picture to be converted to Base64 format through the upload button, creates a FileReader object, reads the picture file through the readAsDataURL() method of the FileReader object, sets the onload event for reading completion, obtains the Base64-encoded string in the onload callback function, and verifies the picture size.
[0059] Regarding the information interaction and execution process among the modules in the above device, since they are based on the same concept as the method embodiment of the present invention, the specific content can be referred to the description in the method embodiment of the present invention and will not be elaborated here.
[0060] Similarly, the device of the present invention can reduce duplicate code development and effectively improve the efficiency of application development; it can be widely applied in the field of cloud computing and other applications involving Base64 encoding, with great practical significance; the device of the present invention is flexibly designed, supporting users to select the component mode according to their needs. In text mode, it can be set whether to display the text before and after encoding, and users are supported to set whether to perform size verification on the text content; in picture mode, the picture format can be set, and the picture size limit is supported. The device of the present invention also has scalability.
[0061] It should be noted that not all steps and modules in the above processes and device structures are necessary, and some steps or modules can be ignored according to actual needs. The execution order of each step is not fixed and can be adjusted according to needs. The system structure described in the above embodiments can be a physical structure or a logical structure, that is, some modules may be implemented by the same physical entity, or some modules may be implemented by multiple physical entities, or some components in multiple independent devices may be jointly implemented.
[0062] The above embodiments are only preferred embodiments given to fully illustrate the present invention, and the protection scope of the present invention is not limited thereto. Equivalent substitutions or transformations made by those skilled in the art on the basis of the present invention are all within the protection scope of the present invention. The protection scope of the present invention is subject to the claims.
Claims
1. A method for implementing a text domain component based on Base64 encoding, characterized in that Create a text domain component based on Base64 encoding. The text domain component is a front-end component that generates text data in Base64 encoding format through interface operations. The text domain component includes two modes, namely text mode and picture mode. The text field component includes a radio button for displaying Base64-encoded content and a component for extending the text field control in text mode. In text mode, input text to generate text data in Base64-encoded format: set the isbase64 attribute to support Base64 encoding and decoding switching, switch to the radio button, trigger the encoding and decoding operations of the data, and perform Base64 format verification. At the same time, set the size attribute to verify the size of the text content. The text field component includes an upload button and a text field control extension component in picture mode. In picture mode, the selected picture is converted into a Base64 format string: the picture format type attribute and the picture size limit size attribute are set, a picture to be converted to Base64 format is selected through the upload button, a FileReader object is created, the picture file is read through the FileReader object readAsDataURL() method, the reading completion event onload is set, the Base64 format string is obtained in the onload callback function, and the picture size is verified.
2. The method for implementing a Base64-encoded text domain component according to claim 1, characterized in that In text mode, the encoding and decoding operations of the trigger data include: Encoding process: Convert the text data utf-16 to utf-8 to get the result contentutf8, and perform Base64 encoding on contentutf8 to get the encoded data contentbase64. Decoding process: For the encoded data contentbase64, first perform Base64 decoding to obtain contentutf8, then convert contentutf8 to utf-8 to utf-16 to obtain text data. Select the encoding switch radio button to execute the data encoding process, and the page will display the Base64-encoded text content. If the radio button is not selected, the page will display the decoded text content.
3. The method for implementing a text domain component based on Base64 encoding according to claim 1, characterized in that Perform Base64 format verification, including: Use JavaScript to provide methods btoa() and atob() to check whether the text meets the Base64 format requirements. The verification formula is: btoa(atob(value))==value, where value is the text content, atob() is the Base64 encoding function, and btoa() is the Base64 decoding function. First, encode the text content, then decode the encoded content to get the result newValue, and finally determine whether newValue and value are the same. If they are the same, it means that the text content meets the Base64 format. If they are different, it means that there is something in the text that does not comply with the base64 encoding rules and an error is required.
4. The method for implementing a text domain component based on Base64 encoding according to claim 1, characterized in that Verify the size of the text content, including: Get the number of bytes of the encoded text and compare the number of bytes with size. If the number of bytes is less than or equal to size, it means that the text content meets the size set by the component. If the number of bytes is greater than size, it means that the text content exceeds the size set by the component and an error is required.
5. The method for implementing a text domain component based on Base64 encoding according to claim 1, characterized in that Verify the image size, including: after selecting the image, obtain the fileSize of the uploaded image, compare the fileSize with the size set by the size attribute, and report an error if the size limit is not met.
6. A device for implementing a text domain component based on Base64 encoding, characterized in that Including creating modules and text field components, The creation module creates a text domain component based on Base64 encoding. The text domain component is a front-end component that generates text data in Base64 encoding format through interface operations. The text domain component includes two modes, namely text mode and picture mode. The text field component includes a radio button for displaying Base64-encoded content and a component for extending the text field control in text mode. In text mode, input text to generate text data in Base64-encoded format: set the isbase64 attribute to support Base64 encoding and decoding switching, switch to the radio button, trigger the encoding and decoding operations of the data, and perform Base64 format verification. At the same time, set the size attribute to verify the size of the text content. The text field component includes an upload button and a text field control extension component in picture mode. In picture mode, the selected picture is converted into a Base64 format string: the picture format type attribute and the picture size limit size attribute are set, a picture to be converted to Base64 format is selected through the upload button, a FileReader object is created, the picture file is read through the FileReader object readAsDataURL() method, the reading completion event onload is set, the Base64 format string is obtained in the onload callback function, and the picture size is verified.
7. The device for implementing a text domain component based on Base64 encoding according to claim 6, characterized in that In text mode, the text domain component triggers data encoding and decoding operations, including: Encoding process: Convert the text data utf-16 to utf-8 to get the result contentutf8, and perform Base64 encoding on contentutf8 to get the encoded data contentbase64. Decoding process: For the encoded data contentbase64, first perform Base64 decoding to obtain contentutf8, then convert contentutf8 to utf-8 to utf-16 to obtain text data. Select the encoding switch radio button to execute the data encoding process, and the page will display the Base64-encoded text content. If the radio button is not selected, the page will display the decoded text content.
8. The device for implementing a text domain component based on Base64 encoding according to claim 6, characterized in that The text domain component performs Base64 format verification, including: Use JavaScript to provide methods btoa() and atob() to check whether the text meets the Base64 format requirements. The verification formula is: btoa(atob(value))==value, where value is the text content, atob() is the Base64 encoding function, and btoa() is the Base64 decoding function. First, encode the text content, then decode the encoded content to get the result newValue, and finally determine whether newValue and value are the same. If they are the same, it means that the text content meets the Base64 format. If they are different, it means that there is something in the text that does not comply with the base64 encoding rules and an error is required.
9. The device for implementing a text domain component based on Base64 encoding according to claim 6, characterized in that The text field component verifies the size of the text content, including: Get the number of bytes of the encoded text and compare the number of bytes with size. If the number of bytes is less than or equal to size, it means that the text content meets the size set by the component. If the number of bytes is greater than size, it means that the text content exceeds the size set by the component and an error is required.
10. The device for implementing a text domain component based on Base64 encoding according to claim 6, characterized in that The text field component verifies the image size, including: after selecting the image, obtaining the size fileSize of the uploaded image, comparing the fileSize with the size set by the size attribute, and reporting an error if the size limit is not met.