Image preview method and system for web front-end sharing type data product

Abstract

The application discloses a kind of web front end sharing type data product's image preview method and system, the method includes the following steps: creating Vue file;Script is created in Vue file;First function and second function are created in script;The address interface of PDF file is obtained in the first function call, and the address of PDF file is obtained;The first function is called in the second function, and the address of PDF file is passed into the second function to obtain PDF file;Asynchronous anonymous function is created in the second function to extract the first picture in PDF file.The application solves the problem that the existing only needs to view the image of sharing type digital product, and the whole PDF display may increase the additional network burden and rendering burden, and it is difficult to layout on the page.

Description

Technical Field

[0001] This invention relates to the field of web front-end image preview technology, and in particular to an image preview method and system for web front-end sharing data products. Background Technology

[0002] Shareable digital products typically offer various image preview methods, including video previews, PDF previews, thumbnail previews, and previews of the first image. However, PDF previews are generally preferred because they are a universal file format that can be viewed and shared across platforms and devices. This means that regardless of the recipient's operating system or software, they can easily view PDF files. PDF also supports password protection and encryption, effectively protecting the security and privacy of document content. Furthermore, PDF supports high-resolution image and font rendering, preserving the original appearance of the document and providing a better display experience.

[0003] However, when previewing a page, PDFs usually require browser component support to be displayed, and additional PDF component buttons or toolbars that may not be needed will also be displayed. If the only thing to do is to let the sharer view digital product images, then displaying the entire PDF may increase the additional network and rendering burden, and it is also difficult to format on the page. Summary of the Invention

[0004] To address the aforementioned shortcomings, this invention proposes an image preview method and system for web-based shared data products. The aim is to solve the problem that using the entire PDF for viewing images of shared digital products may increase the network and rendering burdens, and also make it difficult to format the images on the page.

[0005] To achieve this objective, the present invention adopts the following technical solution:

[0006] A method for previewing images in a web front-end sharing data product includes the following steps:

[0007] Step S1: Create a Vue file;

[0008] Step S2: Create a script in the Vue file;

[0009] Step S3: Create a first function and a second function within the script;

[0010] Step S4: In the first function call, obtain the address interface of the PDF file. ， Get the address of the PDF file;

[0011] Step S5: Call the first function within the second function and pass the address of the PDF file to the second function to obtain the PDF file;

[0012] Step S6: Create an asynchronous anonymous function in the second function to extract the first image from the PDF file.

[0013] Preferably, after step S1, the following step is further included:

[0014] Step S11: Create a template within the Vue file;

[0015] Step S12: Create HTML elements within the template so that the template contains image elements.

[0016] Preferably, after step S2, the following step is further included:

[0017] Step S21: Load pdf.js within the script;

[0018] Step S22: Create image address attributes within the script.

[0019] Preferably, step S6 includes the following sub-steps:

[0020] Step S61: Call the member function getDocument of pdf.js within the first function, and pass the address of the PDF file into getDocument to obtain the loading task;

[0021] Step S62: Call the member function promise.then of the loading task, and pass the asynchronous anonymous function into promise.then, returning a pdf object;

[0022] Step S63: Pass the pdf object into the asynchronous anonymous function;

[0023] Step S64: Create a page object within the asynchronous anonymous function, and obtain the first page object using the pdf object;

[0024] Step S65: Create a viewport object within the asynchronous anonymous function, and use the pdf object to obtain a viewport object with a scaling value of 1;

[0025] Step S66: Create an HTML canvas element within the asynchronous anonymous function;

[0026] Step S67: Set the width and height of the HTML canvas element, assigning them the width and height of the viewport object respectively;

[0027] Step S68: Obtain the context object using the configured HTML canvas element;

[0028] Step S69: Create a rendering context property within the asynchronous anonymous function;

[0029] Step S70: Set the canvas context of the rendering context property and assign it to the context object;

[0030] Step S71: Set the viewport property of the rendering context property and assign it to the viewport object;

[0031] Step S72: Within the asynchronous anonymous function, call the member function render of the first page object, pass the create rendering context property to render, and return a promise object;

[0032] Step S73: Invoke the promise object to wait for the rendering of the first page object;

[0033] Step S74: Create an image data object within the asynchronous anonymous function and assign it the result of the HTML canvas element calling the toDataURL member function;

[0034] Step S75: Within the asynchronous anonymous function, assign a value to the image address attribute, which is the image data object.

[0035] Another aspect of this application provides an image preview system for a web front-end sharing data product, the system comprising:

[0036] The first module is used to create Vue files;

[0037] The second creation module is used to create scripts in the Vue file;

[0038] The third creation module is used to create the first and second functions within the script;

[0039] The first calling module is used to obtain the address interface of the PDF file in the first function call. ， Get the address of the PDF file;

[0040] The second calling module is used to call the first function within the second function;

[0041] The first transmission module is used to pass the address of the PDF file to the second function in order to obtain the PDF file;

[0042] The fourth module is used to create an asynchronous anonymous function within the second function to extract the first image from the PDF file.

[0043] Preferably, it further includes:

[0044] The fifth module is used to create templates within the Vue file;

[0045] The sixth creation module is used to create HTML elements within the template, so that the template contains image elements;

[0046] A loading module is used to load pdf.js within the script;

[0047] The seventh module is used to create image address attributes within the script.

[0048] Preferably, the fourth creation module includes:

[0049] The first calling submodule is used to call the getDocument member function of pdf.js within the first function;

[0050] The first transmission submodule is used to pass the address of the PDF file into getDocument to obtain the loading task;

[0051] The second submodule is called to invoke the member function promise.then for loading the task.

[0052] The second transmission submodule is used to pass the asynchronous anonymous function into promise.then and return a pdf object;

[0053] The third transmission submodule passes the PDF object to the asynchronous anonymous function;

[0054] The first creation submodule is used to create the page object within the asynchronous anonymous function;

[0055] The first acquisition submodule is used to acquire the first page object using the pdf object;

[0056] The second creation submodule is used to create a viewport object within the asynchronous anonymous function;

[0057] The second acquisition submodule is used to obtain a viewport object with a scaling value of 1 using the pdf object;

[0058] The third creation submodule is used to create HTML canvas elements within the asynchronous anonymous function;

[0059] The first settings submodule is used to set the width and height of the HTML canvas element, and assigns them the width and height of the viewport object, respectively.

[0060] The third submodule is used to obtain the context object using the configured HTML canvas element;

[0061] The fourth submodule is created to create rendering context properties within the asynchronous anonymous function;

[0062] The second setting submodule is used to set the canvas context of the rendering context properties and assign it to the context object;

[0063] The third setting submodule is used to set the viewport property of the rendering context property and assign it to the viewport object;

[0064] The third calling submodule is used to call the render member function of the first page object within the asynchronous anonymous function;

[0065] The fourth transport submodule is used to pass the properties for creating the rendering context to the renderer and returns a promise object;

[0066] The fourth calling submodule is used to call the promise object to wait for the rendering of the first page object;

[0067] The fifth creation submodule is used to create an image data object within the asynchronous anonymous function and assign it the result of the HTML canvas element calling the toDataURL member function;

[0068] The assignment submodule is used to assign a value to the image address attribute within the asynchronous anonymous function, and the assigned value is the image data object.

[0069] The technical solutions provided in this application embodiment may include the following beneficial effects:

[0070] This solution allows the sharer to quickly view the digital product image by retrieving the first image from the PDF file. The sharer views the digital product image on a webpage, where only the copyright certificate image on the first page needs to be displayed, rather than the entire PDF file. This reduces the additional network and rendering burden of the entire PDF file, enabling the shared digital product to be displayed and formatted smoothly on the webpage. Attached Figure Description

[0071] Figure 1 This is a flowchart illustrating the steps involved in previewing an image for a web front-end sharing data product. Detailed Implementation

[0072] Embodiments of the present invention are described in detail below. Examples of these embodiments are shown in the accompanying drawings, wherein the same or similar reference numerals denote the same or similar elements or elements having the same or similar functions throughout. The embodiments described below with reference to the accompanying drawings are exemplary and are only used to explain the present invention, and should not be construed as limiting the present invention.

[0073] A method for previewing images in a web front-end sharing data product includes the following steps:

[0074] Step S1: Create a Vue file;

[0075] Step S2: Create a script in the Vue file;

[0076] Step S3: Create a first function and a second function within the script;

[0077] Step S4: In the first function call, obtain the address interface of the PDF file. ， Get the address of the PDF file;

[0078] Step S5: Call the first function within the second function and pass the address of the PDF file to the second function to obtain the PDF file;

[0079] Step S6: Create an asynchronous anonymous function in the second function to extract the first image from the PDF file.

[0080] This solution provides an image preview method for web front-end sharing data products, such as... Figure 1 As shown, the first step is to create a Vue file. Specifically, the Vue file serves as the root component of the entire Vue project, used to display the content within the component. The second step is to create a script within the Vue file. Specifically, the script is included in the Vue file to enable good modularity. The third step is to create a first function and a second function within the script. Specifically, the creation of the first and second functions facilitates subsequent steps of retrieving the PDF file and extracting the first image from the PDF file. The fourth step is to call the address interface for retrieving the PDF file in the first function. ， The first step is to obtain the address of the PDF file. Specifically, each PDF file corresponds to a unique address, and the corresponding PDF file can be found by obtaining its address. The second step involves calling the first function within the second function, passing the PDF file's address to the second function to retrieve the PDF file. Passing the PDF file's address to the second function facilitates file retrieval. The sixth step involves creating an asynchronous anonymous function within the second function to extract the first image from the PDF file. An asynchronous anonymous function is an asynchronous function without a name; it can be passed as a parameter to other functions or used within a function itself. In this embodiment, the asynchronous anonymous function is used within the second function. By creating multiple objects and passing parameters within the asynchronous anonymous function, the first image from the PDF file is retrieved and rendered onto the page.

[0081] This solution allows the sharer to quickly view the digital product image by retrieving the first image from the PDF file. The sharer views the digital product image on a webpage, where only the copyright certificate image on the first page needs to be displayed, rather than the entire PDF file. This reduces the additional network and rendering burden of the entire PDF file, enabling the shared digital product to be displayed and formatted smoothly on the webpage.

[0082] Preferably, after step S1, the following step is further included:

[0083] Step S11: Create a template within the Vue file;

[0084] Step S12: Create HTML elements within the template so that the template contains image elements.

[0085] In this embodiment, HTML is a markup language used to create web pages. HTML contains many elements that help developers create pages with structure and style. Because HTML elements are created within the template, the template includes image elements. These image elements use a flexible layout, allowing them to be displayed in the center, adapting to the page height, and with added shadow effects.

[0086] Preferably, after step S2, the following step is also included:

[0087] Step S21: Load pdf.js within the script;

[0088] Step S22: Create image address attributes within the script.

[0089] In this embodiment, pdf.js is an open-source JavaScript library. Loading pdf.js within the script facilitates the rendering of PDF files in a web browser. Creating image address attributes within the script also facilitates the subsequent extraction of images from the PDF file.

[0090] Preferably, step S6 includes the following sub-steps:

[0091] Step S61: Call the member function getDocument of pdf.js within the first function, and pass the address of the PDF file into getDocument to obtain the loading task;

[0092] Step S62: Call the member function promise.then of the loading task, and pass the asynchronous anonymous function into promise.then, returning a pdf object;

[0093] Step S63: Pass the pdf object into the asynchronous anonymous function;

[0094] Step S64: Create a page object within the asynchronous anonymous function, and obtain the first page object using the pdf object;

[0095] Step S65: Create a viewport object within the asynchronous anonymous function, and use the pdf object to obtain a viewport object with a scaling value of 1;

[0096] Step S66: Create an HTML canvas element within the asynchronous anonymous function;

[0097] Step S67: Set the width and height of the HTML canvas element, assigning them the width and height of the viewport object respectively;

[0098] Step S68: Obtain the context object using the configured HTML canvas element;

[0099] Step S69: Create a rendering context property within the asynchronous anonymous function;

[0100] Step S70: Set the canvas context of the rendering context property and assign it to the context object;

[0101] Step S71: Set the viewport property of the rendering context property and assign it to the viewport object;

[0102] Step S72: Within the asynchronous anonymous function, call the member function render of the first page object, pass the create rendering context property to render, and return a promise object;

[0103] Step S73: Invoke the promise object to wait for the rendering of the first page object;

[0104] Step S74: Create an image data object within the asynchronous anonymous function and assign it the result of the HTML canvas element calling the toDataURL member function;

[0105] Step S75: Within the asynchronous anonymous function, assign a value to the image address attribute, which is the image data object.

[0106] In this embodiment, in step S61, `getDocument` is a method provided by the `pdf.js` library, used to load a PDF file from a specified URL or file path. In step S62, `promise.then` is a method of the `promise` object in the JavaScript library, used to specify the callback function to be executed after the asynchronous operation of the `promise` object succeeds. By calling the member function `promise.then` of the loading task, a `promise` object can be obtained. When the PDF file is loaded, this `promise` object will be parsed into a PDF file instance, i.e., a `pdf` object. In step S72, the member function `render` of the first page object is an asynchronous operation method that returns a `promise` object used to render the PDF page onto the specified HTML canvas, thereby displaying the PDF page on the webpage. In step S74, the member function `toDataURL` is a method of the `canvas` object in the JavaScript library. This method is a method of the canvas element itself, and it can return a data URL containing image display data. Therefore, the image data object created within the asynchronous anonymous function is a data URL containing image display data. In step S75, assigning the image address attribute to the data URL facilitates the extraction and display of the first image in the PDF file.

[0107] Another aspect of this application provides an image preview system for a web front-end sharing data product, the system comprising:

[0108] The first module is used to create Vue files;

[0109] The second creation module is used to create scripts in the Vue file;

[0110] The third creation module is used to create the first and second functions within the script;

[0111] The first calling module is used to obtain the address interface of the PDF file in the first function call. ， Get the address of the PDF file;

[0112] The second calling module is used to call the first function within the second function;

[0113] The first transmission module is used to pass the address of the PDF file to the second function in order to obtain the PDF file;

[0114] The fourth module is used to create an asynchronous anonymous function within the second function to extract the first image from the PDF file.

[0115] This solution presents a web-based front-end image preview system for sharing data products. Through the coordinated operation of a first creation module, a second creation module, a third creation module, a first invocation module, a second invocation module, a first transmission module, and a fourth creation module, it acquires the first image from a PDF file, allowing the sharer to quickly view the digital product image. The sharer views the digital product image through a web interface, where only the copyright certificate image on the first page needs to be displayed, rather than the entire PDF file. This reduces the additional network and rendering burden of the entire PDF file, enabling smooth display and layout of the shared digital product on the web interface.

[0116] Preferred options also include:

[0117] The fifth module is used to create templates within the Vue file;

[0118] The sixth creation module is used to create HTML elements within the template, so that the template contains image elements;

[0119] A loading module is used to load pdf.js within the script;

[0120] The seventh module is used to create image address attributes within the script.

[0121] In this embodiment, the cooperation between the fifth and sixth creation modules helps developers create pages with structure and style. The loading module's settings facilitate the rendering of PDF files in web browsers. The seventh creation module's settings facilitate the subsequent extraction of images from PDF files using image address attributes.

[0122] Preferably, the fourth creation module includes:

[0123] The first calling submodule is used to call the getDocument member function of pdf.js within the first function;

[0124] The first transmission submodule is used to pass the address of the PDF file into getDocument to obtain the loading task;

[0125] The second submodule is called to invoke the member function promise.then for loading the task.

[0126] The second transmission submodule is used to pass the asynchronous anonymous function into promise.then and return a pdf object;

[0127] The third transmission submodule passes the PDF object to the asynchronous anonymous function;

[0128] The first creation submodule is used to create the page object within the asynchronous anonymous function;

[0129] The first acquisition submodule is used to acquire the first page object using the pdf object;

[0130] The second creation submodule is used to create a viewport object within the asynchronous anonymous function;

[0131] The second acquisition submodule is used to obtain a viewport object with a scaling value of 1 using the pdf object;

[0132] The third creation submodule is used to create HTML canvas elements within the asynchronous anonymous function;

[0133] The first settings submodule is used to set the width and height of the HTML canvas element, and assigns them the width and height of the viewport object, respectively.

[0134] The third submodule is used to obtain the context object using the configured HTML canvas element;

[0135] The fourth submodule is created to create rendering context properties within the asynchronous anonymous function;

[0136] The second setting submodule is used to set the canvas context of the rendering context properties and assign it to the context object;

[0137] The third setting submodule is used to set the viewport property of the rendering context property and assign it to the viewport object;

[0138] The third calling submodule is used to call the render member function of the first page object within the asynchronous anonymous function;

[0139] The fourth transport submodule is used to pass the properties for creating the rendering context to the renderer and returns a promise object;

[0140] The fourth calling submodule is used to call the promise object to wait for the rendering of the first page object;

[0141] The fifth creation submodule is used to create an image data object within the asynchronous anonymous function and assign it the result of the HTML canvas element calling the toDataURL member function;

[0142] The assignment submodule is used to assign a value to the image address attribute within the asynchronous anonymous function, and the assigned value is the image data object.

[0143] In this embodiment, in the first calling submodule and the first transmission submodule, `getDocument` is a method provided by the `pdf.js` library, used to load a PDF file from a specified URL or file path. In the second calling submodule and the second transmission submodule, `promise.then` is one of the methods of the promise object in the JavaScript library, used to specify the callback function to be executed after the asynchronous operation of the promise object succeeds. By calling the member function `promise.then` of the loading task, a promise object can be obtained. When the PDF file is loaded, this promise object will be parsed into a PDF file instance, i.e., a `pdf` object. In the third calling submodule, the fourth transmission submodule, and the fourth calling submodule, the member function `render` of the first page object is an asynchronous operation method that returns a promise object used to render the PDF page onto a specified HTML canvas, thereby displaying the PDF page on the webpage. In the fifth creation submodule, the member function `toDataURL` is a method of the canvas object in the JavaScript library. This method is a method of the canvas element itself, and it can return a data URL containing image display data. Therefore, the image data object created within the asynchronous anonymous function is a data URL containing image display data. In the assignment submodule, assigning the image address attribute to the data URL facilitates the extraction and display of the first image in the PDF file.

[0144] Furthermore, the functional units in the various embodiments of the present invention can be integrated into a processing module, or each unit can exist physically separately, or two or more units can be integrated into a module. The integrated module can be implemented in hardware or as a software functional module. If the integrated module is implemented as a software functional module and sold or used as an independent product, it can also be stored in a computer-readable storage medium.

[0145] Although embodiments of the present invention have been shown and described above, it is understood that the above embodiments are exemplary and should not be construed as limiting the present invention. Those skilled in the art can make changes, modifications, substitutions and variations to the above embodiments within the scope of the present invention.

Claims

1. A method for previewing images in a web front-end sharing data product, characterized in that: Includes the following steps: Step S1: Create a Vue file; Step S2: Create a script in the Vue file; Step S3: Create a first function and a second function within the script; Step S4: In the first function call, obtain the address of the PDF file by calling the address of the PDF file; Step S5: Call the first function within the second function and pass the address of the PDF file to the second function to obtain the PDF file; Step S6: Create an asynchronous anonymous function in the second function to extract the first image from the PDF file; Step S6 includes the following sub-steps: Step S61: Call the member function getDocument of pdf.js within the first function, and pass the address of the PDF file into getDocument to obtain the loading task; Step S62: Call the member function promise.then of the loading task, and pass the asynchronous anonymous function into promise.then, returning a pdf object; Step S63: Pass the pdf object into the asynchronous anonymous function; Step S64: Create a page object within the asynchronous anonymous function, and obtain the first page object using the pdf object; Step S65: Create a viewport object within the asynchronous anonymous function, and use the pdf object to obtain a viewport object with a scaling value of 1; Step S66: Create an HTML canvas element within the asynchronous anonymous function; Step S67: Set the width and height of the HTML canvas element, assigning them the width and height of the viewport object respectively; Step S68: Obtain the context object using the configured HTML canvas element; Step S69: Create a rendering context property within the asynchronous anonymous function; Step S70: Set the canvas context of the rendering context property and assign it to the context object; Step S71: Set the viewport property of the rendering context property and assign it to the viewport object; Step S72: Within the asynchronous anonymous function, call the member function render of the first page object, pass the create rendering context property to render, and return a promise object; Step S73: Invoke the promise object to wait for the rendering of the first page object; Step S74: Create an image data object within the asynchronous anonymous function and assign it the result of the HTML canvas element calling the toDataURL member function; Step S75: Within the asynchronous anonymous function, assign a value to the image address attribute, which is the image data object.

2. The image preview method for a web front-end sharing data product according to claim 1, characterized in that: Following step S1, the following steps are also included: Step S11: Create a template within the Vue file; Step S12: Create HTML elements within the template so that the template contains image elements.

3. The image preview method for a web front-end sharing data product according to claim 1, characterized in that: Following step S2, the following steps are also included: Step S21: Load pdf.js within the script; Step S22: Create image address attributes within the script.

4. An image preview system for a web front-end sharing data product, characterized in that: Using the image preview method for a web front-end sharing data product as described in any one of claims 1-3, the system comprises: The first module is used to create Vue files; The second creation module is used to create scripts in the Vue file; The third creation module is used to create the first and second functions within the script; The first calling module is used to obtain the address of the PDF file by calling the interface for obtaining the address of the PDF file in the first function call; The second calling module is used to call the first function within the second function; The first transmission module is used to pass the address of the PDF file to the second function in order to obtain the PDF file; The fourth module is used to create an asynchronous anonymous function within the second function to extract the first image from the PDF file; The fourth creation module includes: The first calling submodule is used to call the getDocument member function of pdf.js within the first function; The first transmission submodule is used to pass the address of the PDF file into getDocument to obtain the loading task; The second submodule is called to invoke the member function promise.then for loading the task. The second transmission submodule is used to pass the asynchronous anonymous function into promise.then and return a pdf object; The third transmission submodule passes the PDF object to the asynchronous anonymous function; The first creation submodule is used to create the page object within the asynchronous anonymous function; The first acquisition submodule is used to acquire the first page object using the pdf object; The second creation submodule is used to create a viewport object within the asynchronous anonymous function; The second acquisition submodule is used to obtain a viewport object with a scaling value of 1 using the pdf object; The third creation submodule is used to create HTML canvas elements within the asynchronous anonymous function; The first settings submodule is used to set the width and height of the HTML canvas element, and assigns them the width and height of the viewport object, respectively. The third submodule is used to obtain the context object using the configured HTML canvas element; The fourth submodule is created to create rendering context properties within the asynchronous anonymous function; The second setting submodule is used to set the canvas context of the rendering context properties and assign it to the context object; The third setting submodule is used to set the viewport property of the rendering context property and assign it to the viewport object; The third calling submodule is used to call the render member function of the first page object within the asynchronous anonymous function; The fourth transport submodule is used to pass the properties for creating the rendering context to the renderer and returns a promise object; The fourth calling submodule is used to call the promise object to wait for the rendering of the first page object; The fifth creation submodule is used to create an image data object within the asynchronous anonymous function and assign it the result of the HTML canvas element calling the toDataURL member function; The assignment submodule is used to assign a value to the image address attribute within the asynchronous anonymous function, and the assigned value is the image data object.

5. The image preview system for a web front-end sharing data product according to claim 4, characterized in that: Also includes: The fifth module is used to create templates within the Vue file; The sixth creation module is used to create HTML elements within the template, so that the template contains image elements; A loading module is used to load pdf.js within the script; The seventh module is used to create image address attributes within the script.

Images