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

CN116894131BCN 116894131 BCN116894131 BCN 116894131BCN-116894131-B

Abstract

The invention discloses an image preview method and system of a web front-end sharing type data product, wherein the method comprises the following steps of creating a Vue file; the method comprises the steps of creating a script in a Vue file, creating a first function and a second function in the script, calling the first function to obtain an address interface of a PDF file to obtain an address of the PDF file, calling the first function in the second function and transmitting the address of the PDF file to the second function to obtain the PDF file, and creating an asynchronous anonymous function in the second function to extract a first picture in the PDF file. The invention solves the problems that the prior art only needs to view the shared digital product image, and the whole PDF display is likely to increase extra network burden and rendering burden, and typesetting is difficult to be carried out on the page.

Inventors

DENG WEITAO
LV HUOSHENG
HUANG LONGJIE

Assignees

西藏众陶联供应链服务有限公司
佛山众陶联供应链服务有限公司
林周佳住家网络科技有限公司
林周利利佳供应链服务有限公司
共青城市众陶联供应链服务有限公司

Dates

Publication Date: 20260512
Application Date: 20230711

Claims (5)

1. The image preview method of the web front-end sharing type data product is characterized by comprising the following steps of: step S1, creating a Vue file; Step S2, creating a script in the Vue file; Step S3, creating a first function and a second function in the script; Step S4, an address interface of the PDF file is obtained through the first function call, and the address of the PDF file is obtained; Step S5, calling the first function in the second function, and transmitting the address of the PDF file to the second function to acquire the PDF file; Step S6, creating an asynchronous anonymous function in the second function to extract a first picture in the PDF file; In step S6, the following sub-steps are included: Step S61, calling a member function getDocument of PDF. Js in the first function, and transmitting an address of a PDF file into getDocument to obtain a loading task; Step S62, calling a member function promischen of the loading task, and transmitting the asynchronous anonymous function into the promischen, so as to return the pdf object; Step S63, the pdf object is transmitted to the asynchronous anonymity function; Step S64, creating a page object in the asynchronous anonymity function, and acquiring a first page object by using the pdf object; step S65, creating a viewport object in the asynchronous anonymous function, and acquiring the viewport object with a scaling value of 1 by utilizing the pdf object; Step S66, creating an HTML canvas element in the asynchronous anonymity function; Step S67, setting the width and the height of the HTML canvas element, and respectively assigning the width and the height of the viewport object; step S68, obtaining a context object by using the set HTML canvas element; step S69, creating a rendering context attribute in the asynchronous anonymization function; Step S70, setting the drawing board context of the rendering context attribute and assigning the drawing board context as the context object; Step 71, setting a viewport attribute of the rendering context attribute, and assigning the viewport attribute as the viewport object; step 72, calling a member function render of the first page object in the asynchronous anonymous function, and transmitting a rendering context attribute to the render, and returning promise objects; Step 73, calling the promise objects to wait for the rendering of the first page object; step S74, creating an image data object in the asynchronous anonymous function, and assigning a value to a result after the HTML canvas element calls toDataURL member functions; And step S75, assigning the picture address attribute in the asynchronous anonymity function to be the image data object.
2. The method for previewing images of a web front-end shared data product of claim 1, further comprising, after step S1, the steps of: step S11, creating a template in the Vue file; And step S12, creating HTML elements in the template, so that the template contains picture elements.
3. The method for previewing images of a web front-end shared data product of claim 1, further comprising, after step S2, the steps of: Step S21, loading pdf.js in the script; and S22, creating a picture address attribute in the script.
4. An image preview system of a web front-end shared data product, wherein the image preview method of the web front-end shared data product according to any one of claims 1 to 3 is used, the system comprising: the first creation module is used for creating a Vue file; the second creating module is used for creating a script in the Vue file; a third creation module for creating a first function and a second function within the script; the first calling module is used for calling and acquiring an address interface of the PDF file from the first function to obtain an address of the PDF file; A second calling module, configured to call the first function in the second function; the first transmission module is used for transmitting the address of the PDF file to the second function so as to acquire the PDF file; a fourth creation module, configured to create an asynchronous anonymous function in the second function, so as to extract a first picture in a PDF file; The fourth creation module includes: a first calling sub-module, configured to call a member function getDocument of pdf.js in the first function; The first transmission sub-module is used for transmitting the address of the PDF file into getDocument to obtain a loading task; The second calling sub-module is used for calling a member function procise of the loading task; the second transmission submodule is used for transmitting the asynchronous anonymous function into the promise. Then and returning the pdf object; a third transmission sub-module for transmitting the pdf object to the asynchronous anonymization function; a first creation sub-module for creating a page object within the asynchronous anonymity function; a first obtaining sub-module, configured to obtain a first page object using the pdf object; A second creation sub-module for creating a viewport object within the asynchronous anonymization function; The second acquisition submodule is used for acquiring a viewport object with a scaling value of 1 by using the pdf object; a third creation sub-module for creating HTML canvas elements within the asynchronous anonymity function; The first setting submodule is used for setting the width and the height of the HTML canvas element and respectively assigning the width and the height of the viewport object; a third obtaining sub-module, configured to obtain a context object by using the set HTML canvas element; A fourth creation sub-module for creating a rendering context attribute within the asynchronous anonymization function; The second setting submodule is used for setting the drawing board context of the rendering context attribute and assigning the drawing board context as the context object; A third setting submodule, configured to set a viewport attribute of the rendering context attribute, and assign a value to the viewport object; A third calling sub-module for calling a member function render of the first page object within the asynchronous anonymous function; A fourth transmission sub-module, configured to send a rendering context attribute to a render, and return promise objects; A fourth calling sub-module, configured to call the promise objects to wait for rendering of the first page object; a fifth creation sub-module, configured to create an image data object in the asynchronous anonymous function, and assign a value to a result after the HTML canvas element calls toDataURL member functions; and the assignment sub-module is used for assigning the picture address attribute in the asynchronous anonymity function to be the image data object.
5. The image preview system of a web-front-end shared data product of claim 4, further comprising: A fifth creating module, configured to create a template in the Vue file; A sixth creation module, configured to create HTML elements within the template, such that the template includes picture elements; The loading module is used for loading pdf.js in the script; and a seventh creation module, configured to create a picture address attribute in the script.

Description

Image preview method and system for web front-end sharing type data product Technical Field The invention relates to the technical field of web front-end image preview, in particular to an image preview method and system of a web front-end sharing type data product. Background The shared digital product may generally use a variety of image preview methods, wherein the preview may be in video form, PDF form, thumbnail form, and the first picture may be extracted for preview. But is typically done in a preview approach in PDF form, which is a generic file format that can be viewed and shared across platforms, across devices. This means that the PDF file can be easily viewed regardless of the operating system or software used by the recipient. The PDF format also supports the functions of password protection and encryption, and can effectively protect the security and privacy of document contents. In addition, the PDF format supports high-definition image and font rendering, can keep the original appearance of the document, and presents a better display effect. However, when the page is previewed, the PDF usually needs browser component support to display, and PDF component buttons or tool bars which may not be needed are additionally displayed, if only a sharer needs to view the digital product image, the whole PDF is used to display, which may increase additional network burden and rendering burden, and typesetting is difficult on the page. Disclosure of Invention Aiming at the defects, the invention provides an image preview method and an image preview system for a web front-end shared type data product, which aim to solve the problems that the existing method and the system only need to view the shared type digital product image, extra network burden and rendering burden are possibly increased by adopting the whole PDF display, and typesetting is difficult to carry out on a page. To achieve the purpose, the invention adopts the following technical scheme: an image preview method of a web front-end sharing type data product comprises the following steps: step S1, creating a Vue file; Step S2, creating a script in the Vue file; Step S3, creating a first function and a second function in the script; Step S4, obtaining an address of the PDF file from an address interface , of the PDF file by calling the first function; Step S5, calling the first function in the second function, and transmitting the address of the PDF file to the second function to acquire the PDF file; and S6, creating an asynchronous anonymization function in the second function to extract the first picture in the PDF file. Preferably, after step S1, the following steps are further included: step S11, creating a template in the Vue file; And step S12, creating HTML elements in the template, so that the template contains picture elements. Preferably, after step S2, the following steps are further included: Step S21, loading pdf.js in the script; and S22, creating a picture address attribute in the script. Preferably, in step S6, the following sub-steps are included: Step S61, calling a member function getDocument of PDF. Js in the first function, and transmitting an address of a PDF file into getDocument to obtain a loading task; Step S62, calling a member function promischen of the loading task, and transmitting the asynchronous anonymous function into the promischen, so as to return the pdf object; Step S63, the pdf object is transmitted to the asynchronous anonymity function; Step S64, creating a page object in the asynchronous anonymity function, and acquiring a first page object by using the pdf object; step S65, creating a viewport object in the asynchronous anonymous function, and acquiring the viewport object with a scaling value of 1 by utilizing the pdf object; Step S66, creating an HTML canvas element in the asynchronous anonymity function; Step S67, setting the width and the height of the HTML canvas element, and respectively assigning the width and the height of the viewport object; step S68, obtaining a context object by using the set HTML canvas element; step S69, creating a rendering context attribute in the asynchronous anonymization function; Step S70, setting the drawing board context of the rendering context attribute and assigning the drawing board context as the context object; Step 71, setting a viewport attribute of the rendering context attribute, and assigning the viewport attribute as the viewport object; step 72, calling a member function render of the first page object in the asynchronous anonymous function, and transmitting a rendering context attribute to the render, and returning promise objects; Step 73, calling the promise objects to wait for the rendering of the first page object; step S74, creating an image data object in the asynchronous anonymous function, and assigning a value to a result after the HTML canvas element calls toDataURL member functions; And step S75, assigning the picture address attribute