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

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

Info

Publication number
WO2022048141A1
WO2022048141A1 PCT/CN2021/083678 CN2021083678W WO2022048141A1 WO 2022048141 A1 WO2022048141 A1 WO 2022048141A1 CN 2021083678 W CN2021083678 W CN 2021083678W WO 2022048141 A1 WO2022048141 A1 WO 2022048141A1
Authority
WO
WIPO (PCT)
Prior art keywords
image
page
current full
picture
picture object
Prior art date
Application number
PCT/CN2021/083678
Other languages
English (en)
French (fr)
Other versions
WO2022048141A9 (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/US12124528B2/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, and in particular, to an image processing method and apparatus, and a computer-readable storage medium.
  • a user can use a browser on a mobile terminal to browse the content on the entire Hyper Text Markup Language (HTML) web page.
  • HTML Hyper Text Markup Language
  • the current screenshot method generally takes screenshots of the specified page through the canvas method in the HTML specification, and then stores the captured screenshots in the browser cache.
  • the HTML page is converted into an image in base64 encoding format, and finally the converted image is saved locally on the mobile terminal.
  • pictures in base64 encoding format will occupy a large cache space, and the rendering method in web page drawing needs to be used in the case of converting HTML pages to base64 pictures, and the more complex the page, the longer the rendering time. Therefore, the current screenshot method consumes a lot of browser cache, and the process of screenshot is long, thereby reducing the performance of browser cache.
  • the embodiments of the present invention are expected to provide an image processing method and apparatus, and a computer-readable storage medium, which can improve the screenshot performance of web page 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, so as to complete the screenshot of the current full-screen page.
  • an embodiment of the present invention provides an image processing apparatus, including an acquisition part, a conversion part and a storage part, wherein,
  • the obtaining part is configured to obtain at least one page image of the current full-screen page in the web page 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 and the at least one link path are identical; one correspondence;
  • the saving part is configured to create at least one picture object, and save 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.
  • an embodiment of the present invention provides an image processing apparatus, the image processing apparatus 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, where the computer-readable storage medium stores one or more programs, and the one or more programs can be executed by one or more processors, to implement any of the above image processing methods.
  • Embodiments of the present invention provide an image processing method and device, and a computer-readable storage medium.
  • the method includes: in a web application, acquiring at least one page image of a 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 is in one-to-one correspondence with at least one link path; create at least one picture object, associate at least one picture object with at least one link path and save it in the webpage application cache to complete the screenshot of the current full-screen page.
  • the image processing apparatus can convert the at least one page image into at least one file object, associate the link path of the at least one file object with the at least one picture object, and Save in the cache, so as to overcome 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, so when the user enters again
  • the image processing apparatus can directly obtain at least one image object from the cache as the corresponding page screenshot, without the need for repeated interception, which reduces the workload of browser processing, and ultimately improves the performance of web applications. 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 an optional schematic flowchart of an 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 an optional schematic flowchart of an 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 first interface schematic diagram of a webpage application screenshot process provided by an embodiment of the present invention.
  • FIG. 7B is a second interface schematic diagram of a webpage application screenshot process provided by an embodiment of the present invention.
  • 7C is a third interface schematic diagram of a webpage application screenshot process provided by an embodiment of the present invention.
  • FIG. 8 is an optional schematic flowchart of an image processing method provided by an embodiment of the present invention.
  • FIG. 9 is a schematic structural diagram 1 of an image processing apparatus provided by an embodiment of the present invention.
  • FIG. 10 is a second schematic structural diagram of an image processing apparatus provided by an embodiment of the present invention.
  • canvas The canvas element in HTML can draw images on a web page through JavaScript scripts. Canvas has multiple 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 is a method of representing binary data based on 64 printable characters.
  • DOM Document Object Model
  • DOM provides an access model to the entire document, taking 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 node represent the basic content and structural information of the page.
  • Progressive Web App It can use the standardized framework workbox-sw to simulate some native functions on the mobile side, so that web applications can present a similar experience to native applications.
  • Blob objects are binary data similar to file objects, and can be manipulated like file objects.
  • canvas rendering is used in the process of converting the image to base64 encoding format.
  • the more complex the page the longer the canvas rendering time.
  • the base64 image encoding is a very long string, and the full size of the encoding exceeds the size of the image itself, but the browser cookie or the browser's local cache space is not large.
  • the current browser screenshot saving method is slow, requires high browser cache, and consumes a lot of browser performance. Therefore, in practical applications, the current screenshot method often reports insufficient storage space due to the limitation of cache space. , it is not possible to save multiple pictures at the same time as screenshots. Generally, mobile browsers cannot process more than 9 screenshots of webpages in the cache at the same time.
  • the screenshot obtained by the current screenshot method is lost, if the user wants to save the screenshot again, he has to enter the current browsing page and perform the above series of operations, thereby further increasing the performance consumption of the browser.
  • 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, obtain at least one page image of a current full-screen page.
  • the image processing method provided in the embodiment of the present invention is suitable for the scenario of saving screenshots on a web page application.
  • the browser on the terminal saves screenshots of each scene in a full-screen page, or supports HTML
  • the application or client side of a link takes a screenshot of the page content displayed on multiple screens in a link, etc.
  • the image processing apparatus may, in the case of receiving a screenshot instruction on the current full-screen page of the web page application, respond to the screenshot instruction, and use the image corresponding to at least one scene to be screenshot specified by the screenshot instruction as at least one page image.
  • the image processing apparatus may also acquire an image corresponding to each scene in the current full-screen page as at least one page image when the current full-screen page is loaded.
  • a non-sensing screenshot operation is performed on each scene in the current full-screen page in the background, so as to shorten the waiting time after the user sends the screenshot instruction.
  • the image processing apparatus may take screenshots of all or part of the scenes in the current full-screen page by using the cavas screenshot method in the browser, so as to acquire at least one page image.
  • the html2canvas() method can be called to read the style and content information of each scene to be screenshotted, and a picture is generated according to the style and content information of each scene to be screenshotted, thereby obtaining at least one page image.
  • the image processing apparatus may also obtain at least one page image through the Flashcanvas or ExplorerCanvas method, which is specifically selected according to the actual situation, which is not limited in this embodiment of the present invention.
  • the cavas screenshot method usually obtains pictures in png format, and pictures in other formats may also be generated according to actual needs, which are 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 full-screen page contents in the current full-screen page are loaded, so at least one page image is created locally or locally in the web application. generated 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 apparatus may convert the at least one page image in the picture format into at least one file object, so as to realize the access and content of the at least one page image by manipulating the file object in the HTML page operations such as reading.
  • the image processing apparatus can convert at least one page image into at least one blob object by using the canvas.toBlob() method, and use the at least one blob object as at least one file object.
  • the image The processing device may also convert the at least one page image into a web page object of other file types through other methods, and the specific selection is made according to the actual situation, which is not limited in the embodiment of the present invention.
  • the image processing apparatus After converting the 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 apparatus may use the URL.createObjectURL() method to create a Uniform Resource Locator (URL) for each blob object as a The link path corresponding to each blob object, so as to obtain at least one link path.
  • URL Uniform Resource Locator
  • each link path in the at least one link path points to its corresponding file object. Therefore, the image processing apparatus can associate the at least one file object with other types of web page objects, such as picture objects, through the at least one link path. Associated, by specifying a link path, other types of web page objects can refer to data in at least one file object as source data, and then by operating on other types of web page objects, the diversified processing of at least one file object is extended. Way.
  • S103 Create at least one picture object, and store the at least one picture object in association with at least one link path in the webpage application cache, so as to complete the screenshot of the current full-screen page.
  • the image processing apparatus will create at least one picture type object, that is, at least one picture object, in the local cache of the web page application, and point at least one link path to at least one picture object, so as to associate at least one link path with at least one picture object
  • the objects are associated; the image processing apparatus stores the at least one link path and the at least one picture object in the webpage application cache together, so as to complete the screenshot of the current full-screen page.
  • the image processing apparatus may create at least one image object through the new Image() method.
  • the image processing apparatus can assign the src attribute of the picture object to a link path, so that when the picture object is loaded, the link can be accessed through the corresponding link path
  • the file object corresponding to the path takes 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 apparatus may also store at least one link path in the cookie of the web page application, so that when the image processing device takes a screenshot of the current full-screen page, it can check the web page application Whether there is at least one link path for the desired screenshot in the cookie, and at least one image object in the historical cache is directly obtained through the at least one link path, and there is no need to perform repeated screenshot processing on the same page.
  • the image processing apparatus 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 save it in the cache, so as to overcome the technical problem of a large amount of cache occupancy caused by converting the screenshot image to other encoding formats, and because at least one image object of the current full-screen page is saved in the cache, when the user re- When entering 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 a corresponding page screenshot, which does not require repeated interception, reduces the workload of browser processing, and finally improves the application of web pages. screenshot performance.
  • FIG. 2 is an optional schematic flowchart of an image processing method provided by an embodiment of the present invention.
  • S101 shown in FIG. 1 can be implemented by S1011-S1014, which will be described in conjunction with each step.
  • the image processing apparatus may divide at least one scene according to its displayed style or content, so as to subsequently specify a scene to be screenshotted from the at least one scene.
  • the image processing apparatus sets at least one node identifier for at least one scene; at least one scene corresponds to at least one node identifier one-to-one.
  • At least one scene is a page scene contained in the current full-screen page; for example, 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 location 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 the corresponding web page object in the overall content data corresponding to the current full-screen page.
  • the overall content data corresponding to the current full-screen page may be an HTML text.
  • the browser When the browser parses the HTML text, it will construct a DOM tree according to the association relationship of each webpage object in the HTML text, wherein,
  • the at least one node identifier may be a document node in the DOM tree in the current full-screen page, each DOM node stores content data corresponding to each web page object, and each DOM node is associated with other DOM nodes in the DOM tree.
  • the image processing apparatus may set the DOM style in the current full-screen page as one-screen display, that is, each screen of the full-screen page is regarded as a scene; the image processing apparatus may set different DOM ID, as at least one node identifier.
  • S1012 In the current full screen page, obtain at least one target node identifier corresponding to at least one scene to be screenshotted; the at least one scene to be screenshotted is a target screenshot scene in at least one scene.
  • the image processing apparatus determines at least one scene to be captured according to the screenshot instruction, or by default takes all the scenes in the current full-screen interface as the at least one scene to be captured, and obtains at least one scene corresponding to the scene to be captured At least one target node identifier.
  • each target node identifier in the at least one target node identifier read 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 apparatus locates, according to each node identifier, the content corresponding to the web page object represented by the node identifier in the overall content data of the current full-screen page For the data storage location, according to the data storage location corresponding to each node identifier, read the content data of each web page object corresponding to the data storage location, thereby obtaining at least one target page data.
  • the image processing apparatus can generate at least one page image according to the data of at least one target page by using a webpage rendering function, such as the cavas drawing method.
  • FIG. 3 is an optional schematic flowchart of an image processing method provided in an embodiment of the present invention.
  • S102 shown in FIG. 1 can be implemented by S1021-S1022, and each step will be combined with each other. Be explained.
  • the image-to-blob conversion method in the webpage drawing method can be invoked to convert at least one page image into at least one Blob as at least one file object.
  • the image processing apparatus performs format conversion on at least one page image through the canvas.toBlob() method, and converts it into at least one blob object, which is used as at least one file object.
  • the image processing apparatus uses canvas.toBlob() instead of the canvas.toDataURL method to convert the page image, because the page image converted by canvas.toDataURL is in the encoding format of base64, 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 the object location path creation method in the webpage application script to create the resource address of each blob as a link path, thereby obtaining at least one link path.
  • the URL.createObjectURL() method is called to create the URL address corresponding to each blob object as the link path of the blob object, Thereby at least one link path is obtained.
  • calling the URL.createObjectURL() method will return a url string with a hash to specify its corresponding blob object.
  • the image processing apparatus 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, occupies very little cache of web applications, and will not cause errors such as insufficient memory, thereby improving the screenshot performance of web applications.
  • FIG. 4 is an optional schematic flowchart of an image processing method provided in an embodiment of the present invention.
  • S103 shown in FIG. 1 may be implemented by S1031-S1033, and each step will be combined with each other. Be explained.
  • the image processing apparatus calls a picture object creation method in the webpage application script, such as the new image() method, to create at least one picture object in the webpage application cache.
  • the image object created by the new image() method includes information such as the image name and the 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 refers to the image object The absolute or relative path of the file.
  • the image processing apparatus may also create at least one picture object in other manners supported by the web page application, and the specific selection is made according to the actual situation, which is not limited in this embodiment of the present invention.
  • each link path in the at least one link path as the image source path of each image object, and store the at least one image object in the webpage application cache; the image source path is to load each image The path to get content data when object.
  • the image processing apparatus uses the corresponding link path as the image source path of the image object, that is, each image object obtains the content when it is loaded in the webpage The path of the data, thereby realizing that at least one file object is used as content data of at least one picture object, and realizing the association between the two.
  • the image processing apparatus may use each link path as the image source path of each picture object by means of assignment.
  • the image processing apparatus stores at least one picture object in the webpage application cache, so that the corresponding picture object can be opened from the local cache of the webpage application in the next visit.
  • S1033 Store the image name and image source path of at least one image object in the session data cached by the web page application, so as to associate and save at least one image object and at least one link path through the session data, thereby completing the current full-screen page. screenshot.
  • the image processing apparatus may call the session data setting method to store the image name and image source path of at least one image object in the session data cached by the web page application, such as a cookie, so as to obtain at least one link from the session data path, and then obtain at least one image object associated with it, so as to complete the screenshot and cache saving of the current full-screen page.
  • the web page application such as a cookie
  • the image processing apparatus may store the picture name, URL and valid time of at least one picture object into a cookie by calling the setCookie( ) method.
  • the corresponding code implementation can be as follows:
  • the above setCookie() method can be implemented by the following code:
  • the image processing apparatus 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 the at least one link path in the session data cached by the webpage application,
  • the image processing apparatus can directly obtain at least one image object from the cache as a corresponding screenshot of the page, and does not need to take repeated screenshots, which reduces the workload of browser processing and ultimately improves the application of web pages. screenshot performance.
  • FIG. 5 is an optional schematic flowchart of an image processing method provided by the embodiment of the present invention.
  • S101 in FIG. 1 can be implemented by S002-S003, which will be described in conjunction with each step.
  • the image processing apparatus will first check the session data cached by the web page application to determine whether there is at least one image object corresponding to the current full-screen page in the session data.
  • the process of checking whether there is at least one picture object corresponding to the current full-screen page in the session data cached by the web page application by the image processing apparatus can be implemented as follows:
  • S0021 Call the session data acquisition method according to the image name of the at least one image object, and execute the extraction of the at least one image object from the session data.
  • the image processing apparatus may first call the getCookie() method to obtain the cookie data of the webpage application, and Check whether at least one image object already exists in the cookie data by the newImg.load method.
  • the image processing apparatus checking whether there is at least one picture object corresponding to at least one link path in the webpage application cache may be as follows:
  • the above-mentioned getCookie() method can be implemented by the following code:
  • the above-mentioned 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 apparatus confirms that at least one picture object does not exist in the session data.
  • the image processing apparatus acquires at least one page image from the current full-screen page, and implements the current full-screen page by using the methods in S102-S103 above. screenshot.
  • S002 may also be included, as follows:
  • the image processing apparatus when there is at least one picture object in the webpage application cache, the image processing apparatus 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 apparatus can quickly locate at least one image object to be screenshotted from the cookie of the web page application, and does not need to perform repeated screenshot processing on the same page, which improves the reproducibility of the cached image. Therefore, the workload of screenshots of web applications is reduced, and the screenshot performance of web applications is improved.
  • FIG. 6 is an optional schematic flowchart of an image processing method provided in an embodiment of the present invention. Based on FIG. 4 or FIG. 5 , after S1033 or S10, S1034-S1035 may also be executed , which will be described in conjunction with each step.
  • the image processing apparatus may receive, in the webpage application, an access request for at least one target picture in the at least one picture object.
  • 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 apparatus 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 apparatus 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, thereby realizing extraction, viewing and saving of each target picture object.
  • the image processing apparatus can use at least one link path to use at least one file object as content data of at least one picture object, so that at least one target link path in the at least one link path can be used. access, and load the target image object to be loaded in association, thereby realizing the viewing and saving of the scene that you want to screenshot in the cache of the webpage application, and improving the screenshot performance of the webpage application.
  • the interface interaction effect may be as shown in FIGS. 7A-7C .
  • the user can browse the content displayed on each screen of the entire webpage by sliding up and down on the page.
  • the webpage application can A long screenshot is generated for at least one screen of the webpage, and the save button control 2-1 is displayed 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 in the background. Download and save long screenshots.
  • the web application can also generate a screenshot preview image corresponding to each screen page in the entire web page, and display it on the current page in the form of a thumbnail, and the user can select one of them by clicking on the thumbnail. or multiple screenshot preview pictures to save, and complete the selection through the confirmation button control 2-2; when the user completes the selection through the confirmation button control 2-2, you can further click the save button 2-3 to confirm the selection of one or more Save the page image corresponding to the screenshot preview image.
  • the image processing apparatus may receive a screenshot instruction in the web application.
  • the image processing apparatus may perform S301-S307 on the selected multiple page images. Save the screenshot, as shown in Figure 8:
  • the image processing apparatus loads the entire web page in the browser.
  • the image processing apparatus determines whether there is an array of link addresses in the cache. If it exists, execute S303-S308, if not, jump to execute 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 at least one picture object may be at least one screenshot picture corresponding to the entire webpage.
  • the image processing apparatus may form a DOM ID array from the acquired DOM IDs of each screen page.
  • the image processing apparatus 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.
  • exemplary code implementations of S303-S305 may be as follows:
  • the image processing apparatus when there is at least one link path in the cache, the image processing apparatus directly acquires at least one link path without performing repeated screenshots.
  • the image processing device can realize multi-screen screenshots and optional screenshots, overcome the technical problem of long rendering time for image screenshots, and improve the reusability of cached screenshots, thereby improving the performance of web applications. Screenshot performance.
  • the image processing apparatus can use the PWA technology to cache page images of a specified type.
  • the workbox-sw plug-in is introduced to force the cache of images under the blob:null/ path.
  • the sample code is as follows:
  • the image processing device can use the PWA technology.
  • the Service Worker is used to cache images to achieve a stable and controllable image caching effect.
  • FIG. 9 is a schematic structural diagram 1 of an image processing apparatus provided by an embodiment of the present invention.
  • the image processing apparatus 100 includes an acquisition part 10.
  • the obtaining part 10 is configured to obtain at least one page image of the current full-screen page in the web 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, and save 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 the web page application script, call the object location path creation method 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 a 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 is 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 the each picture object.
  • the path of the content data; the image name and image source path of the at least one image object are stored in the session data cached by the webpage application, so as to realize the connection between the at least one image object and the at least one image object through the session data
  • the link path is associated and saved, thereby completing the screenshot of the current full-screen page.
  • the image processing apparatus 100 further includes a checking part, and the checking part is configured to check whether there is at least one corresponding to the current full-screen page in the session data cached by the webpage application A picture object; the obtaining part 10 is further configured to obtain 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 obtaining part 10 is further configured to, after checking whether there is at least one picture object corresponding to the current full-screen page in the session data cached by the webpage application, in the In the case where 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 when the loading of the current full-screen page is completed, as at least one image page image.
  • the acquiring part is further configured to, in the case of receiving a screenshot instruction on the current full-screen page, in response to the screenshot instruction, select 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 apparatus 100 further includes an extraction part, and the extraction part is further configured to, after the completion of the screenshot of the current full-screen page, in the webpage application , in the case of receiving an access request to at least one target picture in the at least one picture object, 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, the at least one target picture object is loaded, and then the at least one target picture object is loaded. View and save objects.
  • the image processing apparatus 100 further includes an identification part, and the identification part is configured to, in the web application, before acquiring at least one page image of the current full-screen page, from the current full-screen page
  • the screen page is divided into at least one scene, and at least one node identifier is set for the at least one scene; the at least one scene is a page scene included in the current full-screen page; the at least one node identifier represents the at least one At least one data location corresponding to a scene in the current full-screen page; the at least one scene is in a one-to-one correspondence with the at least one node identifier.
  • the acquiring part 10 is further configured to acquire, in the current full-screen page, at least one target node identifier corresponding to at least one scene to be screenshotted; the at least one scene to be screenshotted 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 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 the webpage rendering function.
  • the conversion part 20 is further configured to call a conversion method for converting a picture to 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 save the image name and image source path of the at least one image object into 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 execute the extraction of the at least one picture object from the session data; In the case that the invocation of the session data acquisition method succeeds, confirm that the at least one picture object exists in the session data; in the case that the invocation of the session data acquisition method fails, confirm that the session data does not exist the At least one picture object.
  • FIG. 10 is a second schematic structural diagram of an image processing apparatus provided by an embodiment of the present invention.
  • the image processing apparatus 200 includes : a processor 715, a memory 716, and a communication bus 717, the memory 716 communicates with the processor 715 through the communication bus 717, and the memory 716 stores instructions executable by the processor 715, where the instructions In the case of being executed, any one of the image processing methods in the foregoing embodiments is executed by the processor 715 .
  • An embodiment of the present invention provides a computer-readable storage medium, which is applied to an image processing apparatus, where 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, for example, Any one of the image processing methods of the foregoing embodiments.
  • embodiments of the present invention may be provided as a method, system, or computer program product. Accordingly, the invention may 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 having computer-usable program code embodied therein, including but not limited to disk storage, optical storage, and the like.
  • 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 function in a particular manner, such that the instructions stored in the computer-readable memory result in an article of manufacture comprising instruction means, the instructions
  • the apparatus implements the functions specified in the flow or flow of the flowcharts and/or the block or blocks of the block diagrams.
  • the image processing apparatus can convert the at least one page image into at least one file object, associate the link path of the at least one file object with the at least one picture object, and Save in the cache, so as to overcome 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, so when the user enters the current
  • the image processing device can directly obtain at least one image object from the cache as a corresponding screenshot of the page, and does not need to take repeated screenshots, which reduces the workload of browser processing and ultimately improves the screenshots 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 US12124528B2 (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.1A CN112256990B (zh) 2020-09-01 2020-09-01 一种图像处理方法及装置、计算机可读存储介质
CN202010902786.1 2020-09-01

Publications (2)

Publication Number Publication Date
WO2022048141A1 true WO2022048141A1 (zh) 2022-03-10
WO2022048141A9 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 (4)

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

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114996609A (zh) * 2022-08-04 2022-09-02 山东捷瑞数字科技股份有限公司 一种基于浏览器数据库的离线图像缓存方法及系统
US11880424B1 (en) * 2023-01-30 2024-01-23 Intuit Inc. Image generation from HTML data using incremental caching

Families Citing this family (2)

* 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端图片压缩方法、装置及电子设备

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20120311419A1 (en) * 2010-09-07 2012-12-06 Sk Planet Co., Ltd. System for displaying cached webpages, a server therefor, a terminal therefor, a method therefor and a computer-readable recording medium on which the method is recorded
CN102902703A (zh) * 2012-07-19 2013-01-30 中国人民解放军国防科学技术大学 一种面向网络敏感信息的截图取证与锁定回访的方法
CN104462125A (zh) * 2013-09-18 2015-03-25 腾讯科技（深圳）有限公司 生成网页截图的方法及装置
CN111159594A (zh) * 2019-12-24 2020-05-15 深圳市优必选科技股份有限公司 信息处理方法、信息处理装置及终端设备
CN112256990A (zh) * 2020-09-01 2021-01-22 北京沃东天骏信息技术有限公司 一种图像处理方法及装置、计算机可读存储介质

Family Cites Families (6)

* 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 通信機器
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 平安科技（深圳）有限公司 动画播放方法、装置、计算机设备和存储介质
CN111399732B (zh) * 2020-03-13 2021-02-19 深圳市珍爱云信息技术有限公司 网页截图方法、装置、计算机设备和存储介质

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20120311419A1 (en) * 2010-09-07 2012-12-06 Sk Planet Co., Ltd. System for displaying cached webpages, a server therefor, a terminal therefor, a method therefor and a computer-readable recording medium on which the method is recorded
CN102902703A (zh) * 2012-07-19 2013-01-30 中国人民解放军国防科学技术大学 一种面向网络敏感信息的截图取证与锁定回访的方法
CN104462125A (zh) * 2013-09-18 2015-03-25 腾讯科技（深圳）有限公司 生成网页截图的方法及装置
CN111159594A (zh) * 2019-12-24 2020-05-15 深圳市优必选科技股份有限公司 信息处理方法、信息处理装置及终端设备
CN112256990A (zh) * 2020-09-01 2021-01-22 北京沃东天骏信息技术有限公司 一种图像处理方法及装置、计算机可读存储介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
See also references of EP4198773A4 *

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114996609A (zh) * 2022-08-04 2022-09-02 山东捷瑞数字科技股份有限公司 一种基于浏览器数据库的离线图像缓存方法及系统
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
EP4407480A1 (en) * 2023-01-30 2024-07-31 Intuit Inc. Image generation from html data using incremental caching

Also Published As

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

Similar Documents

Publication Publication Date Title
WO2022048141A1 (zh) 一种图像处理方法及装置、计算机可读存储介质
US10956531B2 (en) Dynamic generation of mobile web experience
US10542123B2 (en) System and method for generating and monitoring feedback of a published webpage as implemented on a remote client
US8549395B2 (en) Method and system for transforming an integrated webpage
US7783613B2 (en) Context-aware middleware platform for client devices
CN111611518B (zh) 基于Html5的可视化展示页面自动发布方法及系统
CN105955888B (zh) 一种页面调试预览方法及系统
JP4865983B2 (ja) ネットワークサーバ
US20210149842A1 (en) System and method for display of document comparisons on a remote device
WO2017088509A1 (zh) 一种页面定制化的方法和装置
CN113382083B (zh) 一种网页截图方法和装置
US10467332B2 (en) Graphics display capture system
US20140173413A1 (en) Method and system to build a representative model for web pages to interact with users
CN117093386B (zh) 页面截图方法、装置、计算机设备和存储介质
RU2634221C2 (ru) Способ и устройство для отрисовки представления электронного документа на экране
JP5393242B2 (ja) データ提供方法および中間サーバ装置
CN114528510A (zh) 网页数据处理的方法、装置、电子设备及介质
US12124528B2 (en) Image processing method and apparatus, and computer readable storage medium
US11770437B1 (en) Techniques for integrating server-side and client-side rendered content
KR102031732B1 (ko) 웹 문서의 고속 웹 스크롤을 지원하는 사용자 단말 장치 및 스크롤 방법
TWI610183B (zh) 植基於ajax技術於控管網頁共通部分之運作系統
US20130132459A1 (en) Information-sharing computer system and corresponding method
JP5740026B1 (ja) 表示画面を表示させるサーバ及び方法
CN114237589A (zh) 一种骨架屏生成方法、装置、终端设备及存储介质
CN118092883A (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