Method for generating two-dimensional code poster based on Canvas dragging

Abstract

The invention relates to the technical field of picture generation, in particular to a method for generating a two-dimensional code poster based on Canvas dragging. The method is used for generating a personalized two-dimensional code poster. The method aims to simplify the process of generating the two-dimensional code poster, so that the two-dimensional code poster is easier to operate by a common user. According to the method, an image processing technology is introduced, so that users can generate their own two-dimensional code posters through simple dragging and placing operations, professional design skills are not needed, the degree of participation of the users can be improved, and personalized requirements of the users can be met.

Description

Technical Field

[0001] The present invention relates to the technical field of picture generation, and in particular to a method for generating a QR code poster based on Canvas dragging. Background Art

[0002] In modern social media and advertising, it has become a common practice to generate personalized QR code posters to spread information. These QR code posters usually include QR code images for tracking or promotion, event pictures introducing activities or attracting people's attention, company logos, etc.

[0003] Generating these QR code posters usually requires the use of specialized image design software, and complex technical operations may be involved in the process of generating and adjusting the QR code posters. Usually, this requires importing images, adjusting image sizes, inserting QR codes, setting colors and styles, etc. These tasks may be difficult for people without professional design skills. Or based on a fixed QR code image template, only the QR code content can be set, and users cannot freely change the position and shape of the QR code poster elements, making the use of QR code posters inflexible. Summary of the invention

[0004] In order to overcome the problems existing in the above-mentioned prior art, this patent relates to a drag-based method for generating personalized QR code posters. The goal of this method is to simplify the process of generating QR code posters and make it easier for ordinary users to operate. This method introduces image processing technology, allowing users to generate their own QR code posters through simple drag and drop operations without the need for professional design skills, and can also improve user participation and meet their personalized needs.

[0005] The present invention provides a method for generating a QR code poster based on Canvas dragging, comprising the following steps: User interface design: Graphical interface is used to display the available poster layouts, colors, fonts, and image elements; Element library management: Create an element library, including poster elements, which are background images, texts, icons, and QR codes; Drag function implementation: Add a drag function to each element on the poster, allowing users to drag elements from the element library to the poster canvas using a mouse or touch screen, and adjust the position and size of the elements by dragging, providing convenient operations such as automatic centering and alignment, while recording the position coordinates, alignment and other properties of each element; Property adjustment: provide options to adjust properties for dragged elements, modify text content, size, color, change image display mode or apply special effects, change QR code points, code holes, logos; Real-time preview and modification: When users drag and adjust elements, the preview effect of the poster is displayed in real time, so that users can modify and adjust at any time; Save and export: Provides the function of saving and exporting posters, allowing users to save the final designed poster as a file or print it out directly; Data storage and management: Store and manage user-designed poster data so that users can re-edit or share saved posters at any time.

[0006] The graphical interface includes a poster element dragging area, a QR code poster real-time preview area, an element attribute setting area, and provides dragging and dropping functions.

[0007] The beneficial effects of the present invention are: Simplified operation process: users can directly drag and drop operations in the front-end interface without relying on external image editing software.

[0008] Real-time preview: During the dragging operation, users can see the effect in real time, what they see is what they get, which improves design efficiency.

[0009] Free layout: Users can freely adjust and combine graphic elements to achieve personalized layout and style.

[0010] Quick output: After the user completes the design, the poster can be quickly exported to meet different usage needs. BRIEF DESCRIPTION OF THE DRAWINGS

[0011] Figure 1 Schematic diagram of the user interface of the present invention. DETAILED DESCRIPTION

[0012] The technical solution adopted by the present invention includes the following key components: 1. Drag area: Automatic alignment: The drag area is a canvas element with a custom width and height created by the user, which contains an intelligent automatic alignment function. The automatic alignment function needs to listen to mouse events and obtain the user's operation behavior. We calculate the position of the alignment target based on the position of the mouse and update the position of the dragged element. In the template, we use :style to bind the position of the dragged element and add alignment styles according to the position of the element. This allows users to drag QR codes, text boxes, logo images and other elements, and these elements will automatically align to the grid lines or other elements on the canvas. This ensures that the alignment and layout between elements are more neat. Neat layout requirements: Reasonable use of blank areas to allow enough spacing between elements to avoid overcrowding or confusion. White space can help visually separate different elements and improve readability and attractiveness. Choose fonts that are suitable for the theme and use consistent typography rules. Make sure that the text content is easy to read, the size and line spacing are appropriate, and the paragraph spacing is uniform. The title and body text should have a clear hierarchy. Use high-quality pictures and graphics to ensure their clarity and bright colors. If there are multiple pictures, pay attention to the proportion and position relationship between them to achieve a harmonious visual effect. Choose appropriate color matching and themes to convey the desired emotions and information. The colors should be consistent with the brand or theme, and pay attention to the balance and contrast of the colors used. Ensure that the style, fonts, colors, and typography of the entire poster are consistent to form a unified visual effect. Use hierarchy to highlight the key content to attract the audience's attention. Emphasize the main information and core elements by using size, color, contrast, etc. Ensure that the proportions and sizes between elements are reasonable according to the purpose of the poster and the display environment. Avoid elements that are too large or too small to maintain the overall visual balance. Make the generated QR code poster look more professional.

[0013] Alignment assistance: Provides alignment assistance functions, including displaying guides, adsorption functions, etc., to help users adjust the position and relative distance of elements more accurately. These guides and functions help users create symmetrical and neat layouts.

[0014] Content layout: The drag area also includes text element layout functions. The main requirement is to understand different layout schemes such as grid layout, column layout, etc., and choose a layout method suitable for the poster to implement the layout function, and be familiar with font properties and text style properties such as font size, line height, font weight, alignment, etc. to ensure that the display effect of text elements meets the poster design requirements. Users can select a text box and enter text content, and the application will intelligently layout the text, automatically adjust the word spacing, line spacing and font size to adapt to the size and position of the selected text box to ensure the readability and overall appearance of the text.

[0015] 2. Graphic element library: Text box: The graphic element library contains various text box elements and attributes. Users can select these templates and edit the text content, font, color and other attributes. These templates include different styles of titles, text, slogans, etc., allowing users to quickly create various text elements.

[0016] Logo image: The library includes multiple logo image options, and users can select one and adjust its size, transparency and position as needed. This allows users to add their own company logo or personalized logo to the QR code poster.

[0017] Background image: The graphic element library includes multiple background images for selection, which are suitable for different scenes, such as festivals, seasons, events, etc. Users can select background images to create QR code posters that match specific themes.

[0018] 3. Properties panel: Background image property editing: The property panel allows users to edit the properties of the background image, including selecting a background image, adjusting transparency, size, and position. Users can customize the background image through the property panel to meet their personalized needs.

[0019] Text element property editing: Users can select a text element (text box) and edit its properties, including text content, font, color, size, alignment, etc. This allows users to easily customize text elements.

[0020] Graphic element property editing: For graphic elements, such as logo images, users can edit their properties, including size, transparency, and position. This enables users to seamlessly integrate their own logos or graphic elements into QR code posters.

[0021] QR code property editing: Users can also edit the properties of the generated QR code, including the QR code's content, color, size, error correction level, etc. This enables users to customize the QR code to suit their needs.

[0022] 3. QR code poster preview: Different size support: Users can choose different sizes of QR code posters in the application. The application provides a range of standard size options, while also supporting user-defined sizes to meet different output and display needs.

[0023] Different device support: The application provides a real-time preview function, allowing users to preview the generated QR code poster on different devices, including mobile phones, tablets, computers, etc. This ensures the display effect of the generated poster on different devices, as well as its responsive design.

[0024] A specific embodiment of the present invention comprises the following steps: User interface design: Design an intuitive and easy-to-use graphical interface to display the available poster layouts, colors, fonts, images and other elements, and provide drag and drop functions. Figure 1 In the figure shown: 1 is the poster element dragging area; 2 is the QR code poster real-time preview area; 3 is the element attribute setting area; Element library management: Create an element library that contains various available poster elements, such as uploadable background images, text, icons, QR codes, etc.

[0025] Drag function implementation: Add a drag function to each element on the poster, so that users can drag elements from the element library to the poster canvas via a mouse or touch screen, and adjust the position and size of the elements by dragging, providing convenient operations such as automatic centering and alignment, and recording the position coordinates, alignment and other properties of each element.

[0026] Property adjustment: Provides options for adjusting properties of the dragged elements, such as modifying text content, size, color, etc., changing the display mode of images or applying special effects, changing QR code points, code holes, LOGO, etc.

[0027] Real-time preview and modification: When users drag and adjust elements, the preview effect of the poster is displayed in real time so that users can modify and adjust at any time.

[0028] Save and Export: Provides the function of saving and exporting posters, allowing users to save the final designed poster as a file or print it out directly.

[0029] Data storage and management: Store and manage user-designed poster data so that users can re-edit or share saved posters at any time.

[0030] Implementation examples of the present invention: Implementation case 1: Design and generation of “venue code” The venue code is a proprietary QR code image used by personnel to enter key venues. The venue code image generally includes elements such as the QR code, background image, venue name, warm reminder, venue LOGO, etc.

[0031] Determine the use and purpose of the venue code image. For example, it can be used in key areas such as residential areas, schools and off-campus training institutions, medical institutions, or transportation places such as stations and docks, various public transportation operating vehicles, as well as public places such as shopping malls, cinemas, hotels and homestays; According to the purpose and usage of the venue code, determine the content and style of each element of the venue code image, including patterns, colors, fonts and other elements, which may include venue name, address, type and other information, and may also include epidemic prevention-related information, such as test time, test results, etc.; Upload the content of related elements, including background image upload, title content filling, and pattern material upload; Drag QR codes, titles, prompts and other elements, adjust the position and properties of each element, and preview the effect in real time; After confirming the style, export the venue code image of the required size.

[0032] Through this case, users can generate place code images for different usage scenarios by dragging and dropping on the front-end interface. There is no need for professional image designers or professional image design software. The design and generation of place codes can be completed by dragging and dropping the layout, which is simple and efficient and can adapt to the rapid changes in public emergency events.

[0033] Implementation Case 2: QR Code Promotional Event Poster Generation An event poster is a graphic form used to promote an event, product or service. It is usually used to attract the attention of the target audience, convey relevant information, and stimulate their interest and willingness to participate. QR code posters have the advantages of large amount of information, strong interactivity, traceable data, and fast dissemination speed.

[0034] Determine the theme and purpose of the event: First, you need to determine the theme and purpose of the event, which will help determine the design style and content of the poster; Determine the size and layout of the poster: Determine the size and layout of the poster according to the scale of the event and the publicity needs. Generally speaking, the size of the poster should be consistent with the scale of the event and the actual situation of the publicity venue; Choose the right colors and fonts: Choose the right colors and fonts based on the theme and purpose of the event. The colors should be able to attract people's attention, and the fonts should be clear and easy to read, and able to convey the information of the event; Upload the content of related elements, including background image upload, promotional title, content filling, pattern material upload, etc.; Drag and drop elements such as titles, content, and patterns and adjust their positions, sizes, and font attributes; Drag the QR code to adjust the size, LOGO, color, code points, etc. and preview the image effect in real time; After finishing editing, export the image at the required size.

[0035] Through this case, QR code promotional event posters can be generated by dragging and dropping on the front end, quickly and efficiently responding to real-time changing commercial event promotion needs, and without the need for professional advertising designers and professional design software to intervene. Beautiful and personalized event posters can be designed quickly and efficiently to improve publicity effects and market competitiveness.

[0036] By dragging elements from the poster element library to the Canvas, you can adjust the position and display properties of each element at any time, so that users can see what they get. This lowers the technical threshold for QR code poster design and improves the design efficiency and flexibility of posters.

[0037] Glossary Canvas: A drawing API provided by HTML5. Canvas can be used to draw graphics, text, pictures and other elements on web pages.

Claims

1. A method for generating a QR code poster based on Canvas dragging, characterized in that The steps include: User interface design: Graphical interface is used to display the available poster layouts, colors, fonts, and image elements; Element library management: Create an element library, including poster elements, which are background images, texts, icons, and QR codes; Drag function implementation: Add a drag function to each element on the poster, allowing users to drag elements from the element library to the poster canvas using a mouse or touch screen, and adjust the position and size of the elements by dragging, providing convenient operations such as automatic centering and alignment, while recording the position coordinates, alignment and other properties of each element; Property adjustment: provide options to adjust properties for dragged elements, modify text content, size, color, change image display mode or apply special effects, change QR code points, code holes, and LOGO; Real-time preview and modification: When users drag and adjust elements, the preview effect of the poster is displayed in real time, so that users can modify and adjust at any time; Save and export: Provides the function of saving and exporting posters, allowing users to save the final designed poster as a file or print it out directly; Data storage and management: Store and manage user-designed poster data so that users can re-edit or share saved posters at any time.

2. According to the method of claim 1, the method is characterized in that The graphical interface includes a poster element dragging area, a QR code poster real-time preview area, an element attribute setting area, and provides dragging and dropping functions.

Images