WO2022048141A9 - 一种图像处理方法及装置、计算机可读存储介质 - Google Patents

一种图像处理方法及装置、计算机可读存储介质 Download PDF

Info

Publication number
WO2022048141A9
WO2022048141A9 PCT/CN2021/083678 CN2021083678W WO2022048141A9 WO 2022048141 A9 WO2022048141 A9 WO 2022048141A9 CN 2021083678 W CN2021083678 W CN 2021083678W WO 2022048141 A9 WO2022048141 A9 WO 2022048141A9
Authority
WO
WIPO (PCT)
Prior art keywords
image
page
picture
current full
screen page
Prior art date
Application number
PCT/CN2021/083678
Other languages
English (en)
French (fr)
Other versions
WO2022048141A1 (zh
Inventor
李林森
叶文文
Original Assignee
北京沃东天骏信息技术有限公司
北京京东世纪贸易有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 北京沃东天骏信息技术有限公司, 北京京东世纪贸易有限公司 filed Critical 北京沃东天骏信息技术有限公司
Priority to US18/043,169 priority Critical patent/US20230334113A1/en
Priority to EP21863212.3A priority patent/EP4198773A4/en
Priority to JP2023510486A priority patent/JP7538948B2/ja
Publication of WO2022048141A1 publication Critical patent/WO2022048141A1/zh
Publication of WO2022048141A9 publication Critical patent/WO2022048141A9/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Definitions

  • the present invention relates to the technical field of terminals, in particular to an image processing method and device, and a computer-readable storage medium.
  • the current screenshot method generally uses the canvas method in the HTML specification to screenshot the specified page, and then stores the screenshots in the browser cache.
  • the HTML page is converted into a picture in base64 encoding format, and finally the converted picture is saved locally on the mobile terminal.
  • images in the base64 encoding format will take up a large cache space, and the rendering method in the web page drawing needs to be used when converting an HTML page to a base64 image, and the more complex the page, the longer the rendering time. Therefore, the current screenshot method consumes a lot of browser cache, and the screenshot process is long, thereby reducing the performance of the browser cache.
  • Embodiments of the present invention are expected to provide an image processing method and device, and a computer-readable storage medium, which can improve screenshot performance of webpage applications.
  • an embodiment of the present invention provides an image processing method, including:
  • At least one picture object is created, and the at least one picture object is associated with the at least one link path and stored in the webpage application cache, thereby completing the screenshot of the current full-screen page.
  • an embodiment of the present invention provides an image processing device, including an acquisition part, a conversion part and a storage part, wherein,
  • the acquiring part is configured to acquire at least one page image of the current full-screen page in the webpage application
  • the conversion part is configured to convert the at least one page image into at least one file object, and create at least one link path of the at least one file object; the at least one file object is the same as the at least one link path one-to-one correspondence;
  • the saving part is configured to create at least one picture object, associate and store the at least one picture object and the at least one link path in the webpage application cache, so as to complete the screenshot of the current full-screen page.
  • an embodiment of the present invention provides an image processing device, the image processing device includes a memory, a processor, and a communication bus, the memory communicates with the processor through the communication bus, and the memory stores One or more programs executable by the processor, when the one or more programs are executed, the processor executes any one of the above image processing methods.
  • an embodiment of the present invention provides a computer-readable storage medium, the computer-readable storage medium stores one or more programs, and the one or more programs can be executed by one or more processors, In order to realize any one of the above image processing methods.
  • An embodiment of the present invention provides an image processing method and device, and a computer-readable storage medium.
  • the method includes: in a webpage application, acquiring at least one page image of the current full-screen page; converting the at least one page image into at least one file object, and create at least one link path of at least one file object; at least one file object corresponds to at least one link path; create at least one picture object, and store at least one picture object in association with at least one link path in the web application cache , so as to complete the screenshot of the current full-screen page.
  • the image processing device After the image processing device acquires at least one page image, it can convert at least one page image into at least one file object, and associate the link path of at least one file object with at least one picture object and It is saved in the cache, thus overcoming the technical problem of converting the screenshot image to other encoding formats and occupying a large amount of cache, and because at least one image object of the current full-screen page is stored in the cache, so when the user enters again When you want to take a screenshot of the current full-screen page, the image processing device can directly obtain at least one image object from the cache as the corresponding page screenshot, without repeated interception, which reduces the processing workload of the browser, and ultimately improves the web page application. Screenshot performance.
  • FIG. 1 is an optional schematic flowchart of an image processing method provided by an embodiment of the present invention
  • FIG. 2 is a schematic flowchart of an optional image processing method provided by an embodiment of the present invention.
  • FIG. 3 is an optional schematic flowchart of an image processing method provided by an embodiment of the present invention.
  • FIG. 4 is an optional schematic flowchart of an image processing method provided by an embodiment of the present invention.
  • FIG. 5 is a schematic flowchart of an optional image processing method provided by an embodiment of the present invention.
  • FIG. 6 is an optional schematic flowchart of an image processing method provided by an embodiment of the present invention.
  • FIG. 7A is a schematic interface diagram 1 of the screenshot process of the webpage application provided by the embodiment of the present invention.
  • FIG. 7B is a second schematic interface diagram of the screenshot process of the webpage application provided by the embodiment of the present invention.
  • FIG. 7C is a third schematic interface diagram of the screenshot process of the webpage application provided by the embodiment of the present invention.
  • FIG. 8 is a schematic flowchart of an optional image processing method provided by an embodiment of the present invention.
  • FIG. 9 is a schematic structural diagram 1 of an image processing device provided by an embodiment of the present invention.
  • FIG. 10 is a second structural diagram of an image processing device provided by an embodiment of the present invention.
  • canvas The canvas element in HTML can draw images on web pages through JavaScript scripts. Canvas has a variety of methods for drawing paths, rectangles, circles, characters, and adding images.
  • ⁇ a> tag is an HTML language tag.
  • the ⁇ a> tag defines a hyperlink, which is used to link from one page to another.
  • the ⁇ img> tag In html, the ⁇ img> tag is used to embed an image in a web page. The image embedded in the ⁇ img> tag is not inserted into the web page, but is linked to the web page. The purpose of the ⁇ img> tag is to create a placeholder for the referenced image.
  • Base64 encoding is a representation method based on 64 printable characters to represent binary data.
  • Document Object Model (Document Object Model, DOM)
  • DOM provides an access model to the entire document, and treats the document as a tree structure, and each node of the tree represents an HTML tag or a text item within the tag.
  • the attributes of the DOM tree nodes represent the basic content and structural information of the page.
  • Progressive Web App (Progressive Web App, PWA): It can use the standardized framework workbox-sw to simulate some native functions on the mobile side, so that the web application can present an experience similar to that of the native application.
  • Blob objects are binary data similar to file objects, and Blob objects can be manipulated like file objects.
  • the current screenshot method is to use the canvas drawing method to take the page of the selected current scene Take a screenshot, then convert the image into base64 encoding format, then wrap an ⁇ a> tag around the image, and use JavaScript script to simulate a click event to save the image locally; or use the ⁇ img> tag to evoke the native method of the browser to prompt the user to long Press the picture to save the picture locally. And when the local picture is lost and wants to save it again, the user has to enter the current browsing page and perform the above series of operations.
  • FIG. 1 is a schematic flowchart of an optional image processing method provided by an embodiment of the present invention, which will be described in conjunction with the steps shown in FIG. 1 .
  • S101 In a web application, acquire at least one page image of a current full-screen page.
  • the image processing method provided in the embodiment of the present invention is applicable to the scene where the screenshot is saved on the webpage application.
  • the browser on the terminal is used to save the screenshot of each scene in a full screen page, or by supporting HTML applications or clients, screenshots of page content displayed on multiple screens in a link, etc.
  • the user when the user browses a full-screen page with multiple scenes in a web application such as a browser, the user can browse multiple scenes in the full-screen page by sliding the page.
  • the image processing device After the current full-screen page is loaded, the image processing device According to needs, the scenes included in the current full-screen page can be screenshotted, and at least one captured image can be used as at least one page image.
  • the image processing device may, in response to the screenshot instruction, use the image corresponding to at least one scene to be screenshot specified by the screenshot instruction as at least one page when the screenshot instruction is received on the current full-screen page of the web application. image.
  • the image processing device can also acquire the image corresponding to each scene in the current full-screen page as at least one page image when the loading of the current full-screen page is completed.
  • a non-perceptual screenshot operation is performed on each scene in the current full-screen page in the background to shorten the waiting time after the user issues the screenshot command.
  • the image processing device may capture at least one page image by taking screenshots of all or part of the scenes in the current full-screen page through the cavas screenshot method in the browser.
  • the html2canvas() method can be called to read the style and content information of each scene to be captured, and generate a picture according to the style and content information of each scene to be captured, so as to obtain at least one page image.
  • the image processing apparatus may also obtain at least one page image through the method of Flashcanvas or ExplorerCanvas, which is specifically selected according to actual conditions, which is not limited in this embodiment of the present invention.
  • the cavas screenshot method usually obtains a picture in png format, and can also generate pictures in other formats according to actual needs, specifically selected according to the actual situation, which is not limited in the embodiment of the present invention.
  • At least one page image is acquired after all the content of the entire screen page in the current full screen page is loaded, so at least one page image is created locally in the webpage application or The resulting image.
  • S102 Convert at least one page image into at least one file object, and create at least one link path of the at least one file object; the at least one file object is in one-to-one correspondence with the at least one link path.
  • the image processing device after the image processing device obtains the at least one page image, it can convert the at least one page image in picture format into at least one file object, so as to realize the access and content of the at least one page image by operating the file object in the HTML page Read operations, etc.
  • the image processing device can convert at least one page image into at least one blob object through the canvas.toBlob() method, and use at least one blob object as at least one file object.
  • the image The processing device may also convert at least one page image into webpage objects of other file types through other methods, which are specifically selected according to actual conditions, which are not limited in this embodiment of the present invention.
  • the image processing apparatus After converting at least one page image into at least one file object, the image processing apparatus creates a link path for each file object.
  • the image processing device can create a Uniform Resource Locator (Uniform Resource Locator, URL) for each blob object through the URL.createObjectURL() method as The link path corresponding to each blob object, so as to obtain at least one link path.
  • Uniform Resource Locator URL
  • URL Uniform Resource Locator
  • each link path in at least one link path points to its corresponding file object
  • the image processing device can link at least one file object with other types of webpage objects, such as picture objects, through at least one link path
  • other types of webpage objects can refer to the data in at least one file object as source data, and then expand the diversified processing of at least one file object through operations on other types of webpage objects Way.
  • the image processing device will create at least one image-type object in the local cache of the web application, that is, at least one image object, and point at least one link path to at least one image object, so that at least one link path and at least one image object The objects are associated; the image processing device saves at least one link path and at least one image object together in the webpage application cache, so as to complete the screenshot of the current full-screen page.
  • the image processing device can create at least one image object through the new Image() method.
  • the image processing device can assign the src attribute of the image object as a link path, so that when the image object is loaded, the link can be accessed through the corresponding link path.
  • the file object corresponding to the path uses the content in the file object as the content data of the picture to be loaded in the picture object, so as to realize the mutual association of the picture object, the link path and the file object.
  • the image processing device can also store at least one link path in the cookie of the web application, so that before the image processing device takes a screenshot of the current full-screen page, it can check the URL of the web application Whether there is at least one link path for the screenshot in the cookie, and at least one image object in the history cache is directly obtained through at least one link path, without repeated screenshot processing for the same page.
  • the image processing device may convert at least one page image into at least one file object, and associate the link path of at least one file object with at least one picture object and save it in the cache, thus overcoming the technical problem of converting the screenshot image to other encoding formats and occupying a large amount of cache, and because at least one image object of the current full-screen page is stored in the cache, so that when the user tries again When you enter the current full-screen page and want to take a screenshot, the image processing device can directly obtain at least one image object from the cache as the corresponding page screenshot, without repeated interception, which reduces the processing workload of the browser and ultimately improves web application. screenshot performance.
  • FIG. 2 is an optional flowchart of an image processing method provided by an embodiment of the present invention. Based on FIG. 1, S101 shown in FIG. 1 can be implemented through S1011-S1014, which will be described in conjunction with each step.
  • the image processing device may divide at least one scene from it according to its displayed style or content, so as to subsequently designate a scene to be captured from at least one scene.
  • the image processing device sets at least one node identifier for at least one scene; at least one scene corresponds to at least one node identifier.
  • At least one scene is a page scene contained in the current full-screen page; such as images or text content at different positions contained in the current full-screen page, or each screen page contained in the current full-screen page, etc. Wait;
  • At least one node identifier represents at least one data position corresponding to at least one scene in the current full-screen page. That is to say, the node identifier is the storage location of the content data of its corresponding webpage object in the overall content data corresponding to the current full-screen page.
  • the overall content data corresponding to the current full-screen page can be an HTML text.
  • At least one node identifier may be a document node in the DOM tree of the current full-screen page, each DOM node stores content data corresponding to each webpage object, and each DOM node is associated with other DOM nodes in the DOM tree.
  • the image processing device can set the DOM style as one-screen display in the current full-screen page, that is, each screen page in the full-screen page is regarded as a scene; the image processing device sets different DOM ID, as at least one node identifier.
  • the image processing device determines at least one scene to be captured according to the screenshot instruction, or takes all the scenes in the current full-screen interface as at least one scene to be captured by default, and obtains the corresponding scene of at least one scene to be captured. At least one target node ID.
  • each target node identifier in the at least one target node identifier read the content data corresponding to each target node identifier from the content data of the current full-screen page, thereby obtaining at least one target page data.
  • the image processing device locates the content corresponding to the webpage object represented by the node identifier in the overall content data of the current full-screen page according to each node identifier For the storage location of the data, according to the data storage location corresponding to each node identifier, the content data of each webpage object corresponding to it is read, so as to obtain at least one target page data.
  • the image processing device after the image processing device reads at least one target page data, it can generate at least one page image according to the at least one target page data through a webpage rendering function, such as a cavas drawing method.
  • a webpage rendering function such as a cavas drawing method.
  • FIG. 3 is an optional schematic flowchart of an image processing method provided by the embodiment of the present invention.
  • S102 shown in FIG. 1 can be realized through S1021-S1022, and each step will be combined Be explained.
  • the image processing device after the image processing device acquires at least one page image, it can call the image-to-blob conversion method in the web page drawing method to convert at least one page image into at least one blob as at least one file object.
  • the image processing device converts the format of at least one page image into at least one blob object as at least one file object through the canvas.toBlob() method.
  • the image processing device uses canvas.toBlob() instead of the canvas.toDataURL method to convert the page image, because the page image converted by canvas.toDataURL is in base64 encoding format, and its data The volume is larger than the original image data volume, which will occupy more web application cache and cause screenshot errors.
  • each blob in the at least one blob call an object location path creation method in the web application script to create the resource address of each blob as a link path, thereby obtaining at least one link path.
  • calling the URL.createObjectURL() method will return a url string with a hash to specify its corresponding blob object.
  • the image processing device converts at least one page image into a blob object and its corresponding path through canvas.toBlob() and URL.createObjectURL() method, and the converted image and path data It is small in size, takes up very little web application cache, and will not cause errors such as insufficient memory, thereby improving the screenshot performance of web applications.
  • Fig. 4 is a schematic flowchart of an optional image processing method provided by the embodiment of the present invention, S103 shown in Fig. 1 can be realized through S1031-S1033, and each step will be combined Be explained.
  • the image processing device invokes an image object creation method in the webpage application script, such as the new image() method, to create at least one image object in the webpage application cache.
  • the image object created by the new image() method includes information such as the image name and src attribute, wherein the src attribute is required, and the value of the src attribute is the URL of the image object, that is, the URL that references the image object Absolute or relative path to the file.
  • the image processing device may also create at least one image object in other ways supported by the web application, which is selected according to actual conditions, which is not limited in this embodiment of the present invention.
  • each link path in at least one link path as the image source path of each picture object, and store at least one picture object in the webpage application cache; the image source path is to load each picture The path to get content data when object.
  • the image processing device uses the corresponding link path as the image source path of the picture object, that is, each picture object obtains the content when loading in the webpage The path of the data, so that at least one file object can be used as the content data of at least one picture object, and the association between the two can be realized.
  • the image processing apparatus may use each link path as an image source path of each picture object by assigning a value.
  • the image processing device stores at least one picture object in the cache of the webpage application, so that the corresponding picture object can be opened from the local cache of the webpage application in the next visit.
  • the image processing device can call the session data setting method to store the picture name and image source path of at least one picture object in the session data of the web application cache, such as a cookie, so as to obtain at least one link from the session data Path, and then at least one associated picture object is obtained, so as to complete the screenshot and cache saving of the current full-screen page.
  • the session data setting method to store the picture name and image source path of at least one picture object in the session data of the web application cache, such as a cookie, so as to obtain at least one link from the session data Path, and then at least one associated picture object is obtained, so as to complete the screenshot and cache saving of the current full-screen page.
  • the image processing device may store the picture name, URL and valid time of at least one picture object in the cookie by calling the setCookie() method.
  • the corresponding code implementation can be as follows:
  • the above setCookie() method can be implemented through the following code:
  • the image processing device associates the link path of at least one file object with at least one picture object and saves it in the cache, and after saving at least one link path in the session data of the web application cache,
  • the image processing device can directly obtain at least one image object from the cache as a corresponding screenshot of the page, without repeated interception, which reduces the processing workload of the browser and ultimately improves web application. screenshot performance.
  • FIG. 5 is a schematic flowchart of an optional image processing method provided by the embodiment of the present invention.
  • S101 in FIG. 1 can be implemented through S002-S003 , which will be described in conjunction with each step.
  • the image processing device before the image processing device acquires at least one page image, it first checks the session data cached by the web application to determine whether there is at least one image object corresponding to the current full-screen page in the session data.
  • the implementation of the process for the image processing device to check whether there is at least one picture object corresponding to the current full-screen page in the session data cached by the webpage application may be:
  • the image processing device may first call the getCookie() method to obtain the cookie data of the web application before calling the cavas screenshot method to obtain at least one page image, and Check whether at least one image object already exists in the cookie data through the newImg.load method.
  • the above-mentioned getCookie() method can be implemented by the following code:
  • the session data acquisition method when the session data acquisition method is called successfully, for example, the above getCookie('imgsrc') method successfully returns the image object corresponding to imgsrc, indicating that the image object already exists in the session data, and the image The processing device confirms that at least one picture object exists in the session data.
  • the image processing device when the session data acquisition method fails to be invoked, the image processing device confirms that at least one picture object does not exist in the session data.
  • the image processing device acquires at least one page image from the current full-screen page, and implements the current full-screen page image through the method in S102-S103 above. screenshot of .
  • S002 may also be included, as follows:
  • At least one picture object in the session data If there is at least one picture object in the session data, at least one link path corresponding to the at least one picture object is obtained from the session data, and a screenshot of the current full-screen page is completed.
  • the image processing device no longer performs the operation of acquiring at least one page image, and completes the screenshot of the current full-screen page.
  • the image processing device can quickly locate at least one image object to be screenshotted from the cookie of the webpage application, and does not need to perform repeated screenshot processing on the same page, which improves the reproducibility of the cached image. Usability, thereby reducing the workload of taking screenshots of webpage applications, and improving the screenshot performance of webpage applications.
  • FIG. 6 is a schematic flowchart of an optional image processing method provided by the embodiment of the present invention. Based on FIG. 4 or 5, after S1033 or S10, S1034-S1035 can also be executed , will be described in conjunction with each step.
  • the image processing device may receive an access request for at least one target picture in the at least one picture object in the webpage application.
  • At least one target picture represents a screenshot to be extracted in at least one picture object.
  • the image processing apparatus may determine at least one target picture to be extracted according to the picture name carried in the access request.
  • the image processing device can correspondingly read the target file object from at least one file object through the image source path of each target picture object.
  • the image processing device loads each target picture object in the web application according to the content data in the target file object corresponding to each target picture object, and then realizes the extraction, viewing and storage of each target picture object.
  • the image processing device can use at least one file object as the content data of at least one picture object through at least one link path, so that at least one target link path in at least one link path can access, associate loading to load the target image object, and then realize the viewing and saving of the scene you want to screenshot in the cache of the web application, and improve the screenshot performance of the web application.
  • the interface interaction effects may be as shown in FIGS. 7A-7C .
  • the user can browse the content displayed on each screen in the entire web page by sliding up and down on the page.
  • the web application can view the At least one screen of pages in the webpage generates a long screenshot, and displays the save button control 2-1 on the interface, prompting the user to save the long screenshot of the entire webpage generated by the save button control 2-1, or directly background the screenshot. Download and save long screenshots.
  • the web application can also generate a screenshot preview picture corresponding to each screen in the entire web page as shown in Figure 7C, and display it on the current page in the form of a thumbnail, and the user can select one of them by clicking the thumbnail
  • One or more screenshot preview pictures are saved, and the selection is completed by the confirmation button control 2-2; after the user completes the selection by the confirmation button control 2-2, one or more of the confirmation selections can be further confirmed by clicking the save button 2-3 Save the page picture corresponding to each screenshot preview picture.
  • the image processing device may receive a screenshot instruction in the web application.
  • the image processing device may perform S301-S307 on the selected multiple page pictures. Save the screenshot, as shown in Figure 8:
  • the image processing device loads the entire webpage in the browser.
  • the image processing device determines whether there is an array of link addresses in the cache. If it exists, execute S303-S308; if not, skip to S309.
  • the link address array includes at least one link address, at least one link address is the original address of at least one picture object, and the at least one picture object may be at least one screenshot picture corresponding to the entire webpage.
  • the image processing device may form the acquired DOM ID of each screen page into a DOM ID array.
  • the image processing device uses at least one DOM ID included in the DOM ID array as at least one node identifier, and the implementation process of S303 is consistent with the description of S1011, and will not be repeated here.
  • an exemplary code implementation of S303-S305 may be as follows:
  • the image processing device does not perform repeated screenshots, and directly acquires at least one link path.
  • the image processing device can realize multi-screen screenshots and optional screenshots, overcome the technical problem of long rendering time of image screenshots, and improve the reusability of cached screenshots, thereby improving the webpage application. Screenshot performance.
  • the image processing device can use PWA technology to cache specified types of page images.
  • the workbox-sw plug-in is introduced to force caching of pictures under the blob:null/ path.
  • the sample code is as follows:
  • the image processing device can use the PWA technology Service Worker to cache images to achieve a stable and controllable image cache effect.
  • FIG. 9 is a schematic structural diagram of an image processing device provided by an embodiment of the present invention.
  • the image processing device 100 includes an acquisition part 10.
  • the acquiring part 10 is configured to acquire at least one page image of the current full-screen page in the webpage application
  • the conversion part 20 is configured to convert the at least one page image into at least one file object, and create at least one link path of the at least one file object; the at least one file object and the at least one link path one-to-one correspondence;
  • the saving part 30 is configured to create at least one picture object, store the at least one picture object in association with the at least one link path in the webpage application cache, so as to complete the screenshot of the current full-screen page.
  • the conversion part 20 is further configured to convert the at least one page image into at least one blob as the at least one file object; for the at least one blob For each blob in , call the object location path creation method in the webpage application script to create the resource address of each blob as a link path, so as to obtain the at least one link path.
  • the saving part 30 is further configured to call the picture object creation method in the webpage application script to create at least one picture object; for each picture object, the at least one link path Each link path in is used as the image source path of each picture object, and the at least one picture object is stored in the webpage application cache; the image source path is obtained when loading each picture object The path of content data; storing the picture name and image source path of the at least one picture object in the session data of the web application cache, so as to realize the connection between the at least one picture object and the at least one picture object through the session data The link path is associated and saved, so as to complete the screenshot of the current full-screen page.
  • the image processing device 100 further includes a checking part configured to check whether there is at least one session data corresponding to the current full-screen page in the session data cached by the webpage application.
  • Picture object; the acquiring part 10 is further configured to acquire at least one page image of the current full-screen page when the at least one picture object does not exist in the session data.
  • the acquisition part 10 is further configured to check whether at least one image object corresponding to the current full-screen page exists in the session data cached by the web application, and then If the at least one picture object exists in the session data, the at least one link path corresponding to the at least one picture object is obtained from the session data, and the screenshot of the current full-screen page is completed.
  • the acquiring part 10 is further configured to acquire an image corresponding to each scene in the current full-screen page as at least one page image.
  • the acquisition part is further configured to, in the case that a screenshot instruction is received on the current full-screen page, in response to the screenshot instruction, at least one specified by the screenshot instruction.
  • the image corresponding to the scene to be captured is used as the at least one page image.
  • the image processing device 100 further includes an extracting part, and the extracting part is further configured to, after the screenshot of the current full-screen page is completed, in the webpage application , when an access request for at least one target picture in the at least one picture object is received, obtain at least one target file corresponding to the at least one target picture object through the image source path of the at least one target picture object Object; the link path of the target file object is the same as the image source path of the target picture object; according to the at least one target file object, load the at least one target picture object, and then implement the at least one target picture object Object viewing and saving.
  • the image processing device 100 further includes an identification part, and the identification part is configured to, before acquiring at least one page image of the current full-screen page in the web application, Divide at least one scene in the screen page, and set at least one node identification for the at least one scene; the at least one scene is the page scene contained in the current full screen page; the at least one node identification represents the at least At least one data position corresponding to a scene in the current full-screen page; the at least one scene corresponds to the at least one node identifier one-to-one.
  • the acquisition part 10 is also configured to acquire at least one target node identifier corresponding to at least one scene to be captured in the current full-screen page; the at least one scene to be captured is a target screenshot in the at least one scene Scenario: According to each target node identifier in the at least one target node identifier, read the content data corresponding to each target node identifier from the content data of the current full-screen page, thereby obtaining at least one target page data; The at least one page image is generated according to the at least one target page data through a web page rendering function.
  • the conversion part 20 is further configured to call a conversion method for converting a picture into a blob in the webpage drawing method, so as to convert the at least one page image into at least one blob, as The at least one file object.
  • the saving part 30 is further configured to call a session data setting method to store the picture name and image source path of the at least one picture object in the webpage application cache.
  • the checking part is further configured to call a session data acquisition method according to the picture name of the at least one picture object, and extract the at least one picture object from the session data; If the session data acquisition method is called successfully, confirm that the at least one picture object exists in the session data; if the session data acquisition method fails to call, confirm that the session data does not exist the At least one image object.
  • FIG. 10 is a schematic structural diagram of an image processing device 2 provided by an embodiment of the present invention.
  • the image processing device 200 includes : processor 715, memory 716 and communication bus 717, the memory 716 communicates with the processor 715 through the communication bus 717, the memory 716 stores instructions executable by the processor 715, in the instruction In the case of being executed, the processor 715 executes any one of the image processing methods in the foregoing embodiments.
  • An embodiment of the present invention provides a computer-readable storage medium, which is applied to an image processing device.
  • the storage medium stores one or more computer programs, and the one or more computer programs can be executed by one or more processors to implement the following: Any one of the image processing methods in the foregoing embodiments.
  • the embodiments of the present invention may be provided as methods, systems, or computer program products. Accordingly, the present invention can take the form of a hardware embodiment, a software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage and optical storage, etc.) having computer-usable program code embodied therein.
  • a computer-usable storage media including but not limited to disk storage and optical storage, etc.
  • These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing apparatus to operate in a specific manner, such that the instructions stored in the computer-readable memory produce an article of manufacture comprising instruction means, the instructions
  • the device realizes the function specified in one or more procedures of the flowchart and/or one or more blocks of the block diagram.
  • the image processing device After the image processing device acquires at least one page image, it can convert at least one page image into at least one file object, and associate the link path of at least one file object with at least one picture object and It is saved in the cache, thereby overcoming the technical problem of a large amount of cache occupation caused by converting the screenshot image to other encoding formats, and, because at least one image object of the current full-screen page is stored in the cache, in this way, when the user enters the current page again When you want to take a screenshot of the entire screen, the image processing device can directly obtain at least one image object from the cache as a corresponding screenshot of the page without repeated interception, which reduces the processing workload of the browser and ultimately improves the screenshot quality of web applications. performance.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Human Computer Interaction (AREA)
  • Information Transfer Between Computers (AREA)
  • Processing Or Creating Images (AREA)

Abstract

一种图像处理方法及装置、计算机可读存储介质，方法包括：在网页应用中，获取当前整屏页面的至少一个页面图像（S101）；将至少一个页面图像转换为至少一个文件对象，并创建至少一个文件对象的至少一个链接路径（S102）；至少一个文件对象与至少一个链接路径一一对应；创建至少一个图片对象，将至少一个图片对象与至少一个链接路径关联保存在网页应用缓存中，从而完成对当前整屏页面的截图（S103）。上述方法能够提高网页应用的截图性能。

Description

一种图像处理方法及装置、计算机可读存储介质
相关申请的交叉引用
本申请基于申请号为202010902786.1、申请日为2020年09月01日的中国专利申请提出，并要求该中国专利申请的优先权，该中国专利申请的全部内容在此以引入方式并入本申请。
技术领域
本发明涉及终端技术领域，尤其涉及一种图像处理方法及装置、计算机可读存储介质。
背景技术
目前，用户可以使用移动终端上的浏览器，对整个超文本标记语言(Hyper Text Markup Language，HTML)网页上的内容进行浏览。在需要对整个网页中一屏或多屏的页面进行截图保存的情况下，目前的截图方法一般会通过HTML规范中的canvas方法对指定的页面进行截图，之后在浏览器缓存中将截取到的HTML页面转换成base64编码格式的图片，最后将转换后的图片保存在移动终端本地。但由于base64编码格式的图片会占用较大的缓存空间，并且在进行HTML页面向base64图片的转换的情况下需要用到网页绘图中的渲染方法，且页面越复杂渲染的时间就越长。因此目前的截图方法对浏览器缓存消耗大，截图的过程长，从而降低了浏览器缓存的性能。
发明内容
本发明实施例期望提供一种图像处理方法及装置、计算机可读存储介质，能够提高网页应用的截图性能。
本发明的技术方案是这样实现的：
第一方面，本发明实施例提供了一种图像处理方法，包括：
在网页应用中，获取当前整屏页面的至少一个页面图像；
将所述至少一个页面图像转换为至少一个文件对象，并创建所述至少一个文件对象的至少一个链接路径；所述至少一个文件对象与所述至少一个链接路径一一对应；
创建至少一个图片对象，将所述至少一个图片对象与所述至少一个链接路径关联保存在网页应用缓存中，从而完成对所述当前整屏页面的截图。
第二方面，本发明实施例提供了一种图像处理装置，包括获取部分、转换部分与保存部分，其中，
所述获取部分，被配置为在网页应用中，获取当前整屏页面的至少一个页面图像；
所述转换部分，被配置为将所述至少一个页面图像转换为至少一个文件对象，并创建所述至少一个文件对象的至少一个链接路径；所述至少一个文件对象与所述至少一个链接路径一一对应；
所述保存部分，被配置为创建至少一个图片对象，将所述至少一个图片对象与所述至少一个链接路径关联保存在网页应用缓存中，从而完成对所述当前整屏页面的截图。
第三方面，本发明实施例提供了一种图像处理装置，所述图像处理装置包括存储器、处理器以及通信总线，所述存储器通过所述通信总线与所述处理器进行通信，所述存储器存储所述处理器可执行的一个或者多个程序，在所述一个或者多个程序被执行的情况下，所述处理器执行如上述任一种图像处理方法。
第四方面，本发明实施例提供了一种计算机可读存储介质，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现上述任一种图像处理的方法。
本发明实施例提供了一种图像处理方法及装置、计算机可读存储介质，该方法包括：在网页应用中，获取当前整屏页面的至少一个页面图像；将至少一个页面图像转换为至少一个文件对象，并创建至少一个文件对象的至少一个链接路径；至少一个文件对象与至少一个链接路径一一对应；创建至少一个图片对象，将至少一个图片对象与至少一个链接路径关联保存在网页应用缓存中，从而完成对当前整屏页面的截图。通过本发明实施例中的方法，图像处理装置在获取到至少一个页面图像后，可以将至少一个页面图像转换为至少一个文件对象，并将至少一个文件对象的链接路径关联到至少一个图片对象并在缓存中保存，从而克服了将截图图片转换为其他编码格式所造成的大量缓存占用的技术问题，并且，由于缓存中保存了当前整屏页面的至少一个图片对象，这样，当在用户再次进入当前整屏页面想要截图的情况下，图像处理装置可以直接从缓存中获取至少一个图片对象作为对应的页面截图，不需要重复截取，减少了浏览器处理的工作量，最终提高了网页应用的截图性能。
附图说明
图1为本发明实施例提供的图像处理方法的一个可选的流程示意图；
图2为本发明实施例提供的图像处理方法的一个可选的流程示意图；
图3为本发明实施例提供的图像处理方法的一个可选的流程示意图；
图4为本发明实施例提供的图像处理方法的一个可选的流程示意图；
图5为本发明实施例提供的图像处理方法的一个可选的流程示意图；
图6为本发明实施例提供的图像处理方法的一个可选的流程示意图；
图7A为本发明实施例提供的网页应用截图过程的界面示意图一；
图7B为本发明实施例提供的网页应用截图过程的界面示意图二；
图7C为本发明实施例提供的网页应用截图过程的界面示意图三；
图8为本发明实施例提供的图像处理方法的一个可选的流程示意图；
图9为本发明实施例提供的图像处理装置的一个结构示意图一；
图10为本发明实施例提供的图像处理装置的一个结构示意图二。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。
对本发明实施例进行进一步详细说明之前，对本发明实施例中涉及的名词和术语进行说明，本发明实施例中涉及的名词和术语适用于如下的解释。
canvas：HTML中的canvas元素能够通过JavaScript脚本在网页上绘制图像。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
<a>标签：<a>是HTML语言标签。<a>标签定义超链接，用于从一个页面链接到另一个页面。
<img>标签：在html中，<img>标签用于在网页中嵌入一幅图像。<img>标签嵌入的图像并不是插入到网页中，而是链接到网页中。<img>标签的作用是为被引用的图像创建占位符。
base64编码：base64是一种基于64个可打印字符来表示二进制数据的表示方法。base64要求将每三个8bits字节转换为四个6bit的字节(3*8＝4*6＝24)，然后将转换后的6bit的高位添加2个0，组成4个8bit的字节，再根据这4个8bit字节的十进制在索引表中查找对应的值，此时得到的结果就是Base64值。因此，理论上，经过base64编码转换后的字符串的长度要比原来的字符串长度长1/3。
文档对象模型(Document Object Model，DOM)，DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。DOM树结点的属性表征页面的基本内容和结构信息。
渐进式WEB应用(Progressive Web App，PWA)：能够在移动端利用标准化框架workbox-sw模拟一些原生功能，让网页应用呈现和原生应用相似的体验。
二进制大对象(Binary Large Object，Blob)：Blob对象是类似文件对象的二进制数据，可以像操作文件对象一样操作Blob对象。
目前，在一些网络宣传页面或者HTML 5动画中，如网络应用的年度账单，或调查报告等的一整屏页面上通常会包括多个场景，每个场景中包含很多的图片元素，需要通过在终端设备上进行滑动查看来完成浏览。当用户在浏览一个多场景整屏页面，想要对其中的每一个场景进行截图操作，并保存图片到本地的情况下，目前的截图方法是通过canvas绘图方法将所选取到的当前场景的页面进行截图，再将图片转成base64编码格式，接下来在图片外围包裹一个<a>标签，使用JavaScript脚本模拟点击事件把图片保存到本地；或者通过<img>标签唤起浏览器原生方法提示用户长按图片，来把图片保存到本地。而当本地图片丢失，想再次保存时候，用户还要进入当前浏览页面，进行上面一系列的操作。
目前的方法中，在将图片转成base64编码格式过程中会用到canvas渲染，页面越复杂canvas渲染的时间就越长。并且，base64图片编码是一个很长的字符串，编码的全部大小获取超过该图片本身的大小，但浏览器Cookie或者浏览器本地的缓存空间都不大。可以看出，目前的浏览器截图保存方法，过程缓慢、对浏览器缓存要求高，浏览器性能消耗大；因而在实际应用中，目前的截图方法由于缓存空间的限制经常出现存储空间不足的报错，无法进行多张图片同时截图保存，一般情况下移动端浏览器对9张以上的网页截图就无法在同时缓存中处理了。并且，目前的截图方法所得到的截图一旦出现丢失，在用户想要再次保存截图的情况下，还要进入当前浏览页面，进行上述一系列的操作，从而进一步加剧了浏览器性能消耗。
参见图1，图1是本发明实施例提供的图像处理方法的一个可选的流程示意图，将结合图1示出的步骤进行说明。
S101、在网页应用中，获取当前整屏页面的至少一个页面图像。
本发明实施例中提供的图像处理方法适用于在网页应用上进行截图保存的场景，示例性的，通过终端上的浏览器对一个整屏页面中的各个场景进行截图保存，或是通过支持HTML的应用或客户端，对一个链接中多屏显示的页面内容进行截图的场景等。
S101中，在用户在网页应用如浏览器中浏览多场景的整屏页面的情况下，可以通过滑动页面对整屏页面中多个场景进行浏览，在当前整屏页面加载完毕后，图像处理装置可以根据需要，对当前整屏页面中包含的场景进行截图，将截取的至少一个图像作为至少一个页面图像。
本发明实施例中，图像处理装置可以在网页应用的当前整屏页面上接收到截图指令的情况下，响应于截图指令，将截图指令指定的至少一个待截图场景所对应的图像作为至少一个页面图像。
本发明实施例中，图像处理装置也可以在当前整屏页面加载完成的情 况下，获取当前整屏页面中每个场景对应的图像，作为至少一个页面图像，这样，图像处理装置可以在用户发出截图指令之前，就在后台对当前整屏页面中的每个场景进行无感知截图操作，以缩短用户发出截图指令后的等待时间。
在一些实施例中，图像处理装置可以通过浏览器中的cavas截图方法，对当前整屏页面中的全部场景或部分场景进行截屏，从而获取到至少一个页面图像。具体的，可以调用html2canvas()方法，读取每个待截屏场景的样式和内容信息，根据每个待截屏场景的样式和内容信息渲染生成一个图片，从而得到至少一个页面图像。在另一些实施例中，图像处理装置也可以通过Flashcanvas或ExplorerCanvas方法来得到至少一个页面图像，具体的根据实际情况进行选择，本发明实施例不做限定。
本发明实施例中，cavas截图方法通常得到的是png格式的图片，也可以根据实际需要生成其他格式的图片，具体的根据实际情况进行选择，本发明实施例不做限定。
需要说明的是，本发明实施例中，至少一个页面图像是在当前整屏页面中的整屏页面内容全部加载完成后才进行获取的，因此至少一个页面图像都是在网页应用的本地创建或生成的图像。
S102、将至少一个页面图像转换为至少一个文件对象，并创建至少一个文件对象的至少一个链接路径；至少一个文件对象与至少一个链接路径一一对应。
S102中，图像处理装置得到至少一个页面图像之后，可以将图片格式的至少一个页面图像转换为至少一个文件对象，以实现通过在HTML页面中操作文件对象的方式对至少一个页面图像进行访问和内容读取等操作。
在一些实施例中，图像处理装置可以通过canvas.toBlob()方法，将至少一个页面图像转换为至少一个blob对象，将至少一个blob对象作为至少一个文件对象，在其他的一些实施例中，图像处理装置也可以通过其他方法将至少一个页面图像转换为其他文件类型的网页对象，具体的根据实际情况进行选择，本发明实施例不做限定。
S102中，图像处理装置将至少一个页面图像转换为至少一个文件对象之后，为每个文件对象创建一个链接路径。
在一些实施例中，在至少一个文件对象为至少一个blob对象的情况下，图像处理装置可以通过URL.createObjectURL()方法，为每个blob对象创建统一资源定位符(Uniform Resource Locator，URL)作为每个blob对象对应的链接路径，从而得到至少一个链接路径。
本发明实施例中，至少一个链接路径中的每个链接路径指向其对应的文件对象，因此，图像处理装置可以通过至少一个链接路径，将至少一个文件对象与其他类型的网页对象，如图片对象相关联，通过指定链接路径的方式使得其他类型的网页对象可以引用至少一个文件对象中的数据作为 源数据，进而通过对其他类型的网页对象的操作扩展出对至少一个文件对象的多样化的处理方式。
S103、创建至少一个图片对象，将至少一个图片对象与至少一个链接路径关联保存在网页应用缓存中，从而完成对当前整屏页面的截图。
S103中，图像处理装置会在网页应用的本地缓存中创建至少一个图片类型的对象，即至少一个图片对象，并将至少一个链接路径指向至少一个图片对象，从而将至少一个链接路径与至少一个图片对象相关联；图像处理装置将至少一个链接路径与至少一个图片对象共同保存在网页应用缓存中，从而完成对当前整屏页面的截图。
在一些实施例中，图像处理装置可以通过new Image()方法创建至少一个图片对象。对于一个new Image()创建的图片对象，图像处理装置可以将该图片对象的src属性赋值为一个链接路径，这样，在该图片对象被加载的情况下，可以通过对应的链接路径访问到该链接路径对应的文件对象，将文件对象中的内容作为所要在该图片对象中加载的图片的内容数据，从而实现图片对象、链接路径以及文件对象的互相关联。
S103中，为了进一步提高截图处理的速度，图像处理装置还可以将至少一个链接路径存储在网页应用的cookie中，这样，当图像处理装置在对当前整屏页面进行截图之前，可以通过检查网页应用的cookie中是否已有所要截图的至少一个链接路径，并通过至少一个链接路径直接获取到历史缓存的至少一个图片对象，不需对同一页面进行重复的截图处理。
可以理解的是，本发明实施例中，图像处理装置在获取到至少一个页面图像后，可以将至少一个页面图像转换为至少一个文件对象，并将至少一个文件对象的链接路径关联到至少一个图片对象并在缓存中保存，从而克服了将截图图片转换为其他编码格式所造成的大量缓存占用的技术问题，并且，由于缓存中保存了当前整屏页面的至少一个图片对象，这样，当用户再次进入当前整屏页面想要截图的情况下，图像处理装置可以直接从缓存中获取至少一个图片对象作为对应的页面截图，不需要重复截取，减少了浏览器处理的工作量，最终提高了网页应用的截图性能。
参见图2，图2是本发明实施例提供的图像处理方法的一个可选的流程示意图，基于图1，图1中示出的S101可以通过S1011-S1014来实现，将结合各步骤进行说明。
S1011、从当前整屏页面中划分出至少一个场景，并对至少一个场景设置至少一个节点标识；至少一个节点标识表征至少一个场景在当前整屏页面中对应的至少一个布局点；至少一个场景与至少一个节点标识一一对应。
S1011中，对于加载完成的当前整屏页面，图像处理装置可以依据其显示的样式或内容，从中划分出至少一个场景，以便于后续从至少一个场景中指定所要截图的场景。相应的，图像处理装置对至少一个场景设置至少一个节点标识；至少一个场景与至少一个节点标识一一对应。
本发明实施例中，至少一个场景为当前整屏页面中包含的页面场景；如当前整屏页面中包含的不同位置上的图像或文字内容，或当前整屏页面中包含的每一屏页面等等；
本发明实施例中，至少一个节点标识表征至少一个场景在当前整屏页面中对应的至少一个数据位置。也就是说，节点标识是其对应的网页对象的内容数据在当前整屏页面对应的整体内容数据中的存放位置。示例性的，当前整屏页面对应的整体内容数据可以是一个HTML文本，浏览器在对HTML文本进行解析的情况下，会根据HTML文本中各个网页对象的关联关系构建一颗DOM树，其中，至少一个节点标识可以是当前整屏页面中DOM树中的文档节点，每个DOM节点下存放着每个网页对象对应的内容数据，每个DOM节点在DOM树中与其他DOM节点互相关联。
在一些实施例中，图像处理装置可以在当前整屏页面中，设置DOM样式为一屏展示，也即将整屏页面中的每一屏页面作为一个场景；图像处理装置为每一屏设置不同的DOM ID，作为至少一个节点标识。
S1012、在当前整屏页面中，获取至少一个待截图场景对应的至少一个目标节点标识；至少一个待截图场景为至少一个场景中的目标截图场景。
S1012中，在当前整屏界面中，图像处理装置根据截图指令确定出至少一个待截图场景，或默认将当前整屏界面中的全部场景作为至少一个待截图场景，获取至少一个待截图场景对应的至少一个目标节点标识。
S1013、根据至少一个目标节点标识中的每个目标节点标识，从当前整屏页面的内容数据中读取出每个目标节点标识对应的内容数据，从而得到至少一个目标页面数据。
本发明实施例中，对于至少一个节点标识中的每个节点标识，图像处理装置根据每个节点标识，定位出该节点标识所代表的网页对象在当前整屏页面的整体内容数据中对应的内容数据的存放位置，根据每个节点标识对应的数据存放位置，对其对应的每个网页对象的内容数据进行读取，从而得到至少一个目标页面数据。
S1014、通过网页渲染功能，根据至少一个目标页面数据，生成至少一个页面图像。
本发明实施例中，图像处理装置读取到至少一个目标页面数据之后，可以通过网页渲染功能，如cavas绘图方法，根据至少一个目标页面数据，生成至少一个页面图像。
可以理解的是，本发明实施例中，可以通过预设不同样式的节点标识，来对当前整屏页面进行不同形式的截图处理，从而提高了页面截图的灵活性。
本发明实施例中，参见图3，图3为本发明实施例提供的一种图像处理方法的可选的流程示意图，图1中示出的S102可以通过S1021-S1022来实现，将结合各步骤进行说明。
S1021、将至少一个页面图像转换为至少一个二进制大对象，作为至少一个文件对象。
S1021中，当图像处理装置获取到至少一个页面图像之后，可以调用网页绘图方法中图片转二进制大对象的转换方法，实现将至少一个页面图像转换为至少一个二进制大对象，作为至少一个文件对象。
在一些实施例中，图像处理装置通过canvas.toBlob()方法，对至少一个页面图像进行格式转换，转换为至少一个blob对象，作为至少一个文件对象。
S1021中，与目前的截图方法相比，图像处理装置使用canvas.toBlob()，而非canvas.toDataURL方法去转化页面图像，是因为canvas.toDataURL所转化的页面图像是base64的编码格式，其数据体积比原图片数据体积要大，会占用较多的网页应用缓存，引起截图报错。
S1022、对于至少一个二进制大对象中的每个二进制大对象，调用网页应用脚本中的对象位置路径创建方法创建每个二进制大对象的资源地址作为链接路径，从而得到至少一个链接路径。
S1022中、图像处理装置将至少一个页面图像转换为至少一个blob对象之后，对于每个blob对象，调用URL.createObjectURL()方法，创建每个blob对象对应的URL地址作为该blob对象的链接路径，从而得到至少一个链接路径。
本发明实施例中，调用URL.createObjectURL()方法会返回一段带hash的url字符串，用以指定其对应的blob对象。
可以理解的是，本发明实施例中，图像处理装置通canvas.toBlob()配合URL.createObjectURL()方法将至少一个页面图像转化为blob对象及其对应的路径，被转化后的图片和路径数据体积很小，占用网页应用缓存很少，不会引起内存不足等报错，从而提高了网页应用的截图性能。
本发明实施例中，参见图4，图4为本发明实施例提供的一种图像处理方法的可选的流程示意图，图1中示出的S103可以通过S1031-S1033来实现，将结合各步骤进行说明。
S1031、调用网页应用脚本中的图片对象创建方法创建至少一个图片对象。
S1031中，图像处理装置调用网页应用脚本中的图片对象创建方法，如new image()方法，在网页应用缓存中创建至少一个图片对象。
本发明实施例中，new image()方法创建的图片对象包含图片名称和src属性等信息，其中，src属性是必需的，src属性的值是该图片对象的URL，也就是引用该图片对象的文件的绝对路径或相对路径。
在一些实施例中，图像处理装置也可以通过网页应用支持的其他方式创建至少一个图片对象，具体的根据实际情况进行选择，本发明实施例不做限定。
S1032、对于每个图片对象，将至少一个链接路径中的每个链接路径作为每个图片对象的图像源路径，并将至少一个图片对象存入网页应用缓存中；图像源路径为加载每个图片对象时获取内容数据的路径。
S1032中，图像处理装置创建出至少一个图片对象后，对于每个图片对象，图像处理装置将对应的链接路径作为该图片对象的图像源路径，也即每个图片对象在网页中加载时获取内容数据的路径，从而实现了将至少一个文件对象作为至少一个图片对象的内容数据，实现了两者之间的关联。
S1032中，图像处理装置可以通过赋值的方式，将每个链接路径作为每个图片对象的图像源路径。
S1032中，图像处理装置将至少一个图片对象存入网页应用缓存中，以使下次访问时可以从网页应用的本地缓存中打开对应的图片对象。
S1033、将至少一个图片对象的图片名称与图像源路径存入网页应用缓存的会话数据中，以实现通过会话数据将至少一个图片对象与至少一个链接路径关联保存，从而完成对当前整屏页面的截图。
S1033中，图像处理装置可以调用会话数据设置方法，实现将至少一个图片对象的图片名称与图像源路径存入网页应用缓存的会话数据，如cookie中，以实现从会话数据中获取到至少一个链接路径，进而获取到其关联的至少一个图片对象，从而完成对当前整屏页面的截图和缓存保存。
在一些实施例中，图像处理装置可以通过调用setCookie()方法，将至少一个图片对象的图片名称、URL和有效时间存入cookie。对应的代码实现方式可以如下所示：
canvas.toBlob(function(blobObj){
let imgs＝new Image()；//创建图片对象
let src＝window.URL.createObjectURL(blobObj)；//创建blob对象的链接路径
imgs.src＝src；//使用链接路径对图片对象的图像源路径赋值
screenShotCut[ary[i].component]＝src；
//把链接路径存入cookie
setCookie(‘imgSrc’,JSON.stringify(screenShotCut))
})
在一些实施例中，可以通过如下代码，实现上述setCookie()方法：
Figure PCTCN2021083678-appb-000001
可以理解的是，本发明实施例中，图像处理装置将至少一个文件对象的链接路径关联到至少一个图片对象并在缓存中保存，并在网页应用缓存 的会话数据中保存至少一个链接路径之后，在用户再次进入当前整屏页面的情况下，图像处理装置可以直接从缓存中获取至少一个图片对象作为对应的页面截图，不需要重复截取，减少了浏览器处理的工作量，最终提高了网页应用的截图性能。
本发明实施例中，参见图5，图5为本发明实施例提供的一种图像处理方法的可选的流程示意图，图1中的S101可以通过S002-S003实现，将结合各步骤进行说明。
S002、检查网页应用缓存的会话数据中是否存在当前整屏页面对应的至少一个图片对象。
S002中，图像处理装置获取至少一个页面图像之前，会首先对网页应用缓存的会话数据进行检查，确定会话数据中是否存在当前整屏页面对应的至少一个图片对象。
本发明实施例中，图像处理装置检查网页应用缓存的会话数据中是否存在当前整屏页面对应的至少一个图片对象的过程实现可以是：
S0021、根据至少一个图片对象的图片名称，调用会话数据获取方法，执行从会话数据中提取至少一个图片对象。
在一些实施例中，当用户通过网页应用访问当前整屏页面的情况下，图像处理装置在调用cavas截图方法获取至少一个页面图像之前，可以首先调用getCookie()方法获取网页应用的cookie数据，并通过newImg.load方法在cookie数据中检查是否已经存在了至少一个图片对象。
在一些实施例中，图像处理装置检查网页应用缓存中是否存在至少一个链接路径对应的至少一个图片对象可以如下所示：
Figure PCTCN2021083678-appb-000002
Figure PCTCN2021083678-appb-000003
在一些实施例中，上述的getCookie()方法可以通过如下代码实现：
Figure PCTCN2021083678-appb-000004
S0022、在会话数据获取方法调用成功的情况下，确认会话数据中存在至少一个图片对象。
本发明实施例中，在会话数据获取方法调用成功的情况下，示例性的，上述getCookie(‘imgsrc’)方法成功返回了imgsrc对应的图片对象，说明该图片对象在会话数据中已经存在，图像处理装置确认会话数据中存在至少一个图片对象。
S0023、在会话数据获取方法调用失败的情况下，确认会话数据中不存在至少一个图片对象。
本发明实施例中，在会话数据获取方法调用失败的情况下，图像处理装置确认会话数据中不存在至少一个图片对象。
S003、在会话数据中不存在至少一个图片对象的情况下，获取当前整屏页面的至少一个页面图像。
本发明实施例中，在会话数据中不存在至少一个图片对象的情况下，图像处理装置从当前整屏页面中获取至少一个页面图像，并通过上述S102-S103中的方法实现对当前整屏页面的截图。
本发明实施例中，如图5所示，S002之后，还可以包括S004，如下：
S004、在会话数据中存在至少一个图片对象的情况下，从会话数据中获取至少一个图片对象对应的至少一个链接路径，完成对当前整屏页面的截图。
S004中，在网页应用缓存中存在至少一个图片对象的情况下，图像处理装置不再进行获取至少一个页面图像的操作，完成对当前整屏页面的截图。
可以理解的是，本发明实施例中，图像处理装置可以从网页应用的cookie中快速定位出所要截图的至少一个图片对象，不需对同一页面进行重复的截图处理，提高了缓存图片的可复用性，从而减少了网页应用截图 的工作量，提高了提高网页应用的截图性能。
本发明实施例中，参见图6，图6为本发明实施例提供的一种图像处理方法的可选的流程示意图，基于图4或图5，在S1033或S10之后，还可以执行S1034-S1035，将结合各步骤进行说明。
S1034、在网页应用中，接收到对至少一个图片对象中的至少一个目标图片的访问请求的情况下，通过至少一个目标图片对象的图像源路径，获取至少一个目标图片对象对应的至少一个目标文件对象；目标文件对象的链接路径与目标图片对象的图像源路径相同。
S1034中，对于在网页应用中查看和进一步保存网页截图的情况，图像处理装置可以在网页应用中，接收对至少一个图片对象中的至少一个目标图片的访问请求。
本发明实施例中，至少一个目标图片表征至少一个图片对象中的待提取截图。图像处理装置可以根据访问请求中携带的图片名称确定出待提取的至少一个目标图片。
S1034中，由于文件对象的链接路径与图片对象图像源路径是同一个路径，因此图像处理装置可以通过每个目标图片对象的图像源路径，从至少一个文件对象中对应读取出目标文件对象。
S1035、根据至少一个目标文件对象，加载出至少一个目标图片对象，进而实现对至少一个目标图片对象的查看与保存。
S1035中，图像处理装置根据每个目标图片对象对应的目标文件对象中的内容数据，在网页应用中加载出每个目标图片对象，进而实现对每个目标图片对象的提取、查看与保存。
可以理解的是，本发明实施例中，图像处理装置可以通过至少一个链接路径，将至少一个文件对象作为至少一个图片对象的内容数据，这样，可以通过对至少一个链接路径中至少一个目标链接路径的访问，关联加载出想要加载目标图片对象，进而实现了在网页应用的缓存中对想要截图的场景的查看与保存，提高了网页应用的截图性能。
下面，将说明本发明实施例在一个实际的应用场景中的示例性应用。
在本发明的一些实施例中，在用户通过浏览器或者网页应用，对总结报告类的页面，或者活动调查类的页面进行浏览的情况下，界面交互效果可以如图7A-图7C所示。图7A中，用户可以通过在页面中上下滑动来对整个网页中的每一屏页面显示的内容进行浏览，在滑动浏览到最末页的情况下，如图7B所示，网页应用可以将整个网页中的至少一屏页面全部生成一个长截图，并在界面上显示保存按钮控件2-1，提示用户通过保存按钮控件2-1生成的整个网页的长截图进行保存，或是直接后台将该长截图下载保存。网页应用也可以如图7C所示，将整个网页中的每一屏页面都对应生成一副截图预览图片，并以缩略图的形式显示在当前页面，用户可以通过点击缩略图选择出其中的一个或多个的截图预览图片进行保存，并通过确认 按钮控件2-2完成选择；当用户通过确认按钮控件2-2完成选择后，可以进一步通过点击保存按钮2-3对确认选择的一个或多个截图预览图片对应的页面图片进行保存。
本发明实施例中，当用户在图7B或图7C所示的界面上点击了保存控件2-1或保存控件2-3后，图像处理装置可以在网页应用中接收到截图指令。示例性的，在用户在图7C所示的界面上选择了多个页面图片并点击了保存控件2-3的情况下，图像处理装置可以通过S301-S307，对所选择的多个页面图片进行截屏保存，如图8所示：
S301、页面加载。
S301中，图像处理装置在浏览器中加载出整个网页。
S302、判断缓存中是否存在链接地址数组。
S302中，在整个网页加载完成后，图像处理装置判断缓存中是否存在链接地址数组。若存在，执行S303-S308，若不存在，跳转执行S309。
S302中，链接地址数组中包含至少一个链接地址，至少一个链接地址为至少一个图片对象的原地址，至少一个图片对象可以是整个网页对应的至少一个截图图片。
其中，S302的实现过程与S002描述一致，此处不再赘述。
S303、获取整个网页中每一屏页面对应的DOM ID。
S303中，图像处理装置可以将获取到的每一屏页面的DOM ID组成DOM ID数组。
S303中，图像处理装置将DOM ID数组中包含的至少一个DOM ID作为至少一个节点标识，S303的实现过程与S1011描述一致，此处不再赘述。
S304、对每个DOM ID进行Canvas截图，得到至少一个截图图片。
S304的实现过程与S1012-S1014描述一致，此处不再赘述。
S305、通过canvas.toBlob()方法将至少一个截图图片转成至少一个blob对象。
其中，S305的实现过程与S1021描述一致，此处不再赘述。
在一些实施例中，S303-S305示例性的代码实现可以如下所示：
Figure PCTCN2021083678-appb-000005
Figure PCTCN2021083678-appb-000006
S306、通过URL.createObjectURL()方法创建至少一个blob对象的至少一个链接路径。
其中，S306的实现过程与S1022描述一致，此处不再赘述。
S307、通过new Image()方法创建至少一个图片对象img，使用至少一个链接路径对至少一个img,src赋值，将至少一个imgs存入浏览器缓存。
其中，S307的过程描述与S1031-S1032一致，此处不再赘述。
S308、将至少一个链接路径以数组的形式存入cookie。
其中，S308的实现过程与S1033描述一致，此处不再赘述。
S309、从缓存中获取至少一个链接路径。
S309中，在缓存中存在至少一个链接路径的情况下，图像处理装置不再进行重复截图，直接获取至少一个链接路径。
S310、根据至少一个链接路径从缓存中提取出至少一个图片对象，根据需求对至少一个图片对象进行进一步的保存。
其中，S310的实现过程与S1034-S1035描述一致，此处不再赘述。
可以理解的是，通过以上操作，图像处理装置可以实现多屏截图和可选截图，克服图片截屏渲染时间长的技术问题，并提高了已缓存截图的可复用性，从而提高了网页应用的截图性能。
本发明实施例中，进一步的，图像处理装置可以通过PWA的技术来缓存指定类型的页面图像，具体地，引入workbox-sw插件强制缓存blob:null/路径下的图片，示例代码如下：
importScripts(‘workbox-sw.prod.v1.1.0.js’)；
const workbox＝new self.WorkboxSW()；
//匹配blob:null/路径下任何的请求进行缓存
workBox.router.registerRoute(‘blob:null/(.*)’,workbox.stragtegies.cacheFirst())
可以理解的是，在图像处理装置通过网页应用缓存如浏览器缓存空间对截屏图片进行保存的情况下，可能存在时效性并且用户行为不可知等不稳定性因素，图像处理装置可以用PWA技术中的Service Worker来缓存图片，以达到稳定且可控的图片缓存效果。
本发明实施例提供一种图像处理装置，对应于一种图像处理方法，图9为本发明实施例提供的一种图像处理装置结构示意图一，如图9所示，图像处理装置100包括获取部分10、转换部分20与保存部分30，其中，
所述获取部分10，被配置为在网页应用中，获取当前整屏页面的至少一个页面图像；
所述转换部分20，被配置为将所述至少一个页面图像转换为至少一个 文件对象，并创建所述至少一个文件对象的至少一个链接路径；所述至少一个文件对象与所述至少一个链接路径一一对应；
所述保存部分30，被配置为创建至少一个图片对象，将所述至少一个图片对象与所述至少一个链接路径关联保存在网页应用缓存中，从而完成对所述当前整屏页面的截图。
在本发明的一些实施例中，所述转换部分20，还被配置为将所述至少一个页面图像转换为至少一个二进制大对象，作为所述至少一个文件对象；对于所述至少一个二进制大对象中的每个二进制大对象，调用网页应用脚本中的对象位置路径创建方法创建所述每个二进制大对象的资源地址作为链接路径，从而得到所述至少一个链接路径。
在本发明的一些实施例中，所述保存部分30，还被配置为调用所述网页应用脚本中的图片对象创建方法创建至少一个图片对象；对于每个图片对象，将所述至少一个链接路径中的每个链接路径作为所述每个图片对象的图像源路径，并将所述至少一个图片对象存入所述网页应用缓存中；所述图像源路径为加载所述每个图片对象时获取内容数据的路径；将所述至少一个图片对象的图片名称与图像源路径存入所述网页应用缓存的会话数据中，以实现通过所述会话数据将所述至少一个图片对象与所述至少一个链接路径关联保存，从而完成对所述当前整屏页面的截图。
在本发明的一些实施例中，所述图像处理装置100还包括检查部分，所述检查部分，被配置为检查所述网页应用缓存的会话数据中是否存在所述当前整屏页面对应的至少一个图片对象；所述获取部分10，还被配置为在所述会话数据中不存在所述至少一个图片对象的情况下，获取所述当前整屏页面的至少一个页面图像。
在本发明的一些实施例中，所述获取部分10，还被配置为所述检查所述网页应用缓存的会话数据中是否存在所述当前整屏页面对应的至少一个图片对象之后，在所述会话数据中存在所述至少一个图片对象的情况下，从所述会话数据中获取所述至少一个图片对象对应的所述至少一个链接路径，完成对所述当前整屏页面的截图。
在本发明的一些实施例中，所述获取部分10，还被配置为在所述当前整屏页面加载完成的情况下，获取所述当前整屏页面中每个场景对应的图像，作为至少一个页面图像。
在本发明的一些实施例中，所述获取部分，还被配置为在所述当前整屏页面上接收到截图指令的情况下，响应于所述截图指令，将所述截图指令指定的至少一个待截图场景所对应的图像作为所述至少一个页面图像。
在本发明的一些实施例中，所述图像处理装置100还包括提取部分，所述提取部分，还被配置为在所述完成对所述当前整屏页面的截图之后，在所述网页应用中，接收到对所述至少一个图片对象中的至少一个目标图片的访问请求的情况下，通过所述至少一个目标图片对象的图像源路径， 获取所述至少一个目标图片对象对应的至少一个目标文件对象；所述目标文件对象的链接路径与所述目标图片对象的图像源路径相同；根据所述至少一个目标文件对象，加载出所述至少一个目标图片对象，进而实现对所述至少一个目标图片对象的查看与保存。
在本发明的一些实施例中，所述图像处理装置100还包括标识部分，所述标识部分，被配置为所述在网页应用中，获取当前整屏页面的至少一个页面图像之前，从当前整屏页面中划分出至少一个场景，并对所述至少一个场景设置至少一个节点标识；所述至少一个场景为所述当前整屏页面中包含的页面场景；所述至少一个节点标识表征所述至少一个场景在所述当前整屏页面中对应的至少一个数据位置；所述至少一个场景与所述至少一个节点标识一一对应。
所述获取部分10，还被配置为在所述当前整屏页面中，获取至少一个待截图场景对应的至少一个目标节点标识；所述至少一个待截图场景为所述至少一个场景中的目标截图场景；根据所述至少一个目标节点标识中的每个目标节点标识，从所述当前整屏页面的内容数据中读取出每个目标节点标识对应的内容数据，从而得到至少一个目标页面数据；通过网页渲染功能，根据所述至少一个目标页面数据，生成所述至少一个页面图像。
在本发明的一些实施例中，所述转换部分20，还被配置为调用网页绘图方法中图片转二进制大对象的转换方法，实现将所述至少一个页面图像转换为至少一个二进制大对象，作为所述至少一个文件对象。
在本发明的一些实施例中，所述保存部分30，还被配置为调用会话数据设置方法，实现将所述至少一个图片对象的图片名称与图像源路径存入所述网页应用缓存中。
在本发明的一些实施例中，所述检查部分，还被配置为根据所述至少一个图片对象的图片名称，调用会话数据获取方法，执行从所述会话数据中提取所述至少一个图片对象；在所述会话数据获取方法调用成功的情况下，确认所述会话数据中存在所述至少一个图片对象；在所述会话数据获取方法调用失败的情况下，确认所述会话数据中不存在所述至少一个图片对象。
本发明实施例提供了一种图像处理装置，对应于一种图像处理方法，图10为本发明实施例提供的一种图像处理装置结构示意图二，如图10所示，该图像处理装置200包括：处理器715、存储器716和通信总线717，所述存储器716通过所述通信总线717与所述处理器715进行通信，所述存储器716存储所述处理器715可执行的指令，在所述指令被执行的情况下，通过所述处理器715执行如前述实施例的任意一种图像处理方法。
本发明实施例提供了一种计算机可读存储介质，应用于图像处理装置，存储介质存储有一个或者多个计算机程序，一个或者多个计算机程序可被一个或者多个处理器执行，以实现如前述实施例的任意一种图像处理方法。
本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用硬件实施例、软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器和光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
以上所述，仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。
工业实用性
通过本发明实施例中的方法，图像处理装置在获取到至少一个页面图像后，可以将至少一个页面图像转换为至少一个文件对象，并将至少一个文件对象的链接路径关联到至少一个图片对象并在缓存中保存，从而克服了将截图图片转换为其他编码格式所造成的大量缓存占用的技术问题，并且，由于缓存中保存了当前整屏页面的至少一个图片对象，这样，在用户再次进入当前整屏页面想要截图的情况下，图像处理装置可以直接从缓存中获取至少一个图片对象作为对应的页面截图，不需要重复截取，减少了浏览器处理的工作量，最终提高了网页应用的截图性能。

Claims (15)

  1. 一种图像处理方法，包括：
    在网页应用中，获取当前整屏页面的至少一个页面图像；
    将所述至少一个页面图像转换为至少一个文件对象，并创建所述至少一个文件对象的至少一个链接路径；所述至少一个文件对象与所述至少一个链接路径一一对应；
    创建至少一个图片对象，将所述至少一个图片对象与所述至少一个链接路径关联保存在网页应用缓存中，从而完成对所述当前整屏页面的截图。
  2. 根据权利要求1所述的方法，其中，所述将所述至少一个页面图像转换为至少一个文件对象，并创建所述至少一个文件对象的至少一个链接路径，包括：
    将所述至少一个页面图像转换为至少一个二进制大对象，作为所述至少一个文件对象；
    对于所述至少一个二进制大对象中的每个二进制大对象，调用网页应用脚本中的对象位置路径创建方法创建所述每个二进制大对象的资源地址作为链接路径，从而得到所述至少一个链接路径。
  3. 根据权利要求1所述的方法，其中，所述创建至少一个图片对象，将所述至少一个图片对象与所述至少一个链接路径关联保存在网页应用缓存中，从而完成对所述当前整屏页面的截图，包括：
    调用所述网页应用脚本中的图片对象创建方法创建至少一个图片对象；
    对于每个图片对象，将所述至少一个链接路径中的每个链接路径作为所述每个图片对象的图像源路径，并将所述至少一个图片对象存入所述网页应用缓存中；所述图像源路径为加载所述每个图片对象时获取内容数据的路径；
    将所述至少一个图片对象的图片名称与图像源路径存入所述网页应用缓存的会话数据中，以实现通过所述会话数据将所述至少一个图片对象与所述至少一个链接路径关联保存，从而完成对所述当前整屏页面的截图。
  4. 根据权利要求1所述的方法，其中，所述获取当前整屏页面的至少一个页面图像，包括：
    检查所述网页应用缓存的会话数据中是否存在所述当前整屏页面对应的至少一个图片对象；
    在所述会话数据中不存在所述至少一个图片对象的情况下，获取所述当前整屏页面的至少一个页面图像。
  5. 根据权利要求4所述的方法，其中，所述检查所述网页应用缓存的会话数据中是否存在所述当前整屏页面对应的至少一个图片对象之后，所述方法还包括：
    在所述会话数据中存在所述至少一个图片对象的情况下，从所述会话数据中获取所述至少一个图片对象对应的所述至少一个链接路径，完成对所述当前整屏页面的截图。
  6. 根据权利要求1-4任一项所述的方法，其中，所述获取当前整屏页面的至少一个页面图像，包括：
    在所述当前整屏页面加载完成的情况下，获取所述当前整屏页面中每个场景对应的图像，作为至少一个页面图像。
  7. 根据权利要求1-4任一项所述的方法，其特征在于，所述在网页应用中，获取当前整屏页面的至少一个页面图像，包括：
    在所述当前整屏页面上接收到截图指令的情况下，响应于所述截图指令，将所述截图指令指定的至少一个待截图场景所对应的图像作为所述至少一个页面图像。
  8. 根据权利要求3或5所述的方法，其中，所述完成对所述当前整屏页面的截图之后，所述方法还包括：
    在所述网页应用中，接收到对所述至少一个图片对象中的至少一个目标图片的访问请求的情况下，通过所述至少一个目标图片对象的图像源路径，获取所述至少一个目标图片对象对应的至少一个目标文件对象；所述目标文件对象的链接路径与所述目标图片对象的图像源路径相同；
    根据所述至少一个目标文件对象，加载出所述至少一个目标图片对象，进而实现对所述至少一个目标图片对象的查看与保存。
  9. 根据权利要求1所述的方法，其中，所述在网页应用中，获取当前整屏页面的至少一个页面图像，包括：
    从当前整屏页面中划分出至少一个场景，并对所述至少一个场景设置至少一个节点标识；所述至少一个节点标识表征所述至少一个场景在所述当前整屏页面中对应的至少一个数据位置；所述至少一个场景与所述至少一个节点标识一一对应；
    在所述当前整屏页面中，获取至少一个待截图场景对应的至少一个目标节点标识；所述至少一个待截图场景为所述至少一个场景中的目标截图场景；
    根据所述至少一个目标节点标识中的每个目标节点标识，从所述当前整屏页面的内容数据中读取出每个目标节点标识对应的内容数据，从而得到至少一个目标页面数据；
    通过网页渲染功能，根据所述至少一个目标页面数据，生成所述至少一个页面图像。
  10. 根据权利要求2所述的方法，其中，所述将所述至少一个页面图像转换为至少一个二进制大对象，作为所述至少一个文件对象，包括：
    调用网页绘图方法中图片转二进制大对象的转换方法，实现将所述至少一个页面图像转换为至少一个二进制大对象，作为所述至少一个文件对 象。
  11. 根据权利要求3所述的方法，其中，所述将所述至少一个图片对象的图片名称与图像源路径存入所述网页应用缓存的会话数据中，包括：
    调用会话数据设置方法，实现将所述至少一个图片对象的图片名称与图像源路径存入所述网页应用缓存中。
  12. 根据权利要求4所述的方法，其中，所述检查所述网页应用缓存的会话数据中是否存在所述当前整屏页面对应的至少一个图片对象，包括：
    根据所述至少一个图片对象的图片名称，调用会话数据获取方法，执行从所述会话数据中提取所述至少一个图片对象；
    在所述会话数据获取方法调用成功的情况下，确认所述会话数据中存在所述至少一个图片对象；
    在所述会话数据获取方法调用失败的情况下，确认所述会话数据中不存在所述至少一个图片对象。
  13. 一种图像处理装置，所述图像处理装置包括获取部分、转换部分与保存部分，其中，
    所述获取部分，被配置为在网页应用中，获取当前整屏页面的至少一个页面图像；
    所述转换部分，被配置为将所述至少一个页面图像转换为至少一个文件对象，并创建所述至少一个文件对象的至少一个链接路径；所述至少一个文件对象与所述至少一个链接路径一一对应；
    所述保存部分，被配置为创建至少一个图片对象，将所述至少一个图片对象与所述至少一个链接路径关联保存在网页应用缓存中，从而完成对所述当前整屏页面的截图。
  14. 一种图像处理装置，所述图像处理装置包括存储器、处理器以及通信总线，所述存储器通过所述通信总线与所述处理器进行通信，所述存储器存储所述处理器可执行的一个或者多个程序，在所述一个或者多个程序被执行的情况下，所述处理器执行如权利要求1-12任一项所述的方法。
  15. 一种计算机可读存储介质，所述计算机可读存储介质存储有一个或者多个计算机程序，所述一个或者多个计算机程序可被一个或者多个处理器执行，以实现如权利要求1-12任一项所述的方法。
PCT/CN2021/083678 2020-09-01 2021-03-29 一种图像处理方法及装置、计算机可读存储介质 WO2022048141A1 (zh)

Priority Applications (3)

Application Number Priority Date Filing Date Title
US18/043,169 US20230334113A1 (en) 2020-09-01 2021-03-29 Image processing method and apparatus, and computer readable storage medium
EP21863212.3A EP4198773A4 (en) 2020-09-01 2021-03-29 IMAGE PROCESSING METHOD AND APPARATUS, AND COMPUTER READABLE STORAGE MEDIUM
JP2023510486A JP7538948B2 (ja) 2020-09-01 2021-03-29 画像処理方法及び装置、並びにコンピュータ可読記憶媒体

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202010902786.1 2020-09-01
CN202010902786.1A CN112256990B (zh) 2020-09-01 2020-09-01 一种图像处理方法及装置、计算机可读存储介质

Publications (2)

Publication Number Publication Date
WO2022048141A1 WO2022048141A1 (zh) 2022-03-10
WO2022048141A9 true WO2022048141A9 (zh) 2022-11-17

Family

ID=74223842

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2021/083678 WO2022048141A1 (zh) 2020-09-01 2021-03-29 一种图像处理方法及装置、计算机可读存储介质

Country Status (5)

Country Link
US (1) US20230334113A1 (zh)
EP (1) EP4198773A4 (zh)
JP (1) JP7538948B2 (zh)
CN (1) CN112256990B (zh)
WO (1) WO2022048141A1 (zh)

Families Citing this family (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112256990B (zh) * 2020-09-01 2023-09-26 北京沃东天骏信息技术有限公司 一种图像处理方法及装置、计算机可读存储介质
CN112954030A (zh) * 2021-01-30 2021-06-11 北京奇保信安科技有限公司 一种Web端图片压缩方法、装置及电子设备
CN114996609B (zh) * 2022-08-04 2022-11-18 山东捷瑞数字科技股份有限公司 一种基于浏览器数据库的离线图像缓存方法及系统
US11880424B1 (en) * 2023-01-30 2024-01-23 Intuit Inc. Image generation from HTML data using incremental caching

Family Cites Families (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2011048704A (ja) 2009-08-27 2011-03-10 Kyocera Corp 通信機器
CN102812452B (zh) * 2010-09-07 2016-05-18 Sk普兰尼特有限公司 用于显示缓存网页的系统、服务器、终端、方法、以及记录该方法的计算机可读记录介质
CN102902703A (zh) * 2012-07-19 2013-01-30 中国人民解放军国防科学技术大学 一种面向网络敏感信息的截图取证与锁定回访的方法
CN104462125B (zh) * 2013-09-18 2019-09-17 腾讯科技（深圳）有限公司 生成网页截图的方法及装置
EP4170525A1 (en) * 2015-07-15 2023-04-26 rewardStyle, Inc. Systems and methods for screenshot linking
CN107450900B (zh) * 2016-06-01 2021-01-29 阿里巴巴（中国）有限公司 一种截图方法及装置
CN107766359B (zh) * 2016-08-17 2022-03-15 阿里巴巴（中国）有限公司 一种将页面内容转换为图片的方法、装置以及计算设备
CN110647703A (zh) * 2019-09-18 2020-01-03 平安科技（深圳）有限公司 动画播放方法、装置、计算机设备和存储介质
CN111159594A (zh) * 2019-12-24 2020-05-15 深圳市优必选科技股份有限公司 信息处理方法、信息处理装置及终端设备
CN111399732B (zh) * 2020-03-13 2021-02-19 深圳市珍爱云信息技术有限公司 网页截图方法、装置、计算机设备和存储介质
CN112256990B (zh) * 2020-09-01 2023-09-26 北京沃东天骏信息技术有限公司 一种图像处理方法及装置、计算机可读存储介质

Also Published As

Publication number Publication date
US20230334113A1 (en) 2023-10-19
EP4198773A4 (en) 2023-12-13
WO2022048141A1 (zh) 2022-03-10
CN112256990B (zh) 2023-09-26
CN112256990A (zh) 2021-01-22
EP4198773A1 (en) 2023-06-21
JP2023537767A (ja) 2023-09-05
JP7538948B2 (ja) 2024-08-22

Similar Documents

Publication Publication Date Title
WO2022048141A9 (zh) 一种图像处理方法及装置、计算机可读存储介质
US10542123B2 (en) System and method for generating and monitoring feedback of a published webpage as implemented on a remote client
JP4865983B2 (ja) ネットワークサーバ
US8549395B2 (en) Method and system for transforming an integrated webpage
CN105955888B (zh) 一种页面调试预览方法及系统
US20210149842A1 (en) System and method for display of document comparisons on a remote device
WO2009093643A1 (ja) マークアップ言語文書変換システム、装置、方法およびプログラム
US20110078593A1 (en) Web browser transmission server and method of controlling operation of same
US20110066678A1 (en) Webpage browsing system, server, webpage browsing method, program and recording medium for the same
CN104050238A (zh) 一种地图标注方法和装置
CN113382083B (zh) 一种网页截图方法和装置
CN117093386B (zh) 页面截图方法、装置、计算机设备和存储介质
JP5303534B2 (ja) 体裁情報処理装置及び方法
JP5393242B2 (ja) データ提供方法および中間サーバ装置
CN116644252A (zh) 页面加载方法、装置、电子设备以及存储介质
CN114528510A (zh) 网页数据处理的方法、装置、电子设备及介质
US9690783B2 (en) Image conversion and method for converting text in an image into a targeted language
CN116112573B (zh) 终端界面转换方法、装置、设备、存储介质和程序产品
KR102031732B1 (ko) 웹 문서의 고속 웹 스크롤을 지원하는 사용자 단말 장치 및 스크롤 방법
JP2013210911A (ja) 情報処理装置、情報処理システム及びプログラム
US8291311B2 (en) Web display program conversion system, web display program conversion method and program for converting web display program
TWI610183B (zh) 植基於ajax技術於控管網頁共通部分之運作系統
JP5740026B1 (ja) 表示画面を表示させるサーバ及び方法
US20130132459A1 (en) Information-sharing computer system and corresponding method
CN118466944A (zh) 头部导航栏的生成方法、装置、存储介质及终端设备

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 21863212

Country of ref document: EP

Kind code of ref document: A1

ENP Entry into the national phase

Ref document number: 2023510486

Country of ref document: JP

Kind code of ref document: A

WWE Wipo information: entry into national phase

Ref document number: 2021863212

Country of ref document: EP

ENP Entry into the national phase

Ref document number: 2021863212

Country of ref document: EP

Effective date: 20230316

NENP Non-entry into the national phase

Ref country code: DE