WO2015035944A1 - 一种在浏览器中进行图片处理的方法、装置和浏览器 - Google Patents

一种在浏览器中进行图片处理的方法、装置和浏览器 Download PDF

Info

Publication number
WO2015035944A1
WO2015035944A1 PCT/CN2014/086431 CN2014086431W WO2015035944A1 WO 2015035944 A1 WO2015035944 A1 WO 2015035944A1 CN 2014086431 W CN2014086431 W CN 2014086431W WO 2015035944 A1 WO2015035944 A1 WO 2015035944A1
Authority
WO
WIPO (PCT)
Prior art keywords
data
browser
image data
special effect
code
Prior art date
Application number
PCT/CN2014/086431
Other languages
English (en)
French (fr)
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 北京奇虎科技有限公司
Publication of WO2015035944A1 publication Critical patent/WO2015035944A1/zh

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577Optimising the visualization of content, e.g. distillation of HTML documents
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching

Definitions

  • the present invention relates to the technical field of Internet applications, and in particular, to a method for performing image processing in a browser, an apparatus for performing image processing in a browser, and a browser.
  • the browser loads a rendered HTML (HyperText Markup Language) web page.
  • HTML HyperText Markup Language
  • a browser is a piece of software that can display HTML (HyperText Markup Language) file content of a web server or file system and allow users to interact with these files.
  • the web browser mainly interacts with the web server through the HTTP (HTTP-Hypertext Transfer Protocol) protocol and obtains web pages. These web pages are specified by a URL (Uniform Resource Locator), and the file format is usually HTML and is composed of MIME. (Multipurpose Internet Mail Extensions, Multipurpose Internet Mail Extensions) is specified in the HTTP protocol.
  • a web page can include multiple documents, each of which is obtained separately from the server.
  • HTTP content type and URL protocol specification allows web page designers to embed images, animations, videos, sounds, streaming media, etc. in web pages.
  • the user enters the URL (assuming an html page and is the first visit), the browser is The server makes a request and the server returns an html file.
  • the browser starts loading the html code and finds that the ⁇ head> tag has a ⁇ link> tag that references the external CSS file.
  • the browser sends a request for a CSS file, and the server returns the CSS file;
  • the browser continues to load the code in the ⁇ body> section of the html, and has received the CSS file and can start rendering the page;
  • the browser finds an ⁇ img> tag in the code that references an image and makes a request to the server. At this point the browser will not wait until the image is downloaded, but continue to render the code behind.
  • the browser loads and renders the image elements in normal webpage elements. After the image element is recognized, the browser rendering engine recognizes the label of the image element of the HTML language, and then downloads the corresponding image to the corresponding server. image.
  • the image element is recognized and rendered.
  • the browser engine simply loads a picture.
  • the content of the picture itself determines the content displayed after the image is loaded.
  • the browser generally does not perform non-image content on the image.
  • Other rendering work that is, only static image loading, does not support the user's personalized requirements for editing and beautifying the image.
  • the dynamic effects of images loaded in the browser are provided by the image content.
  • JS JavaScript, scripting language
  • JS writing operation
  • the general user does not have the ability to write JS, and it occupies a lot of system resources.
  • the server generally does not support the client to write the JS of the webpage again, that is, does not support the personalized requirement of the user to edit and beautify the image. Due to the different writing habits of JS, the running of various JSs and browsers do not necessarily match, and there may be problems with JS running incompatibility.
  • the present invention has been made in order to provide a method for performing picture processing in a browser and a corresponding apparatus for performing picture processing in a browser, which overcomes the above problems or at least partially solves the above problems.
  • kind of browser
  • a method for performing picture processing in a browser including:
  • FIG. 1 a block diagram of an embodiment of an apparatus for performing picture processing in a browser, comprising:
  • An original image data obtaining module configured to acquire original image data on a browser side
  • a rich media data acquisition module adapted to acquire audio data and/or special effect data
  • the feature code image data generating module is adapted to generate the feature code image data according to the audio data and/or the special effect data;
  • a feature picture generating module configured to add the feature code image data to generate the feature picture on the original image data.
  • a browsing comprising:
  • An original image data obtaining module configured to acquire original image data on a browser side
  • a rich media data acquisition module adapted to acquire audio data and/or special effect data
  • the feature code image data generating module is adapted to generate the feature code image data according to the audio data and/or the special effect data;
  • a feature picture generating module configured to add the feature code image data to generate the feature picture on the original image data.
  • a computer program comprising computer readable code, when the computer readable code is run on an electronic device, causing the electronic device to perform the performing in a browser The method of image processing.
  • a computer readable medium wherein the computer program is stored.
  • the browser can record the audio data and special effects of the user when loading the image through the feature code image data.
  • the custom rendering operation of data, etc. solves the problem that the client does not support the user to customize the rendering operation when the image is loaded, and obtains a browser-based rendering of the image, a rich webpage rendering mode, and reduces server storage resources. Occupy, reduce the server running resource consumption, and improve the effectiveness of the browser rendering web page efficiency.
  • FIG. 1 is a flow chart showing the steps of Embodiment 1 of a method for performing picture processing in a browser according to an embodiment of the present invention
  • Embodiment 2 is a flow chart showing the steps of Embodiment 2 of a method for performing picture processing in a browser according to an embodiment of the present invention
  • FIG. 3a is a schematic diagram showing an example of an original picture according to an embodiment of the present invention.
  • Figure 3b is a schematic illustration of an example of a bar code in accordance with one embodiment of the present invention.
  • FIG. 3c is a schematic diagram showing an example of an identification picture according to an embodiment of the present invention.
  • FIG. 4 is a view schematically showing an example of characteristic code image data according to an embodiment of the present invention.
  • FIG. 5 is a view schematically showing an example of a feature picture according to an embodiment of the present invention.
  • FIG. 6 is a flow chart showing the steps of Embodiment 3 of a method for performing picture processing in a browser according to an embodiment of the present invention
  • FIGS. 7a-7i are schematic diagrams showing an example of feature picture creation according to an embodiment of the present invention.
  • FIG. 8 is a schematic diagram showing a picture in a browser according to an embodiment of the present invention. Structural block diagram of an embodiment of the device;
  • FIG. 9 is a flow chart showing the steps of an embodiment of a method for performing image loading in a browser according to an embodiment of the present invention.
  • 10a and 10b are schematic diagrams showing an example of analysis of a feature picture according to an embodiment of the present invention.
  • FIG. 11 is a block diagram showing the structure of an apparatus for performing image loading in a browser according to an embodiment of the present invention.
  • Figure 12 schematically shows a block diagram of an electronic device for performing the method according to the invention
  • Fig. 13 schematically shows a storage unit for holding or carrying program code implementing the method according to the invention.
  • FIG. 1 is a flow chart showing the steps of a method for performing image processing in a browser according to an embodiment of the present invention, which may specifically include the following steps:
  • Step 101 Acquire original image data on a browser side
  • Step 102 Acquire audio data and/or special effect data.
  • Step 103 Generate feature code image data according to the audio data and/or special effect data
  • Step 104 Add the signature image data to generate the feature image on the original image data.
  • the user can perform a custom rendering operation on the audio data, the special effect data, and the like when loading the image by using the feature code image data, thereby solving the problem that the client does not support the user to customize the image loading.
  • the problem of rendering operation is achieved by browser-based rendering of images, rich webpage rendering, reducing server storage resource usage, reducing server running resource usage, and improving the effectiveness of browser rendering webpage efficiency.
  • Embodiment 2 a flow chart of the steps of Embodiment 2 of a method for performing image processing in a browser according to an embodiment of the present invention is shown.
  • step 201 the login information of the browser user account is obtained, and the login of the browser user is performed; and the formed feature image is saved as a picture corresponding to the browser user.
  • the login browser user account can also save the data involved in its custom rendering operation in its account data, so that users can continue to use their custom rendering operations when logging in to different browsers.
  • Step 202 Acquire original image data on a browser side
  • the image processing in the browser is implemented as a browser plug-in on the browser side or as a browser application or a stand-alone application that can be called by the browser.
  • the original image data is relative to the formed feature image, and may be a picture loaded when the web page is rendered, and is selected by the user, and may be local or online.
  • the step 202 may specifically include the following sub-steps:
  • Sub-step S11 determining an address of the original image data, the address including a local address or a network address;
  • Sub-step S12 extracting the original image data from the address.
  • the user's custom dynamic rendering operation can be based on the raw image data.
  • Step 203 Acquire audio data.
  • the audio data includes an audio file or a recording file.
  • the audio data may be local, may be stored by a server corresponding to the browser, or may be stored by other platforms on the network, and the present invention does not limit this.
  • the step 203 may specifically include the following sub-steps:
  • Sub-step S21 obtaining a local address or a network address of the audio file or the recording file
  • Sub-step S22 extracting the audio file or the recording file from the local address or network address
  • Audio files which can be songs, audio and video, etc., recording files, can be recorded songs, greetings, and so on.
  • Step 204 Generate feature code image data according to the audio data.
  • the signature image data may be 2-dimensional bar code image data or barcode image data.
  • the feature code image data can also be other image data as long as the user's custom rendering operation can be recorded.
  • the signature image data includes a content code, an operation code, and an operation parameter
  • the step 204 may include the following substeps:
  • Sub-step S31 configuring a corresponding operation code for the audio data
  • the opcode can include user-defined operational behaviors for audio data.
  • the playing audio data may be fade-in play, fade-out play, etc.; when playing one audio data, the operation information may be normal play, and when playing two or more pieces of audio data, the operation information may include loop play , random play, and more.
  • the operation information of the audio data may be identified by a corresponding string code. For example, normal play is 1, loop play is 2, random play is 3, and so on.
  • Sub-step S32 configuring corresponding operation parameters for the operation code of the audio data
  • the operational parameters may be specific implementation parameters for performing the opcode.
  • the audio data playback may be when it is played, the duration of the play, the number of plays, the play order when there are two or two audio data, and the like.
  • the operational parameters of the audio data may be identified by a corresponding string code.
  • the number of plays can be represented by a string code 1X, where 1 represents the number of times the play is selected and X represents the number of times of play.
  • the operating parameters may be empty in some cases.
  • the operation code is normal play, and when the operation parameter is empty, the audio data can be normally played, that is, the audio data is played when the rendering starts, and when the playback and playback are not controlled. Length, number of plays, etc.
  • Sub-step S33 acquiring an identifier of the audio data
  • the identifier of the audio data may be used to mark the audio data, and may be an inherent identifier of the audio data, such as MD5 (Message Digest Algorithm), ID number, and the like.
  • MD5 Message Digest Algorithm
  • ID number ID number
  • new identifiers can be generated according to preset rules.
  • the sub-step S33 may further include the following sub-steps:
  • Sub-step S331 the audio data is uploaded to a server side corresponding to the browser; the server is configured to generate an identifier of the audio data according to the address of the audio data;
  • Sub-step S332 receiving an identifier of the audio data returned by the server
  • Sub-step S333 extracting a preset identifier of the audio data.
  • the address of the audio data can be a local address or a network address.
  • the audio file can be uploaded to the server storage.
  • the server can then generate a corresponding new identity according to a preset rule.
  • the server may access the address and store the audio data locally on the server; in order to reduce the storage resource occupation and reduce the running resource occupation, the server may directly adopt the The address generates the corresponding identifier.
  • the generated identifier may be a string.
  • the preset identifier of the audio data may be an inherent identifier of the audio data, or may be an identifier corresponding to the audio data stored in the server.
  • Sub-step S34 generating a content code by using the identifier of the audio data
  • the content code may be the identity itself or may be generated according to a preset rule.
  • the user selects the audio data AAA and the special effect data BBB at the same time, wherein AAA and BBB are identifiers, and the content code can be generated as 1AAA2BBB, where 1 represents AAA as audio data. 2 represents BBB as special effects data.
  • Sub-step S35 the feature code image data is composed of the content code, the operation code and the operation parameter.
  • a barcode or a two-dimensional code can be encoded by using a barcode creation application or a two-dimensional code creation application.
  • the signature image data further includes an identification image identifying the image generator.
  • the logo can be directly added to the generated barcode image data or QR code image data without participating in the conversion of the barcode or the two-dimensional code.
  • the content code, the operation code, and the operation parameter may be organized and transcoded according to a preset rule to generate a barcode or a two-dimensional code.
  • the content code occupies the ten-digit string, which is ranked first; the content code occupies the four-digit string, which is ranked second; the operation parameter code occupies the six-digit string, which is ranked third.
  • a logo image can be added to the left side of the generated barcode or QR code to generate feature image data.
  • Step 205 Add the signature image data to generate the feature image on the original image data.
  • the feature image data may be added to the lower, left, right, and upper positions of the original image data, which is not limited in the present invention.
  • Step 206 Upload the generated feature image to a server corresponding to the browser.
  • the server can store the feature image, which can be loaded when the web page is rendered.
  • the user logs in to the user account
  • the user selects the song “Qingzang Plateau” on the network and the song “Paradise” stored by the server as the audio data played during rendering.
  • “Paradise” has a preset identifier 7517, and the network address of "Qinghai Plateau” is http://music.XXX.com/12345678.mp3, and the address is uploaded to the server, and the server generates audio data for the address.
  • the name of the Qinghai-Tibet Plateau is 5903;
  • the content code 1590317517 is generated for the identifier 5903 of the audio data "Qinghai Plateau” and the identifier 7517 of "Paradise", wherein 15903 indicates that the audio data 5903 is played, and 17517 indicates that the audio data 7517 is played;
  • the user-defined play "Qinghai Plateau” operation code is normal play, the string code is 2; the play code of "Paradise” is fade-in play, the string code is 5; that is, the operation code is 1225, of which 12 indicates The operation code of the first audio data "Qinghai Plateau” is 2, 25 indicates that the operation code of the second audio data "Paradise” is 5;
  • the operating parameters are set to play in sequence, the code is 21; and the operating parameters are predefined to accommodate 6 bits of code representing the operating parameters, ie the operating parameter code can be 210000;
  • the generated barcode as shown in Figure 3b, the barcode is 20 pixels high (pixels);
  • FIG. 6 is a flow chart showing the steps of Embodiment 3 of a method for performing image processing in a browser according to an embodiment of the present invention, which may specifically include the following steps:
  • step 601 the login information of the browser user account is obtained, and the login of the browser user is performed; and the formed feature image is saved as a picture corresponding to the browser user.
  • Step 602 acquiring original image data on the browser side
  • the image processing in the browser is implemented as a browser plug-in on the browser side or as a browser application or a stand-alone application that can be called by the browser. sequence.
  • Step 603 obtaining special effect data
  • the special effect data includes a GIF image file or a FLASH file, and of course, other data with dynamic display effects.
  • the step 603 may specifically include the following sub-steps:
  • Sub-step S41 obtaining a local address or a network address of the FLASH element involved in the FLASH file
  • Sub-step S42 extracting a FLASH element of the FLASH file from the local address or a network address
  • Sub-step S43 obtaining a local address or a network address of the GIF picture file
  • Sub-step S44 extracting the GIF picture from the local address or network address.
  • the user may use the browser's habits, for example, from the browsing history to determine which type of special effect the user likes, the type effect data may be directly downloaded to the local, or the type may be The effect data is pushed to the local.
  • Step 604 generating feature code image data according to the special effect data
  • the signature image data includes a content code, an operation code, and an operation parameter
  • the step 504 may include the following sub-steps:
  • Sub-step S51 configuring a corresponding operation code for the special effect data
  • the opcode can include user-defined behaviors for special effects data.
  • the play special effect data may be fade play, erase play, push play, illuminate play, etc.; when the effect data is a GIF picture file, the operation information may be normal play; when playing two or more FLASH files
  • the operation information may include loop play, random play, and the like.
  • the opcode of the effect data can be identified by a corresponding string code. For example, normal play is 1, loop play is 2, random play is 3, and so on.
  • the specific operation information represented by the same operation code may be the same or different.
  • Sub-step S52 configuring corresponding operation parameters for the operation code of the special effect data
  • the operational parameters may be specific implementation parameters for performing the opcode.
  • the effect data playback can be the number of plays, the size of the display, the playback position, the playback order when there are two or two special effects data, the overlay play, and the like.
  • the operational parameters of the special effect data may be identified by a corresponding string code.
  • the playback position can be represented by 1Y, where 1 represents the selected playback position and Y represents the preset Y location.
  • the user can configure the operation parameters by means of mouse click or drag movement, or configure the operation parameters through the interface, and the like.
  • the operating parameters may be empty in some cases.
  • the operation code when playing a GIF file, the operation code is normal playback.
  • the effect data can be normally played, that is, the GIF file is played at the default location when the rendering starts, and the size, the playback position, and the like are not controlled.
  • Sub-step S53 obtaining an identifier of the special effect data
  • the identification of the effect data can be used to mark the effect data, which can be an inherent identifier of the effect data, such as an MD5 value, an ID number, and the like.
  • an MD5 value such as an MD5 value, an ID number, and the like.
  • new identifiers can be generated according to preset rules.
  • sub-step S53 may further comprise the following sub-steps:
  • Sub-step S531 the effect data is uploaded to the server side corresponding to the browser; the server is configured to generate an identifier of the special effect data for the special effect data configured with the operation parameter;
  • Sub-step S532 receiving an identifier of the special effect data returned by the server
  • Sub-step S533 extracting a preset identifier of the special effect data.
  • the effect data can be provided by the server and can have a corresponding identifier.
  • the GIF image file "Fireworks Bloom”
  • the FLASH text The piece “Star flashes”
  • the operation information of the special effect data stored by the server is inconsistent, or when the user adopts the local special effect data, the server does not have a corresponding storage, and the server needs to store the special effect with the configured operation parameter.
  • Data for use in rendering web pages In this case, you need to redefine the identity of the effect data.
  • Sub-step S54 generating a content code by using the identifier of the special effect data
  • the preview can be performed. For example, preview the effects of various effects data, or preview the effects of various effects data superimposed.
  • the feature code image data is composed of the content code, the operation code, and the operation parameter.
  • the signature image data further includes an identification image identifying the image generator.
  • Step 605 Add the signature image data to the original image data to form a feature image.
  • Step 606 Upload the feature picture to a server corresponding to the browser.
  • Step 607 distribute the generated feature picture in the network on the browser side.
  • the feature image in addition to uploading the feature image to the server, the feature image may be shared on the public platform, and the related API (Application Programming Interface) may be invoked to generate the feature image on the microblog and blog. Distribution, sharing resources, and other networks.
  • users can manage feature images, such as deleting, viewing history, and more.
  • the recording starts, and the recording duration is displayed on the interface; for example, the longest recording is 30 seconds.
  • the text color can be changed from the 25th second. It is orange, it turns red in 28 seconds, and it ends automatically in 30 seconds.
  • the user can click the “X” button in the upper right corner of the recording interface to cancel the recording;
  • the picture shows a semi-transparent floating layer, and the floating layer displays icon And the number of seconds, click on the floating layer to play back the recording, click the “X” button on the right side of the floating layer to delete the recording;
  • the “Start Production” button has an external light flashing, prompting the user to start making;
  • the user completes the login or has logged in, and enters the production process
  • the production process displays progress and has text prompts as follows: “Creating a dazzling image in the cloud”, “generating a local dazzling image” and “making a dazzling map made well”;
  • the thumbnail of the dazzle is displayed. There is a play button in the middle of the figure, and the click can preview the play of the dazzle (the full size window of the pop-up window is played);
  • buttons are displayed below: making the next one, saving the picture, sharing the dazzling picture;
  • the image processing specification can be as follows:
  • the original image data shall not be less than 300X200 pixels;
  • an image area having a height of 20 pixels and a width equal to the original image is added below the original image data; the area includes: a splatter icon, a LOGO, and a feature code image data (the height is 10px, which is vertically centered).
  • the completed feature picture can be displayed in "My Hyun Map", and accessing "My Hyun Map” requires login to the user account.
  • Each user account can store a certain number of feature images, for example, 100 sheets. When it is over, it will remind the user when clicking “Start Production”, for example, “The number of your dazzling images has reached 100”.
  • the “My Hyun Map” data is saved on the server side, and the currently displayed list is requested from the server.
  • “My dazzling map” displays the thumbnail of the feature picture, the number of seconds of the sound, click to play, and also provides the function of downloading the feature picture, sharing the feature picture, and deleting the feature picture.
  • the user clicks to delete the feature picture the user is prompted: "After deleting the dazzle, the other person cannot continue playing the sound on the dazzle, and it is expected to take effect within 24 hours.”
  • the deletion operation is performed.
  • FIG. 8 is a structural block diagram of an apparatus for performing image processing in a browser according to an embodiment of the present invention. Specifically, the following modules may be included:
  • the original image data obtaining module 801 is adapted to acquire original image data on the browser side;
  • the rich media data obtaining module 802 is adapted to acquire audio data and/or special effect data
  • the feature code image data generating module 803 is adapted to generate the feature code image data according to the audio data and/or the special effect data;
  • the feature picture generating module 804 is adapted to add the feature code image data to generate the feature picture on the original image data.
  • the apparatus may further comprise the following modules:
  • the account login module is adapted to obtain login information of the browser user account and log in to the browser user;
  • the picture saving module is adapted to save the formed feature picture as a picture corresponding to the browser user.
  • the original image data obtaining module is further adapted to:
  • Determining an address of the original image data the address including a local address or a network address
  • the original image data is extracted from the address.
  • the audio data comprises an audio file or a recording file;
  • the special effect data comprises a GIF picture file or a FLASH file.
  • the rich media data obtaining module is further adapted to:
  • the signature image data includes a content code, an operation code, and an operation parameter
  • the signature image data generation module is further adapted to:
  • the feature code image data is composed of the content code, the operation code, and the operation parameter.
  • the signature image data generating module is further adapted to:
  • a preset identifier of the audio data and/or special effect data is extracted.
  • the signature image data further includes an identification image identifying the image generator.
  • the signature image data is two-dimensional code image data or barcode image data.
  • the apparatus may further comprise the following modules:
  • the feature image uploading module is adapted to upload the generated feature image to a server corresponding to the browser.
  • the image processing in the browser is implemented as a browser plug-in on the browser side or as a browser application or as a stand-alone application that can be called by the browser.
  • the device may further include the following modules:
  • the feature picture distribution module is adapted to distribute the generated feature picture in the network on the browser side.
  • the invention also discloses a browser, which may specifically comprise the following modules:
  • An original image data obtaining module configured to acquire original image data on a browser side
  • a rich media data acquisition module adapted to acquire audio data and/or special effect data
  • the feature code image data generating module is adapted to generate the feature code image data according to the audio data and/or the special effect data;
  • a feature picture generating module configured to add the feature code image data to generate the feature picture on the original image data.
  • the apparatus may further comprise the following modules:
  • the account login module is adapted to obtain login information of the browser user account and log in to the browser user;
  • the picture saving module is adapted to save the formed feature picture as a picture corresponding to the browser user.
  • the original image data obtaining module is further adapted to:
  • Determining an address of the original image data the address including a local address or a network address
  • the original image data is extracted from the address.
  • the audio data comprises an audio file or a recording file;
  • the special effect data comprises a GIF picture file or a FLASH file.
  • the rich media data obtaining module is further adapted to:
  • the signature image data includes a content code, an operation code, and an operation parameter
  • the signature image data generation module is further adapted to:
  • the feature code image data is composed of the content code, the operation code, and the operation parameter.
  • the signature image data generating module is further adapted to:
  • the server is configured to generate an identifier of the special effect data for the special effect data
  • a preset identifier of the audio data and/or special effect data is extracted.
  • the signature image data further includes an identification image identifying the image generator.
  • the signature image data is two-dimensional code image data or barcode image data.
  • the apparatus may further comprise the following modules:
  • the feature image uploading module is adapted to upload the generated feature image to a server corresponding to the browser.
  • the image processing in the browser is implemented as a browser plug-in on the browser side or as a browser application or as a stand-alone application that can be called by the browser.
  • the device may further include the following modules:
  • the feature picture distribution module is adapted to distribute the generated feature picture in the network on the browser side.
  • FIG. 9 is a flow chart showing the steps of an embodiment of a method for performing image loading in a browser according to an embodiment of the present invention, which may specifically include the following steps:
  • Step 901 When the browser detects the trigger event, acquiring a feature image that meets the preset condition in the current page;
  • the triggering event includes a webpage loading completion event, and/or, a picture Mouse over the hover event.
  • a webpage loading completion event that is, a Document Complete event
  • the page When the browser loads the webpage, a webpage loading completion event, that is, a Document Complete event, is generated.
  • a webpage loading completion event that is, a Document Complete event
  • the page When the page is loaded, it can be dynamically rendered.
  • a trigger point is set on the feature picture, and the trigger point can be triggered according to a user's hover operation on the feature picture. More specifically, the operation may include an operation of a mouse, a gesture, or a touch pen on a website information presentation area, and may also include a keyboard, a touch screen, a bar code reader, and a magnetic reader (including a magnetic strip, a magnetic disk, and a magnetic tape reader).
  • the operation of the website information presentation area triggered by any means such as a smart card reader, a pressure sensor, a motion detector, and other converters connected to the digital processor.
  • the hover is A method that mimics a hover event (mouse moves over an object and moves out of the object), which provides a "keep in” state for frequently used tasks.
  • a hover event mouse moves over an object and moves out of the object
  • the trigger point triggers the first function specified (over(Function), the mouse moves to the function to be triggered on the element).
  • the specified second function is triggered ( Out (Function), the mouse moves out of the function to be triggered by the element.) Also, it is accompanied by the detection of whether the mouse is still in a specific element (for example Div layer in the pop-up), and if so, will continue to 'hover', out without triggering event, the trigger point may be employed particularly JavaScript code set embodiment.
  • the step 801 may specifically include the following sub-steps:
  • Sub-step S61 extracting a picture that matches the preset display area and/or the preset size from the memory
  • the preset conditions may include a preset display area, a preset size, and the like.
  • the images of different purposes may have a relatively stable position.
  • the two sides of the webpage and the top of the webpage are generally used for displaying the advertisement image.
  • the feature image in the embodiment of the present invention may also have a preset position, and may have a preset.
  • the size of the size may be included in the embodiment of the present invention.
  • Sub-step S62 determining whether the data of the specified position of the extracted picture is the number of feature code images According to; if yes, then perform sub-step S63;
  • the specified position may be below the picture, may be the left side of the picture, etc., and the present invention does not limit this.
  • the method for generating a feature image by the feature image shown in FIG. 5 is: increasing the original image data, increasing the height of 20 pix below it, widening the width of the feature image data, and superimposing the feature image data on the original image data.
  • Feature images are generated in the enlarged area below.
  • the method for extracting the feature code image data may be: extracting image data of 20pix high at the bottom of the feature image, the image data is the feature code image data, and the remaining part is the original image, as shown in FIG. 3a.
  • the signature image data can be checked.
  • the sub-step S62 may further include the following sub-steps:
  • Sub-step S621 the data of the specified location is decoded by a two-dimensional code or a barcode, and the corresponding string information is obtained;
  • Sub-step S622 matching the character string message, if the character string information conforms to a predetermined data format, determining that the data of the specified position is the feature code image data.
  • the feature code image data may be a two-dimensional code or a barcode, etc., and the data of the specified location is decoded, and may be used to identify whether the data of the location is the signature image data.
  • the signature image data When the signature image data is generated, it may be generated according to a certain rule data format, and then, at the time of verification, the verification may be performed according to the predetermined data format.
  • the predefined format for generating signature image data can be as follows:
  • Sub-step S63 the extracted picture is taken as a feature picture.
  • the feature image in the current webpage that meets the preset condition may be obtained from a memory (for example, a local cache), and the feature image may be a non-advertising or decorative image.
  • a memory for example, a local cache
  • the feature image may be a non-advertising or decorative image.
  • the DOM tree node and the image size of the traversing webpage are obtained from the memory to obtain a cached image that meets the preset condition, and the image is a feature image.
  • the feature picture is related to the object picture that is dynamically rendered by the user, and the essence is also image data.
  • the feature image may include signature image data and original image data describing the user-defined dynamic rendering operation, as shown in FIG.
  • the following steps are specifically included to prevent the feature picture from being erroneous and prevented from being modified during the transmission:
  • step S1 the feature code image data is self-checked.
  • the trigger signature image data is checked to see if it has been modified, and if it is found to be modified, the rendering or other processing is paused.
  • the basic check method can include checksum (sumsum check code), check size, check jump code, and so on.
  • the gray scale calculation is performed after the self-checking to prepare for the analysis of the subsequent signature image data.
  • Step 902 Extract feature code image data in the feature image, where the feature code image data marks a rich media resource loaded with the feature image;
  • the feature code image data may be a barcode, may be a two-dimensional code, or may be a combination of a barcode and a two-dimensional code, or may be other image data, as long as the user's custom rendering operation can be recorded, the present invention does not limit.
  • the method for extracting the feature code image data may be opposite to the method for generating the feature image by using the feature code image data and the original image, which is not limited by the present invention.
  • the step 802 may specifically include the following sub-steps:
  • Sub-step S71 after the character code image data is decoded by the two-dimensional code or the barcode, the corresponding character string information is obtained;
  • the barcode decoding application and the two-dimensional code solution can be used.
  • the code application performs decoding processing to acquire the user's custom rendering operation information and perform a rendering operation.
  • the content code is an identifier of the audio data and/or special effect data
  • the opcode is an identification of the manner in which the audio data and/or the effect data are operated.
  • the operation mode includes at least one of playing a single music, looping music, playing an animation, playing a Flash video, a gradient adding element, a fade-out element, and playing a recording.
  • the above operation mode is only an example.
  • other operation modes may be set according to actual conditions, which are not limited by the embodiment of the present invention.
  • the content code and the opcode may be codes, such as strings, that may be used to indicate different information.
  • the opcode may indicate operational information for playing audio data and/or special effects data, which may include user-defined operational behaviors for audio data and/or special effects data.
  • the playing audio data may be fade-in play, fade-out play, etc.; when playing one audio data, the operation information may be normal play, and when playing two or more pieces of audio data, the operation information may include loop play , random play, and more.
  • the play special effect data may be fade play, erase play, push play, illuminate play, etc.; when the effect data is a GIF picture file, the operation information may be normal play; when playing two or more FLASH files
  • the operation information may include loop play, random play, and the like.
  • the operation code of the audio data and/or the special effect data may be identified by a corresponding string code.
  • normal play is 1
  • loop play is 2
  • random play is 3
  • the representative operation information may be the same or different.
  • the parsed string information further includes: an operation parameter corresponding to the opcode, which marks a preset execution of an operation mode of the audio data and/or special effect data parameter.
  • the operating parameters include:
  • the operational parameters may be used to indicate specific operational parameters for playing audio data and/or special effects data, which may be specific implementation parameters for implementing operational behavior.
  • the audio data playback may be when it is played, the duration of the play, the number of plays, the play order when there are two or two audio data, and the like.
  • the effect data playback can be, the number of times of play, the size of the display, the playback position, the playback order when there are two or two special effect data, the overlay play, and the like.
  • the operational parameters of the audio data and/or the special effect data may be identified by a corresponding string code.
  • the number of plays can be represented by a string code 1X, where 1 represents the number of times the play is selected, X represents the number of times of play, and the like.
  • the operating parameters may be empty in some cases.
  • the audio data is customized to play, the operation code is normal play, and when the operation parameter is empty, the audio data can be normally played, that is, the audio data is played at the beginning of the rendering, and the playback time, the play duration, and the play times are not controlled. Wait.
  • the audio data is customized to play
  • the operation code is normal play
  • the audio data can be normally played, that is, the audio data is played when the rendering starts, and the playback time, the playback duration, and the playback are not controlled. The number of times.
  • the signature image data further includes an identification image that identifies the producer.
  • the logo can be extracted from the signature image data according to the rules of the generation without participating in the conversion of the barcode or the two-dimensional code, as shown in FIG. 3c.
  • the method of parsing the Logo, the content code, the operation code and the operation parameter in the signature image data is corresponding to the method of generating the signature image data by organizing the logo, the content code, the operation code and the operation parameter.
  • the predefined format of the signature image data can be as shown in the following table:
  • the 1-10th code "1590317517” is extracted as the content code
  • the 11th-14th code "1225" is extracted as the operation code
  • the 15-20th character is extracted.
  • the string code "210000" is used as an operation parameter.
  • Step 903 Acquire a corresponding rich media resource according to the feature code image data.
  • the rich media data may include audio data and/or special effect data, the audio data including an audio file or a voice file; the special effect data includes a GIF picture file or a FLASH file.
  • the audio data may be local, may be stored by the server, or may be stored by other platforms on the Internet; the effect data may include data with dynamic display effects such as GIF image files and/or FLASH files, and the present invention does not Limit it.
  • the identifier of the audio data and/or the special effect data may be an inherent identifier of the audio data and/or the special effect data, such as an MD5 value, an ID number, etc., in order to facilitate unified management and improve management efficiency, a new rule may also be generated according to a preset rule.
  • the identification is not limited as long as the audio data and/or the special effect data can be identified.
  • the sub-step 803 may specifically include the following sub-steps:
  • Sub-step S81 sending a rich media data acquisition request to a server corresponding to the browser;
  • the rich media data acquisition request includes an identifier of the audio data and/or the special effect data;
  • Sub-step S82 receiving audio data and/or special effect data returned by the server
  • the server stores audio data and/or special effect data, and can download the required audio data and/or special effect data from the server.
  • Sub-step S83 parsing the identifier of the audio data to obtain a network address of the audio data:
  • Sub-step S84 accessing the network address of the audio data, and acquiring the audio data
  • the address of the audio data may be a local address or a network address.
  • the method of parsing the identifier of the audio data to determine the address is opposite to the method of generating the identifier by using the address of the audio data.
  • Sub-step S85 extracting the effect data corresponding to the identifier of the special effect data locally.
  • the type of special effect data can be directly downloaded to the local, or This type of special effects data is pushed locally.
  • the acquired audio data and/or special effect data may be audio data and/or special effect data played during dynamic rendering.
  • Step 904 Load the acquired rich media resource and the feature image in one place.
  • the user can perform dynamic rendering according to the custom rendering operation, and the rich media resource and the feature image are loaded in one place, and the rich media resource can be above, left, and right of the feature image.
  • the surroundings, such as the side, the bottom, and the like, are not limited by the present invention.
  • the step 804 may specifically include the following sub-steps:
  • Sub-step S91 generating a window in the preset area on the display area of the feature image to load the acquired rich media resource, where the generated window is a browser window or a webpage floating layer element;
  • Sub-step S92 loading a plug-in on the browser side in the window or calling a system API to load and use the rich media resource.
  • the audio data 5903 is instructed by the content code "1590317517", and the 17517 indicates that the audio data 7517 is played, and it is known that the audio data needs to be played during rendering, and a character is generated at a specified position of the feature image, for example, in the lower left corner.
  • Browser window browse Rendering a preset button image in the window, and automatically playing the audio data by default, that is, loading an audio player in the background, which can be a browser plug-in, and then parsing "5903" and "7517” to obtain the playback when rendering.
  • the URL of the audio data 5903 is http://music.XXX.com/12345678.mp3. Visit the website to get the song "Qingzang Plateau", then play the song "Qingzang Plateau" in the audio player; extract 7517 from the local Audio data "Paradise”.
  • the content code is playing the GIF picture 1
  • the operation code is normal playing
  • the operation parameter is empty
  • the content code is playing the FLASH animation 1
  • the operation code is performing the special effects of the fade-in and fade-out to play the FLASH animation 1, wherein the FLASH is recorded in the operation parameter.
  • the position, time, number of plays, etc. of the animation 1 fade in and out.
  • the identifier of the corresponding FLASH animation file can be obtained according to the content code, which can be a preset animation file, which is saved on the server side, and the Flash animation file can be obtained from the server.
  • the operation parameters it is known how to perform the above-described playback of the Flash animation 1, for example, the time of flashing or fade-in, the display position, and the like.
  • the feature code image data in the feature picture can be parsed, and the rendering operation of the recorded user using the audio data, the special effect data, and the like when loading the image can be obtained, and then the corresponding dynamic rendering process is performed, thereby solving the problem.
  • the client does not support the user to define the rendering operation when the image is loaded.
  • the browser implements rendering of the image based on the browser, rich webpage rendering mode, reducing the storage resource consumption of the server, reducing the running resource occupation of the server, and improving the browser. The benefits of rendering web pages.
  • the user hoveres the mouse cursor over a picture it starts to identify whether it is a feature picture. Specifically, one can be identified by the barcode area below the picture. Whether the picture is a feature picture. It should be noted that the feature images are uploaded to the main websites such as Weibo, space, forums, etc., and can still be recognized after moderate compression.
  • the sound automatically stops playing; if it is moved in again, it will play again from the beginning; the lower left of the feature picture will display the playback progress of the dazzling sound with a circular progress bar;
  • the user can click the pause button to pause the sound playback of the dazzle;
  • the image range will be removed, and the playback progress and pause status will be temporarily remembered; the dazzling picture has been paused, and the hovering will not automatically play from the beginning until the user clicks the lower left to continue the play button, and continues to press the last progress. broadcast;
  • FIG. 11 is a structural block diagram of an apparatus for performing image loading in a browser according to an embodiment of the present invention, which may specifically include the following modules:
  • the feature picture obtaining module 1101 is configured to acquire, when the browser detects the trigger event, the feature picture that meets the preset condition in the current page;
  • the feature code image data extraction module 1102 is adapted to extract feature code image data in the feature image; wherein the feature code image data marks a rich media resource loaded with the feature image;
  • the rich media resource obtaining module 1103 is adapted to obtain a corresponding rich media resource according to the feature code image data
  • the loading module 1104 is adapted to load the acquired rich media resource and the feature image in one place.
  • the triggering event comprises a webpage loading completion event, and/or a mouseover hover event of the picture.
  • the feature picture obtaining module is further adapted to:
  • the extracted picture is taken as the feature picture.
  • the feature picture obtaining module is further adapted to:
  • the signature image data extraction module is further adapted to:
  • the content code is an identifier of audio data and/or special effect data
  • the opcode is an identification of the manner in which the audio data and/or the effect data are operated.
  • the audio data comprises an audio file or a recording file;
  • the special effect data comprises a GIF picture file or a FLASH file.
  • the parsed string information further includes: an operation parameter corresponding to the opcode, which marks a preset execution of an operation mode of the audio data and/or special effect data parameter.
  • the signature image data further includes an identification image that identifies the producer.
  • the rich media resource obtaining module is further adapted to:
  • the rich media data acquisition request includes an identifier of the audio data and/or the special effect data
  • the effect data corresponding to the identifier of the special effect data is locally extracted.
  • the device may further include the following modules:
  • the self-checking module is adapted to perform self-checking on the feature code image data.
  • the loading module is further adapted to:
  • the mode of operation comprises:
  • Play music at a time loop music, play animations, play Flash videos, add elements to gradients, fade out elements, and play back at least one of them.
  • the invention also discloses a browser, which may specifically comprise the following modules:
  • a feature picture obtaining module configured to acquire a feature picture that meets a preset condition in the current page when the browser detects the trigger event
  • a feature code image data extraction module configured to extract feature code image data in the feature image; wherein the feature code image data marks a rich media resource loaded with the feature image;
  • a rich media resource obtaining module configured to acquire a corresponding rich media resource according to the feature code image data
  • a loading module configured to load the obtained rich media resource and the feature image in one place.
  • the triggering event comprises a webpage loading completion event, and/or a mouseover hover event of the picture.
  • the feature picture obtaining module is further adapted to:
  • the extracted picture is taken as the feature picture.
  • the feature picture obtaining module is further adapted to:
  • the signature image data extraction module is further adapted to:
  • the content code is an identifier of audio data and/or special effect data
  • the opcode is an identification of the manner in which the audio data and/or the effect data are operated.
  • the audio data comprises an audio file or a recorded text.
  • the special effect data includes a GIF picture file or a FLASH file.
  • the parsed string information further includes: an operation parameter corresponding to the opcode, which marks a preset execution of an operation mode of the audio data and/or special effect data parameter.
  • the signature image data further includes an identification image that identifies the producer.
  • the rich media resource obtaining module is further adapted to:
  • the rich media data acquisition request includes an identifier of the audio data and/or the special effect data
  • the effect data corresponding to the identifier of the special effect data is locally extracted.
  • the browser may further include the following modules:
  • the self-checking module is adapted to perform self-checking on the feature code image data.
  • the loading module is further adapted to:
  • the mode of operation comprises:
  • Play music at a time loop music, play animations, play Flash videos, add elements to gradients, fade out elements, and play back at least one of them.
  • the display position of the image or video, the time when the music or video is played, the playback of music or video At least one of the number of times and the display time of the image effect.
  • the various component embodiments of the present invention may be implemented in hardware, or in a software module running on one or more processors, or in a combination thereof.
  • a microprocessor or digital signal processor may be used in practice to implement some or some of some or all of the components of a device for loading a picture in a browser in accordance with an embodiment of the present invention. All features.
  • the invention can also be implemented as a device or device program (e.g., a computer program and a computer program product) for performing some or all of the methods described herein.
  • Such a program implementing the invention may be stored on a computer readable medium or may be in the form of one or more signals. Such signals may be downloaded from an Internet website, provided on a carrier signal, or provided in any other form.
  • FIG. 12 illustrates an electronic device, such as a computer, a mobile device, that can perform image loading in a browser in accordance with the present invention.
  • the electronic device conventionally includes a processor 1210 and a computer program product or computer readable medium in the form of a memory 1220.
  • the memory 1220 may be an electronic memory such as a flash memory, an EEPROM (Electrically Erasable Programmable Read Only Memory), an EPROM, a hard disk, or a ROM.
  • Memory 1220 has a memory space 1230 for program code 1231 for performing any of the method steps described above.
  • storage space 1230 for program code may include various program codes 1231 for implementing various steps in the above methods, respectively.
  • the program code can be read from or written to one or more computer program products.
  • Such computer program products include program code carriers such as hard disks, compact disks (CDs), memory cards or floppy disks.
  • Such a computer program product is typically a portable or fixed storage unit as described with reference to FIG.
  • the storage unit may have a storage section, a storage space, and the like arranged similarly to the storage 1220 in the electronic device of FIG.
  • the program code can be compressed, for example, in an appropriate form.
  • the storage unit includes computer readable code 1231 ', ie, code readable by a processor, such as 1210, that when executed by an electronic device causes the electronic device to perform each of the methods described above step.

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

一种在浏览器中进行图片处理的方法,包括:在浏览器侧获取原始图像数据,获取音频数据和/或特效数据;依据音频数据和/或特效数据,生成特征码图像数据;在原始图像数据上添加特征码图像数据生成特征图片。

Description

一种在浏览器中进行图片处理的方法、装置和浏览器 技术领域
本发明涉及互联网应用的技术领域,尤其涉及一种在浏览器中进行图片处理的方法、一种在浏览器中进行图片处理的装置,以及,一种浏览器。
背景技术
随着互联网应用的日趋普及,互联网应用正在从单一的访问和浏览网页转变得更为丰富,在此过程中,用户对图片进行编辑美化的个性化需求越来越普遍,但是很多应用无法支持用户对图片进行编辑美化的个性化需求。
例如浏览器加载渲染HTML(HyperText Markup Language,超文本标记语言)网页。浏览器是指可以显示网页服务器或者文件系统的HTML(HyperText Markup Language,超文本标记语言)文件内容,并让用户与这些文件交互的一种软件。网页浏览器主要通过HTTP(HTTP-Hypertext transfer protocol,超文本传输协议)协议与网页服务器交互并获取网页,这些网页由URL(UniformResourceLocator,统一资源定位符)指定,文件格式通常为HTML,并由MIME(Multipurpose Internet Mail Extensions,多用途互联网邮件扩展)在HTTP协议中指明。一个网页中可以包括多个文档,每个文档都是分别从服务器获取的。
大部分的浏览器本身支持除了HTML之外的广泛的格式,例如JPEG、PNG、GIF等图像格式,并且能够扩展支持众多的插件(plug-ins)。另外,许多浏览器还支持其他的URL类型及其相应的协议,如FTP、Gopher、HTTPS(HTTP协议的加密版本)。
HTTP内容类型和URL协议规范允许网页设计者在网页中嵌入图像、动画、视频、声音、流媒体等。
以下是浏览器加载渲染HTML网页中加载图片的过程:
1.用户输入网址(假设是个html页面,并且是第一次访问),浏览器向 服务器发出请求,服务器返回html文件;
2.浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件;
3.浏览器又发出CSS文件的请求,服务器返回这个CSS文件;
4.浏览器继续载入html中<body>部分的代码,并且已经接收到CSS文件,可以开始渲染页面;
5.浏览器在代码中发现一个<img>标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码。
浏览器对于图片元素的加载和渲染是在正常的网页元素进行加载的,浏览器渲染引擎在图片元素识别后,按照HTML语言的图片元素的标签的格式进行识别,然后向对应的服务器下载对应的图片。
按照HTML的标准进行图片元素的识别和渲染,浏览器引擎就是简单地完成一张图片的加载,图片本身的内容决定了图片加载后显示的内容,浏览器一般不会对图片进行非图片内容的其它渲染工作,即仅仅是静态的图片加载,并不支持用户对图片进行编辑美化的个性化需求。
在浏览器中加载的图片的动态效果,例如加载配套的声音或者动画效果,都是由图片内容来提供的。可以使用JS(JavaScript,脚本语言)实现一些动态的效果——加载多张图片用以进行切换、播放对应的背景或者在后台播放声音,即可以通过JS动态地加载声音文件、动画图片等。
但是JS的编写操作复杂,一般用户不具备JS的编写能力,占用系统资源很多,此外服务器一般不支持客户端对网页的JS进行再次编写,即不支持用户对图片进行编辑美化的个性化需求。由于JS的编写习惯不一样,各种JS的运行和浏览器不一定匹配,可能会出现JS运行不兼容的问题。
发明内容
鉴于上述问题,提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的一种在浏览器中进行图片处理的方法和相应的一种在浏览器中进行图片处理的装置、一种浏览器。
根据本发明的一个方面,提供了一种在浏览器中进行图片处理的方法,包括:
在浏览器侧获取原始图像数据,获取音频数据和/或特效数据;
依据所述音频数据和/或特效数据,生成特征码图像数据;
在所述原始图像数据上添加所述特征码图像数据生成特征图片。
根据本发明的另一方面,提供了一种在浏览器中进行图片处理的装置实施例的结构框图,包括:
原始图像数据获取模块,适于在浏览器侧获取原始图像数据;
富媒体数据获取模块,适于获取音频数据和/或特效数据;
特征码图像数据生成模块,适于依据所述音频数据和/或特效数据,生成特征码图像数据;
特征图片生成模块,适于在所述原始图像数据上添加所述特征码图像数据生成特征图片。
根据本发明的另一方面,提供了一种在浏览,包括:
原始图像数据获取模块,适于在浏览器侧获取原始图像数据;
富媒体数据获取模块,适于获取音频数据和/或特效数据;
特征码图像数据生成模块,适于依据所述音频数据和/或特效数据,生成特征码图像数据;
特征图片生成模块,适于在所述原始图像数据上添加所述特征码图像数据生成特征图片。
根据本发明的又一个方面,提供了一种计算机程序,其包括计算机可读代码,当所述计算机可读代码在电子设备上运行时,导致所述电子设备执行所述的在浏览器中进行图片处理的方法。
根据本发明的再一个方面,提供了一种计算机可读介质,其中存储了所述的计算机程序。
本发明的有益效果为:
根据本发明的一种基于网页渲染的图片处理方法、装置以及浏览器,可以通过特征码图像数据记载用户对在加载图片时的采用音频数据、特效 数据等的自定义渲染操作,由此解决了客户端不支持用户个性化定义图片加载时的渲染操作的问题,取得了基于浏览器实现对于图片的渲染,丰富的网页渲染方式,减少服务器存储资源占用,降低服务器运行资源占用,提高了浏览器渲染网页效率的有益效果。
上述说明仅是本发明技术方案的概述,为了能够更清楚了解本发明的技术手段,而可依照说明书的内容予以实施,并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂,以下特举本发明的具体实施方式。
附图说明
通过阅读下文优选实施方式的详细描述,各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的,而并不认为是对本发明的限制。而且在整个附图中,用相同的参考符号表示相同的部件。在附图中:
图1示意性示出了根据本发明一个实施例的一种在浏览器中进行图片处理的方法实施例1的步骤流程图;
图2示意性示出了根据本发明一个实施例的一种在浏览器中进行图片处理的方法实施例2的步骤流程图;
图3a示意性示出了根据本发明一个实施例的一种原始图片示例图;
图3b示意性示出了根据本发明一个实施例的一种条形码示例图;
图3c示意性示出了根据本发明一个实施例的一种标识图片示例图;
图4示意性示出了根据本发明一个实施例的一种特征码图像数据示例图;
图5示意性示出了根据本发明一个实施例的一种特征图片示例图;
图6示意性示出了根据本发明一个实施例的一种在浏览器中进行图片处理的方法实施例3的步骤流程图;
图7a-图7i示意性示出了根据本发明一个实施例的一种特征图片制作示例流程图;
图8示意性示出了根据本发明一个实施例的一种在浏览器中进行图片处 理的装置实施例的结构框图;
图9示意性示出了根据本发明一个实施例的一种在浏览器中进行图片加载的方法实施例的步骤流程图;
图10a和图10b示意性示出了根据本发明一个实施例的一种特征图片的解析示例图;
图11示意性示出了根据本发明一个实施例的一种在浏览器中进行图片加载的装置实施例的结构框图;
图12示意性地示出了用于执行根据本发明的方法的电子设备的框图;以及
图13示意性地示出了用于保持或者携带实现根据本发明的方法的程序代码的存储单元。
具体实施方式
下面结合附图和具体的实施方式对本发明作进一步的描述。
参照图1,示出了根据本发明一个实施例的一种在浏览器中进行图片处理的方法实施例1的步骤流程图,具体可以包括以下步骤:
步骤101,在浏览器侧获取原始图像数据;
步骤102,获取音频数据和/或特效数据;
步骤103,依据所述音频数据和/或特效数据,生成特征码图像数据;
步骤104,在所述原始图像数据上添加所述特征码图像数据生成特征图片。
在本发明实施例中,可以通过特征码图像数据记载用户对在加载图片时的采用音频数据、特效数据等的自定义渲染操作,由此解决了客户端不支持用户个性化定义图片加载时的渲染操作的问题,取得了基于浏览器实现对于图片的渲染,丰富的网页渲染方式,减少服务器存储资源占用,降低服务器运行资源占用,提高了浏览器渲染网页效率的有益效果。
参照图2,示出了根据本发明一个实施例的一种在浏览器中进行图片处理的方法实施例2的步骤流程图,具体可以包括以下步骤:
步骤201,获得浏览器用户账号的登录信息,进行浏览器用户的登录;则并将所述形成的特征图片保存为该浏览器用户对应的图片。
在互联网资源分享的时代,用户很容易出现非自律行为,为了加强管理,用户对于加载图片时的自定义渲染操作,可以是基于用户账号进行的,防止出现用户传播非法图片、音频数据和特效数据等非法行为。
此外,登陆浏览器用户账号还可以将其自定义渲染操作中涉及数据保存在其账号数据中,以方便用户在登陆不同的浏览器还可以继续沿用其自定义的渲染操作。
步骤202,在浏览器侧获取原始图像数据;
在具体实现中,所述浏览器中进行图片处理是实现为浏览器侧的一个浏览器插件或者为一个浏览器应用或者为浏览器可调用的一个独立应用程序。
需要说明的是,原始图像数据是相对于形成特征图片而言,其可以为网页渲染时加载的图片,为用户选取,可以是本地的,也可以是网上的。
在本发明的一种优选实施例中,所述步骤202具体可以包括如下子步骤:
子步骤S11,确定所述原始图像数据的地址,所述地址包括本地地址或网络地址;
子步骤S12,从所述地址提取所述原始图像数据。
获得原始图像数据之后,用户的自定义动态渲染操作可以是基于该原始图像数据进行的。
步骤203,获取音频数据;
在具体实现中,音频数据包括音频文件或录音文件。音频数据可以是本地的,可以是浏览器对应的服务器所存储的,还可以是网上其他平台所存储的,本发明对此不加以限制。
在本发明的一种优选实施例中,所述步骤203具体可以包括如下子步骤:
子步骤S21,获取音频文件或录音文件的本地地址或网络地址;
子步骤S22,从所述本地地址或网络地址提取所述音频文件或录音文件;
音频文件,可以是歌曲、影音音频等等,录音文件,可以是录制的歌曲、祝福语等等。
步骤204,依据所述音频数据生成特征码图像数据;
在实际应用中,所述特征码图像数据可以为二维码(2-dimensional bar code)图像数据或条形码图像数据(barcode)。
当然,特征码图像数据还可以是其他图像数据,只要能记录用户的自定义渲染操作即可。
在本发明的一种优选实施例中,所述特征码图像数据包括内容码、操作码和操作参数,所述步骤204可以包括如下子步骤:
子步骤S31,为所述音频数据配置对应的操作码;;
操作码中可以包括用户对音频数据自定义的操作行为。例如,播放音频数据可以是渐强播放、渐弱播放等等;当播放一个音频数据时,操作信息可以为正常播放,当播放两个或两个以上的音频数据时,操作信息可以包括循环播放、随机播放等等。
在实际应用中,音频数据的操作信息可以有对应字符串代码进行标识。例如,正常播放为1,循环播放为2,随机播放为3等等。
子步骤S32,为所述音频数据的操作码配置对应的操作参数;
操作参数可以为执行操作码的具体实施参数。例如,音频数据播放可以是在何时播放、播放时长、播放次数、当存在两个或两个音频数据时的播放顺序等等。
在实际应用中,音频数据的操作参数可以有对应字符串代码进行标识。例如,播放次数可以用字符串代码1X表示,其中1代表选择播放次数,X代表具体播放的次数。
需要说明的是,操作参数在某些情况下可以为空。例如,自定义播放音频数据,操作码为正常播放,操作参数为空时,可以指示正常播放该音频数据,即在进行渲染开始时播放该音频数据,不控制何时播放、播放时 长、播放次数等。
子步骤S33,获取所述音频数据的标识;
音频数据的标识可以用于标记音频数据,可以是该音频数据的固有标识,例如MD5(Message Digest Algorithm,消息摘要算法第五版)值,ID号等等。为了便于统一管理,提高管理效率,可以根据预设规则生成新的标识。
在本发明实施例的一种优选示例中,所述子步骤S33进一步可以包括如下子步骤:
子步骤S331,将所述音频数据上传至浏览器对应的服务器侧;所述服务器用于依据所述音频数据的地址生成所述音频数据的标识;
子步骤S332,接收所述服务器返回的所述音频数据的标识;;
或者,
子步骤S333,提取所述音频数据的预置标识。
音频数据的地址可以是本地地址,也可以是网络地址。
当音频数据的地址为本地地址时,为了提高服务的稳定性,可以上传该音频文件至服务器存储。服务器继而可以按照预设规则生成对应的新的标识。
当音频数据的地址为网络地址时,为了提高服务的稳定性,服务器可以访问所述地址,将该音频数据存储在服务器本地;为了减少存储资源占用和降低运行资源占用,服务器也可以直接采用该地址生成对应的标识。
在实际应用中,为方便生成特征码图像数据,生成的标识可以是字符串。
需要说明的是,音频数据的预置标识可以为该音频数据的固有标识,也可以是存储在服务器的音频数据对应的标识。
子步骤S34,采用所述音频数据的标识生成内容码;
在实际应用中,内容码可以是标识本身,也可以按照预设规则生成。例如,用户同时选择了音频数据AAA和特效数据BBB,其中AAA和BBB为标识,可以生成内容码为1AAA2BBB,其中,1代表AAA为音频数据, 2代表BBB为特效数据。
子步骤S35,由所述内容码、操作码和操作参数组成特征码图像数据。
在具体实现中,可以采用条形码制作应用程序或二维码制作应用程序等进行条形码或二维码的编码制作。
在本发明的一种优选实施例中,所述特征码图像数据中还包括标识出图片生成方的标识图片。
标识图片(Logo)可以不参与条形码或二维码的转换,直接添加到已生成的条形码图像数据或二维码图像数据中。
需要说明的是,内容码、操作码和操作参数可以按照预设规则进行组织后转码生成条形码或二维码。例如,内容码占十位字符串,排在第一位;内容码占四位字符串,排在第二位;操作参数码占六位字符串,排在第三位。标识图片(Logo)可以添加到生成的条形码或二维码的左边,生成特征图像数据。
步骤205,在所述原始图像数据上添加所述特征码图像数据生成特征图片;
在实际应用中,可以原始图像数据的下方、左方、右方、上方等位置添加特征图像数据,本发明对此不加以限制。
步骤206,将所述生成的特征图片上传至所述浏览器对应的服务器中。
该服务器可以存储该特征图片,该特征图片可以在网页渲染时加载。
为了方便本领域技术人员更好地理解本发明,以下通过一个完整示例更进一步说明本发明:
1、用户登陆用户账号;
2、获得原始图片,如图3a所示;
3、用户选择了网络上的歌曲“青藏高原”和服务器存储的歌曲“天堂”作为渲染时播放的音频数据。其中,“天堂”具有预置的标识7517,“青藏高原”的网络地址为http://music.XXX.com/12345678.mp3,将该地址上传至服务器,服务器针对该地址生成了音频数据“青藏高原”的标识,为5903;
4、针对音频数据“青藏高原”的标识5903和“天堂”的标识7517生成内容码1590317517,其中,15903指示播放音频数据5903,17517指示播放音频数据7517;
5、用户自定义播放“青藏高原”的操作码为正常播放,字符串代码为2;播放“天堂”的操作码为渐强播放,字符串代码为5;即操作码为1225,其中12指示播放第一个音频数据“青藏高原”的操作码为2,25指示播放第二个音频数据“天堂”的操作码为5;
6、操作参数设定为顺序播放,代码为21;而操作参数预定义可以容纳6位代表操作参数的代码,即操作参数的代码可以为210000;
7、组织内容码、操作码和操作参数生成条形码,其预定义格式可以如下表所示:
特征码图像数据 内容码 操作码 操作参数码
代码内容 1590317517 1225 210000
代码大小(位) 10 4 6
生成的条形码,如图3b所示,条形码高20pix(像素);
8、获取标识图片(Logo),如图3c所示。
9、采用条形码和标识图片(Logo)形成特征图像数据,如图4所示;
10、将原始图像数据加大:在其下方加高20pix,将其加宽至特征图像数据的宽度,将特征图像数据叠加在原始图像数据下方加大的区域中,生成的特征图片如图5所示。
参照图6,示出了根据本发明一个实施例的一种在浏览器中进行图片处理的方法实施例3的步骤流程图,具体可以包括以下步骤:
步骤601,获得浏览器用户账号的登录信息,进行浏览器用户的登录;则并将所述形成的特征图片保存为该浏览器用户对应的图片。
步骤602,在浏览器侧获取原始图像数据;
在具体实现中,所述浏览器中进行图片处理是实现为浏览器侧的一个浏览器插件或者为一个浏览器应用或者为浏览器可调用的一个独立应用程 序。
步骤603,获取特效数据;
在具体实现中,特效数据包括GIF图片文件或FLASH文件,当然还可以是其他具有动态展示效果的数据。
在本发明的一种优选实施例中,所述步骤603具体可以包括如下子步骤:
子步骤S41,获取FLASH文件所涉及的FLASH元素的本地地址或网络地址;
子步骤S42,从所述本地地址或网络地址提取所述FLASH文件的FLASH元素;
和/或,
子步骤S43,获取GIF图片文件的本地地址或网络地址;
子步骤S44,从所述本地地址或网络地址提取所述GIF图片。
为降低本地存储资源占用,在需要获取FLASH文件、GIF图片时,可以从服务器获取。
为方便用户选择和进行管理,可以按照用户使用浏览器的习惯,例如从浏览历史判断出用户喜欢哪一类型的特效后,可以直接将该类型的特效数据下载至本地,或者可以将该类型的特效数据推送至本地。
步骤604,依据特效数据生成特征码图像数据;
在本发明的一种优选实施例中,所述特征码图像数据包括内容码、操作码和操作参数,所述步骤504可以包括如下子步骤:
子步骤S51,为所述特效数据配置对应的操作码;
操作码中可以包括用户对特效数据自定义的操作行为。例如,播放特效数据可以是淡入淡出播放、擦除播放、推进播放、发光播放等;当特效数据为GIF图片文件时,操作信息可以为正常播放;当播放两个或两个以上的FLASH文件时,操作信息可以包括循环播放、随机播放等等。
在实际应用中,特效数据的操作码可以有对应字符串代码进行标识。例如,正常播放为1,循环播放为2,随机播放为3等等。
需要说明的是,相同的操作码的字符串代码对应不同的特效数据时,其代表的具体操作信息可以是相同的,也可以是不同的。
子步骤S52,为所述特效数据的操作码配置对应的操作参数;
操作参数可以为执行操作码的具体实施参数。例如,特效数据播放可以是播放次数、显示尺寸大小、播放位置、当存在两个或两个特效数据时的播放顺序、叠加播放等等。
在实际应用中,特效数据的操作参数可以有对应字符串代码进行标识。例如,播放位置可以用1Y表示,其中1代表选择播放位置,Y代表预置的Y地点。
用户可以通过鼠标点击或者拖曳移动等方式进行操作参数的配置,或者通过界面进行操作参数的配置等等。
需要说明的是,操作参数在某些情况下可以为空。例如,播放GIF文件时,操作码为正常播放,操作参数为空时,可以指示正常播放该特效数据,即在进行渲染开始时在默认地点播放该GIF文件,不控制尺寸大小、播放位置等。
子步骤S53,获取所述特效数据的标识;
特效数据的标识可以用于标记特效数据,可以是该特效数据的固有标识,例如MD5值,ID号等等。为了便于统一管理,提高管理效率,可以根据预设规则生成新的标识。
在本发明的一种优选实施例中,子步骤S53进一步可以包括如下子步骤:
子步骤S531,将所述特效数据上传至浏览器对应的服务器侧;所述服务器用于针对所述配置了操作参数的特效数据生成所述特效数据的标识;
子步骤S532,接收所述服务器返回的所述特效数据的标识;
和/或,
子步骤S533,提取所述特效数据的预置标识。
特效数据可以为服务器所提供,可以具有对应的标识。例如,对于GIF图片文件“烟花绽放”,可以配置字符串代码123作为标识;对于FLASH文 件“星星闪烁”,可以配置字符串代码562作为标识。
当用户对特效数据配置了操作参数时,与服务器所存储的该特效数据的操作信息不一致,或者,用户采用本地的特效数据时,服务器没有对应的存储,服务器需要存储该配置了操作参数的特效数据,以便在网页渲染时使用。在此情况下,需要重新定义该特效数据的标识。
子步骤S54,采用所述特效数据的标识生成内容码;
需要说明的是,当配置完操作信息和/或操作参数之后,可以进行预览。例如对各种特效数据的生成效果进行预览,或者,对各种特效数据叠加之后的效果进行预览。
子步骤S55,由所述内容码、操作码和操作参数组成特征码图像数据。
在本发明的一种优选实施例中,所述特征码图像数据中还包括标识出图片生成方的标识图片。
步骤605,在所述原始图像数据上添加所述特征码图像数据形成特征图片;
步骤606,将所述特征图片上传至所述浏览器对应的服务器中;
步骤607,在浏览器侧将所述生成的特征图片在网络中进行分发。
在具体实现中,除了将特征图片上传至服务器,还可以在公共平台分享所述特征图片,可以调用相关的API(Application Programming Interface,应用程序编程接口),将生成的特征图片在微博、博客、朋友圈等网络中进行分发,共享资源。此外,用户还可以对特征图片进行管理,例如删除、查看历史等等。
为了方便本领域技术人员更好地理解本发明,以下通过一个完整示例更进一步说明本发明:
1、打开特征图片制作工具;
2、添加图片;
a、如图7a所示,在制作工具的界面中部提示用户添加图片,该图片不小于300x200像素;
b、用户点击功能按钮“+”,添加图片:打开选择文件窗口,选择图片文件后(支持jpg、png、bmp、非动画gif),图片以适当比例显示在中部区域;或者,用户通过把图片拖拽至窗口内指定区域来添加图片;
c、当添加的图片大小尺寸不符时,可以提示用户,例如,“图片太小啦,请选择稍大的图片来制作炫图吧!”
d、当添加图片完成后,可通过图片右上角的功能按钮“X”,删除该图片;也可以拖拽新的图片进来替代当前图片,拖拽新图片进来时可以提示用户是否替换,例如,“是否要替换已选择的图片?”,当用户选择选择“确定”时,采用新的图片替换原图片;
3、添加声音;
a、如图7b所示,可以通过点击左下方的“添加声音”的按钮为图片添加声音;需要说明的是,需要添加完图片后才能添加声音。当未添加图片时,点击“添加声音”按钮,可以提示用户,例如,“只有先添加了图片以后才能添加声音哦!”
b、点击“添加声音”后,上方出现二级菜单:“录音”以及“选择MP3”;
c、录音;
1)、如图7c所示,点击“录音”后,会检测麦克风是否已连上;如未连上,则显示未连接红色图示,并提示用户,例如,“请先插上麦克风”;
2)、如图7d所示,当麦克风连接后,显示“开始”按钮;
3)、如图7e所示,点击”开始”后,录音开始,在界面上会显示录音时长;例如,最长录音为30秒,为提醒用户,可以从第25秒起秒数文字颜色变为橙色,28秒起变为红色,30秒时自动结束;
4)、当用户可点击“OK”键时,提前结束录音;
5)、用户可点击录音界面右上角的“X”按键时,取消录音;
6)、录音完成后,图片上面显示半透明浮层,浮层上显示icon 及秒数,点击该浮层可回放该录音,点击浮层右侧的“X”按键可删除该录音;
7)、用户完成录音后继续点击添加声音并选择录音,将视为重新录音,新的录音将覆盖旧的录音;有弹窗或浮层提示用户是否要重新录音;
d、选择mp3;
1)、点击“选取mp3文件”后,用户可从选择文件窗口中选择一首mp3,选择完成后一次性提示用户,mp3将只播放前30秒;
2)、如图7f所示,选择mp3完成后,在图片上将显示半透明浮层,浮层上显示mp3名称;点击可播放前30秒;点击浮层右侧的X可移除该mp3;
3)、声音添加完成后,“开始制作”按钮有外发光闪烁,提示用户可以开始制作了;
4、制作;
a、图片和声音添加完毕后,点击“开始制作”,校验用户登录状态(其中,“Tracy”为登陆用户账号),未登录的出现登录框提示用户登录;
b、用户完成登录或已登录的,进入制作流程;
c、如图7g所示,制作过程显示进度,并有文字提示,分别如下:“正在云端创建炫图”、“正在生成本地炫图”和“炫图制作好了”;
d、制作完成后,显示炫图缩略图,图中间有播放按钮,点击可预览播放该炫图(弹出图片全尺寸大小窗口播放);
e、如图7h所示,制作完成后,下方显示三个按钮:制作下一张、保存图片、分享炫图;
f、点击保存图片,可将该图片保存到本地;点击分享炫图,调出浏览器分享插件;点击制作下一张回到选取图片界面。
其中,图片处理规范可以如下:
原始图像数据不得小于300X200像素;
特征图片生成时,在原始图像数据下方增加高度为20像素,宽度与原图等宽的图像区域;该区域中包含:炫图icon、LOGO、特征码图像数据(高度为10px,垂直居中)。
此外,如图7i所示,制作完成的特征图片,可以显示在“我的炫图”中,访问“我的炫图”需要登录用户账号。每个用户账号可以存储一定数量的特征图片,例如100张,当超过后在点击“开始制作”时会提醒用户,例如,“您的炫图数量已经达到100张”。
“我的炫图”数据保存在服务端,当前显示的列表从服务端请求获取。“我的炫图”显示特征图片的缩略图、声音秒数、点击可播放,还提供下载特征图片、分享特征图片、删除特征图片的功能。
当用户点击删除特征图片时,提示用户:“删除炫图后,其他人无法继续播放该炫图上的声音,预计24小时内生效。”当用户确认后,进行删除操作。
参照图8,示出了根据本发明一个实施例的一种在浏览器中进行图片处理的装置实施例的结构框图,具体可以包括以下模块:
原始图像数据获取模块801,适于在浏览器侧获取原始图像数据;
富媒体数据获取模块802,适于获取音频数据和/或特效数据;
特征码图像数据生成模块803,适于依据所述音频数据和/或特效数据,生成特征码图像数据;
特征图片生成模块804,适于在所述原始图像数据上添加所述特征码图像数据生成特征图片。
在本发明的一种优选实施例中,所述装置还可以包括如下模块:
账号登陆模块,适于获得浏览器用户账号的登录信息,进行浏览器用户的登录;
图片保存模块,适于将所述形成的特征图片保存为该浏览器用户对应的图片。
在本发明的一种优选实施例中,所述原始图像数据获得模块还适于:
确定所述原始图像数据的地址,所述地址包括本地地址或网络地址;
从所述地址提取所述原始图像数据。
在本发明的一种优选实施例中,所述音频数据包括音频文件或录音文件;所述特效数据包括GIF图片文件或FLASH文件。
在本发明的一种优选实施例中,所述富媒体数据获取模块还适于:
获取音频文件或录音文件的本地地址或网络地址;
从所述本地地址或网络地址提取所述音频文件或录音文件;
和/或,
获取FLASH文件所涉及的FLASH元素的本地地址或网络地址;
从所述本地地址或网络地址提取所述FLASH文件的FLASH元素;
和/或,
获取GIF图片文件的本地地址或网络地址;
从所述本地地址或网络地址提取所述GIF图片。
在本发明的一种优选实施例中,所述特征码图像数据包括内容码,操作码和操作参数,所述特征码图像数据生成模块还适于:
为所述音频数据和/或特效数据配置对应的操作码;
为所述音频数据和/或特效数据的操作码配置对应的操作参数;
获取所述音频数据和/或特效数据的标识;
采用所述音频数据和/或特效数据的标识生成内容码;
由所述内容码、操作码和操作参数组成特征码图像数据。
在本发明的一种优选实施例中,所述特征码图像数据生成模块还适于:
将所述音频数据上传至浏览器对应的服务器侧;所述服务器用于依据所述音频数据的地址生成所述音频数据的标识;
接收所述服务器返回的所述音频数据的标识;
和/或,
将所述特效数据上传至浏览器对应的服务器侧;所述服务器用于针对 所述特效数据生成所述特效数据的标识;
接收所述服务器返回的所述特效数据的标识;
和/或,
提取所述音频数据和/或特效数据的预置标识。
在本发明的一种优选实施例中,所述特征码图像数据中还包括标识出图片生成方的标识图片。
在本发明的一种优选实施例中,所述特征码图像数据为二维码图像数据或条形码图像数据。
在本发明的一种优选实施例中,所述装置还可以包括如下模块:
特征图片上传模块,适于将所述生成的特征图片上传至所述浏览器对应的服务器中。
在本发明的一种优选实施例中,其中所述浏览器中进行图片处理是实现为浏览器侧的一个浏览器插件或者为一个浏览器应用或者为浏览器可调用的一个独立应用程序。
本发明的一种优选实施例中,所述装置具体还可以包括如下模块:
特征图片分发模块,适于在浏览器侧将所述生成的特征图片在网络中进行分发。
对于图8的装置实施例而言,由于其与前述方法实施例基本相似,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。
本发明还公开了一种浏览器,具体可以包括以下模块:
原始图像数据获取模块,适于在浏览器侧获取原始图像数据;
富媒体数据获取模块,适于获取音频数据和/或特效数据;
特征码图像数据生成模块,适于依据所述音频数据和/或特效数据,生成特征码图像数据;
特征图片生成模块,适于在所述原始图像数据上添加所述特征码图像数据生成特征图片。
在本发明的一种优选实施例中,所述装置还可以包括如下模块:
账号登陆模块,适于获得浏览器用户账号的登录信息,进行浏览器用户的登录;
图片保存模块,适于将所述形成的特征图片保存为该浏览器用户对应的图片。
在本发明的一种优选实施例中,所述原始图像数据获得模块还适于:
确定所述原始图像数据的地址,所述地址包括本地地址或网络地址;
从所述地址提取所述原始图像数据。
在本发明的一种优选实施例中,所述音频数据包括音频文件或录音文件;所述特效数据包括GIF图片文件或FLASH文件。
在本发明的一种优选实施例中,所述富媒体数据获取模块还适于:
获取音频文件或录音文件的本地地址或网络地址;
从所述本地地址或网络地址提取所述音频文件或录音文件;
和/或,
获取FLASH文件所涉及的FLASH元素的本地地址或网络地址;
从所述本地地址或网络地址提取所述FLASH文件的FLASH元素;
和/或,
获取GIF图片文件的本地地址或网络地址;
从所述本地地址或网络地址提取所述GIF图片。
在本发明的一种优选实施例中,所述特征码图像数据包括内容码,操作码和操作参数,所述特征码图像数据生成模块还适于:
为所述音频数据和/或特效数据配置对应的操作码;
为所述音频数据和/或特效数据的操作码配置对应的操作参数;
获取所述音频数据和/或特效数据的标识;
采用所述音频数据和/或特效数据的标识生成内容码;
由所述内容码、操作码和操作参数组成特征码图像数据。
在本发明的一种优选实施例中,所述特征码图像数据生成模块还适于:
将所述音频数据上传至浏览器对应的服务器侧;所述服务器用于依据 所述音频数据的地址生成所述音频数据的标识;
接收所述服务器返回的所述音频数据的标识;
和/或,
将所述特效数据上传至浏览器对应的服务器侧;所述服务器用于针对所述特效数据生成所述特效数据的标识;
接收所述服务器返回的所述特效数据的标识;
和/或,
提取所述音频数据和/或特效数据的预置标识。
在本发明的一种优选实施例中,所述特征码图像数据中还包括标识出图片生成方的标识图片。
在本发明的一种优选实施例中,所述特征码图像数据为二维码图像数据或条形码图像数据。
在本发明的一种优选实施例中,所述装置还可以包括如下模块:
特征图片上传模块,适于将所述生成的特征图片上传至所述浏览器对应的服务器中。
在本发明的一种优选实施例中,其中所述浏览器中进行图片处理是实现为浏览器侧的一个浏览器插件或者为一个浏览器应用或者为浏览器可调用的一个独立应用程序。
本发明的一种优选实施例中,所述装置具体还可以包括如下模块:
特征图片分发模块,适于在浏览器侧将所述生成的特征图片在网络中进行分发。
参照图9,示出了根据本发明一个实施例的一种浏览器中进行图片加载的方法实施例的步骤流程图,具体可以包括以下步骤:
步骤901,当浏览器监测到触发事件时,获取当前页面中符合预设条件的特征图片;
在具体实现中,所述触发事件包括网页加载完成事件,和/或,图片的 鼠标悬停hover事件。
当浏览器加载网页完毕时,会生成网页加载完成事件,即Document Complete事件。当网页加载完毕后,则可以进行动态渲染。
为了进一步加快动态渲染的速度,可以通过悬停hover事件触发动态渲染。在特征图片上设置触发点,该触发点可以依据用户在特征图片上的经过(hover)操作被触发。更具体而言,所述经过操作可以包括鼠标、手势或者接触笔在网站信息展现区域上的经过操作,还可以包括键盘、触摸屏、条码阅读器、磁阅读器(包括磁条、磁盘、磁带阅读器、智能卡阅读器、压力传感器、运动探测器、及其它的可以与数字处理器相连的转换器等任一种方式触发的划过网站信息展现区域的操作。从具体实现角度而言,hover是一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移动到一个匹配的元素上面(如本实施例中的触发点)时,会触发指定的第一个函数(over(Function),鼠标移到元素上要触发的函数)。当鼠标移出这个元素时,会触发指定的第二个函数(out(Function),鼠标移出元素要触发的函数)。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div弹出层中),如果是,则会继续保持“悬停”状态,而不触发移出事件,所述触发点具体可以采用JavaScript代码方式进行设置。
在本发明的一种优选实施例中,所述步骤801具体可以包括如下子步骤:
子步骤S61,从内存中提取符合预设显示区域和/或预设尺寸大小的图片;
预设条件可以包括预设显示区域、预设尺寸大小等等。在网页浏览中,不同用途的图片可以有相对稳定的位置,例如网页的两侧、顶端通常用于展示广告图片,本发明实施例中的特征图片亦可以有预设的位置,可以有预设的尺寸大小。
子步骤S62,判断所提取图片的指定位置的数据是否为特征码图像数 据;如果是,则执行子步骤S63;
指定位置可以为图片的下方,可以是图片的左方等等,本发明对此不加以限制。
例如,图5所示的特征图片生成特征图片的方法为:将原始图像数据加大,在其下方加高20pix,将其加宽特征码图像数据的宽度,将特征图像数据叠加在原始图像数据下方加大的区域中生成特征图片。相对应的,提取特征码图像数据的方法可以为:提取特征图片底部20pix高的图像数据,该图像数据即为特征码图像数据,而剩余部分为原始图片,如图3a所示。
为进一步提高判断的准确率,可以对特征码图像数据进行检验。
在本发明实施例的一种优选示例中,所述子步骤S62进一步可以包括如下子步骤:
子步骤S621,将所述指定位置的数据进行二维码或者条形码的解码,获取其对应的字符串信息;
子步骤S622,匹配所述字符串消息,如果所述字符串信息符合预定的数据格式,则判断所述指定位置的数据为特征码图像数据。
在具体实现中,特征码图像数据可以为二维码或者条形码等等,将指定位置的数据进行解码,可以用于鉴别该位置的数据是否是特征码图像数据。
在生成特征码图像数据时,可以是按照一定规则的数据格式生成的,则在验证时,可以按照该预定的数据格式进行验证。
例如,在生成特征码图像数据的预定义格式可以如下表所示:
特征码图像数据 内容码 操作码 操作参数码
代码内容 1590317517 1225 210000
代码大小(位) 10 4 6
则在解码获取的字符串信息为“15903175171225210000”,则匹配前10为字符串“1590317517”是否是内容码,第11-14位字符串“1225”是否是操作码,第16-20为字符串“210000”是否是操作码。
子步骤S63,将所提取图片作为特征图片。
在具体实现中,可以从内存(例如本地缓存)中,获取当前网页中的符合预设条件的特征图片,特征图片可以为非广告、装饰类的图片。网页中有显示区域,通过DOM(Document Object Model,文档对象模型)能识别整个网页架构。遍历网页的DOM树节点及图片尺寸从内存中获取已缓存的符合预设条件的图片,该图片即为特征图片。
需要说明的是,特征图片是相对于用户自定义进行动态渲染的对象图片而言的,其实质亦是图像数据。特征图片中可以包括记载用户自定义动态渲染操作的特征码图像数据和原始图像数据,如图5所示。
为防止特征图片在传输过程中出现错误和防止被修改,在本发明的一种实施例中,在步骤802之前,具体还包括如下步骤:
步骤S1,对所述特征码图像数据进行自校验。
触发特征码图像数据检查自身有没有被修改,如果发现被修改的话,便会暂停渲染或进行其它处理。基本的校检方法可以包括checksum(总和检验码),检查大小,检查跳转代码,等等。
此外,自校验后会进行灰度计算,以便为后续的特征码图像数据的解析做准备。
步骤902,提取所述特征图片中的特征码图像数据;其中,所述特征码图像数据标记出与所述特征图片一处加载的富媒体资源;
特征码图像数据可以是条形码,可以是二维码,也可以是条形码和二维码的组合,还可以是其他图像数据,只要能记录用户的自定义渲染操作即可,本发明对此不加以限制。
在具体实现中,提取特征码图像数据的方法可以与采用特征码图像数据和原始图片生成特征图片的方法是相对的,本发明对此不加以限制。
在本发明的一种优选实施例中,所述步骤802具体可以包括如下子步骤:
子步骤S71,将所述特征码图像数据进行二维码或者条形码的解码后,获取其对应的字符串信息;
提取特征码图像数据之后,可以采用条形码解码应用程序、二维码解 码应用程序进行解码处理,获取用户的自定义渲染操作信息,进行渲染操作。
其中,所述内容码为所述音频数据和/或特效数据的标识;
所述操作码为所述音频数据和/或特效数据的操作方式的标识。
在本发明实施例的一种优选示例中,所述操作方式包括:单次播放音乐、循环播放音乐、播放动画、播放Flash视频、渐变加入元素、渐变淡出元素、播放录音中的至少一种。
当然,上述操作方式只是作为示例,在实施本发明实施例时,可以根据实际情况设置其它操作方式,本发明实施例对此不加以限制。在具体实现中,内容码和操作码可以是代码,例如字符串,可以用于指示不同的信息。
在实际应用中,操作码可以指示播放音频数据和/或特效数据的操作信息,该操作信息中可以包括用户对音频数据和/或特效数据自定义的操作行为。
例如,播放音频数据可以是渐强播放、渐弱播放等等;当播放一个音频数据时,操作信息可以为正常播放,当播放两个或两个以上的音频数据时,操作信息可以包括循环播放、随机播放等等。
又例如,播放特效数据可以是淡入淡出播放、擦除播放、推进播放、发光播放等;当特效数据为GIF图片文件时,操作信息可以为正常播放;当播放两个或两个以上的FLASH文件时,操作信息可以包括循环播放、随机播放等等。
在实际应用中,音频数据和/或特效数据的操作码可以有对应字符串代码进行标识。例如,正常播放为1,循环播放为2,随机播放为3等等。需要说明的是,相同的字符串代码对应于不同的音频数据或特效数据时,其代表操作信息可以相同,也可以不同。
在本发明的一种优选实施例中,所述解析的字符串信息进一步包括:对应于所述操作码的操作参数,其标记针对所述音频数据和/或特效数据的操作方式的预置执行参数。
在本发明实施例的一种优选示例中,所述的操作参数包括:
图像或视频的显示位置、播放音乐或视频的时间、音乐或视频的播放次数、图像特效的显示时间中的至少一种。
当然,上述操作参数只是作为示例,在实施本发明实施例时,可以根据实际情况设置其它操作参数,本发明实施例对此不加以限制。
在实际应用中,操作参数可以用于指示播放音频数据和/或特效数据的具体操作参数,该操作参数可以为实施操作行为的具体实施参数。例如,音频数据播放可以是在何时播放、播放时长、播放次数、当存在两个或两个音频数据时的播放顺序等等。特效数据播放可以是、播放次数、显示尺寸大小、播放位置、当存在两个或两个特效数据时的播放顺序、叠加播放等等。
在实际应用中,音频数据和/或特效数据的操作参数可以有对应字符串代码进行标识。例如,播放次数可以用字符串代码1X表示,其中1代表选择播放次数,X代表具体播放的次数等等。
需要说明的是,操作参数在某些情况下可以为空。例如,自定义播放音频数据,操作码为正常播放,操作参数为空时,可以指示正常播放该音频数据,即在进行渲染开始时播放该音频数据,不控制何时播放、播放时长、播放次数等。
又例如,自定义播放音频数据,操作码为正常播放,操作参数为空时,可以指示正常播放该音频数据,即在进行渲染开始时播放该音频数据,不控制何时播放、播放时长、播放次数等。
在本发明实施例的一种优选示例中,所述特征码图像数据中还包括标识出生成方的标识图片。
标识图片(Logo)可以不参与条形码或二维码的转换,直接按照生成时的规则从特征码图像数据中提取,如图3c所示。
解析特征码图像数据中的Logo、内容码、操作码和操作参数的方法与组织Logo、内容码、操作码和操作参数生成特征码图像数据的方法是想对应的。
例如,特征码图像数据的预定义格式可以如下表所示:
特征码图像数据 内容码 操作码 操作参数码
代码内容 1590317517 1225 210000
代码大小(位) 10 4 6
则在解析特征码图像数据完成时,如图3b所示,提取第1-10位代码“1590317517”作为内容码,提取第11-14位代码“1225”作为操作码,提取第15-20字符串代码“210000”作为操作参数。
步骤903,依据所述特征码图像数据获取对应的富媒体资源;
在实际应用中,富媒体数据可以包括音频数据和/或特效数据,所述音频数据包括音频文件或语音文件;所述特效数据包括GIF图片文件或FLASH文件。
音频数据可以是本地的,可以是服务器所存储的,还可以是网上其他平台所存储的;特效数据可以包括GIF图片文件和/或FLASH文件等等具有动态展示效果的数据,本发明对此不加以限制。
音频数据和/或特效数据的标识可以是该音频数据和/或特效数据的固有标识,例如MD5值,ID号等等,为了便于统一管理,提高管理效率,也可以根据预设规则生成新的标识,只要能标识该音频数据和/或特效数据即可,本发明对此不加以限制。
在本发明的一种优选实施例中,所述子步骤803具体可以包括如下子步骤:
子步骤S81,发送富媒体数据获取请求至浏览器对应的服务器;所述富媒体数据获取请求中包括所述音频数据和/或述特效数据的标识;
子步骤S82,接收所述服务器返回的音频数据和/或特效数据;
此种情况下,服务器对应保存有音频数据和/或特效数据,可以从服务器下载所需的音频数据和/或特效数据。
或者,
子步骤S83,解析所述音频数据的标识,获得所述音频数据的网络地址:
子步骤S84,访问所述音频数据的网络地址,获取所述音频数据;
此种情况下,服务器没有对应保存音频数据,则需要从其他地方获取,包括本地和网上。则音频数据的地址可以是本地地址,也可以是在网络地址。
需要说明的是,解析音频数据的标识确定地址的方法与采用音频数据的地址生成标识的方法是相对的。
或者,
子步骤S85,在本地提取所述特效数据的标识对应的特效数据。
此种情况下,为进一步提高渲染效率,可以按照用户使用浏览器的习惯,例如从浏览历史判断出用户喜欢哪一类型的特效后,可以直接将该类型的特效数据下载至本地,或者可以将该类型的特效数据推送至本地。
所获取到的音频数据和/或特效数据可以为动态渲染时播放的音频数据和/或特效数据。
步骤904,将获取的富媒体资源与所述特征图片一处进行加载。
在解码完毕获取用户的自定义渲染操作后,可以按照该自定义渲染操作进行动态渲染,富媒体资源和特征图片于一处进行加载,富媒体资源可以是在特征图片的上方、左侧、右侧,下方等某一处周围环境,本发明对此不加以限制。
在本发明的一种优选实施例中,所述步骤804具体可以包括如下子步骤:
子步骤S91,在所述特征图片的显示区域上的预置区域生成一窗口加载所述获取的富媒体资源,其中所述生成的窗口为一浏览器窗口或者一网页浮层元素;
子步骤S92,在所述窗口中加载浏览器侧的插件或者调用系统API进行所述富媒体资源的加载和使用。
例如,解析完上述条形码后,由内容码“1590317517”中15903指示播放音频数据5903,17517指示播放音频数据7517,获知渲染时需要播放音频数据,则会在特征图片的指定位置例如左下角生成一个浏览器窗口,浏览 器窗口中渲染加载一个预置的按钮图片,并默认自动播放音频数据,即在后台加载一个音频播放器,可以是浏览器插件,然后解析“5903”和“7517”,获取渲染时需要播放的音频数据5903的网址,为http://music.XXX.com/12345678.mp3,访问该网址获取歌曲“青藏高原”,之后在该音频播放器中播放歌曲“青藏高原”;从本地提取7517对应的音频数据“天堂”。
又例如,对于是播放特效数据,通过解析特征码图像数据可以获知内容码是进行GIF图片1的播放,操作码是正常播放,操作参数是空,则在特征图片上添加一网页浮层元素,在该网页浮层元素上嵌入GIF图片1。
又例如,对于是播放特效数据,通过解析特征码图像数据可以获知内容码是进行FLASH动画1的播放,操作码是进行淡入淡出的特效效果进行播放上述FLASH动画1,其中操作参数中记载了FLASH动画1淡入淡出显示时的位置、时间、播放次数等。依据内容码可以获取到对应的FLASH动画文件的标识,其可以是一个预置的动画文件,其保存在服务器侧,则可以从服务器获取到该Flash动画文件。获取到操作参数后知道怎么进行上述Flash动画1的播放,例如是进行闪动或者淡入淡出的时间、显示位置等。
本发明实施中,可以解析特征图片中的特征码图像数据,获取其记载的用户对在加载图片时的采用音频数据、特效数据等的渲染操作,进而进行对应的动态渲染处理,由此解决了客户端不支持用户个性化定义图片加载时的渲染操作的问题,取得了基于浏览器实现对于图片的渲染,丰富的网页渲染方式,减少服务器存储资源占用,降低服务器运行资源占用,提高了浏览器渲染网页效率的有益效果。
为了方便本领域技术人员更好地理解本发明,以下通过一个完整示例更进一步说明本发明:
1、识别;
如图10a所示,当用户将鼠标光标悬停在一张图片上时,启动识别其是否一张特征图片。具体地,可以通过图片下方的条形码区域识别一张 图片是否为特征图片。需要说明的是,特征图片上传至微博、空间、论坛等各主流网站,适度压缩后仍可识别。
读取特征码图像数据(条形码)后应有必要校验,确认为特征图片。然后从条形码信息中读取信息后,本地拼出URL,向服务端请求相关声音等文件。
2、播放;
如图10b所示,从条形码中读取信息并拼出URL后,向服务端请求对应的唯一声音及配置文件;
用户将鼠标光标悬停在一张图片上,如识别为特征图片,并请求到对应的声音文件后,默认开始边下边播该声音文件;(当不默认播放时,用户可以手动触发播放的设置);
用户将鼠标光标移出该图片范围,则声音自动停止播放;再次移入则从头再次播放;特征图片左下方将以环状进度条显示炫图声音播放进度;
用户可点击暂停按钮,暂停该炫图的声音播放;
用户点击暂停后,移出图片范围,将临时记住该播放进度及暂停状态;已暂停炫图,再次悬停时将不自动从头播放,直至用户点击左下方继续播放按钮,继续按上次进度续播;
网页重新加载后,之前该页炫图进度、状态复原;
网页中有多张特征图片时,只播放当前悬停的一张图片;
声音播放支持淡入淡出处理.
参照图11,示出了根据本发明一个实施例的一种在浏览器中进行图片加载的装置实施例的结构框图,具体可以包括以下模块:
特征图片获取模块1101,适于当浏览器监测到触发事件时,获取当前页面中符合预设条件的特征图片;
特征码图像数据提取模块1102,适于提取所述特征图片中的特征码图像数据;其中,所述特征码图像数据标记出与所述特征图片一处加载的富媒体资源;
富媒体资源获取模块1103,适于依据所述特征码图像数据获取对应的富媒体资源;
加载模块1104,适于将获取的富媒体资源与所述特征图片一处进行加载。
在本发明的一种优选实施例中,所述触发事件包括网页加载完成事件,和/或,图片的鼠标悬停hover事件。
在本发明的一种优选实施例中,所述特征图片获取模块还适于:
从内存中提取符合预设显示区域和/或预设尺寸大小的图片;并
判断所提取图片的指定位置的数据是否为特征码图像数据;
如果是,将所提取图片作为特征图片。
在本发明的一种优选实施例中,所述特征图片获取模块还适于:
将所述指定位置的数据进行二维码或者条形码的解码,获取其对应的字符串信息;
匹配所述字符串消息,如果所述字符串信息符合预定的数据格式,则判断所述指定位置的数据为特征码图像数据。
在本发明的一种优选实施例中,所述特征码图像数据提取模块还适于:
将所述特征码图像数据进行二维码或者条形码的解码后,获取其对应的字符串信息;
解析所述字符串信息,获得与所述特征图片一处加载的富媒体资源的内容码和操作码;
其中,所述内容码为音频数据和/或特效数据的标识;
所述操作码为所述音频数据和/或特效数据的操作方式的标识。
在本发明的一种优选实施例中,所述音频数据包括音频文件或录音文件;所述特效数据包括GIF图片文件或FLASH文件。
在本发明的一种优选实施例中,所述解析的字符串信息进一步包括:对应于所述操作码的操作参数,其标记针对所述音频数据和/或特效数据的操作方式的预置执行参数。
在本发明的一种优选实施例中,所述特征码图像数据中还包括标识出生成方的标识图片。
在本发明的一种优选实施例中,所富媒体资源获取模块还适于:
发送富媒体数据获取请求至浏览器对应的服务器;所述富媒体数据获取请求中包括所述音频数据和/或述特效数据的标识;
接收所述服务器返回的音频数据和/或特效数据;
或者,
解析所述音频数据的标识,获得所述音频数据的网络地址;
访问所述音频数据的网络地址,获取所述音频数据;
或者,
在本地提取所述特效数据的标识对应的特效数据。
在本发明的一种优选实施例中,所述装置具体还可以包括如下模块:
自校验模块,适于对所述特征码图像数据进行自校验。
在本发明的一种优选实施例中,所述加载模块还适于:
在所述特征图片的显示区域上的预置区域生成一窗口加载所述获取的富媒体资源,其中所述生成的窗口为一浏览器窗口或者一网页浮层元素;
在所述窗口中加载浏览器侧的插件或者调用系统API进行所述富媒体资源的加载和使用。
在本发明的一种优选实施例中,其中所述的操作方式包括:
单次播放音乐、循环播放音乐、播放动画、播放Flash视频、渐变加入元素、渐变淡出元素、播放录音中的至少一种。
在本发明的一种优选实施例中,其中所述的操作参数包括:
图像或视频的显示位置、播放音乐或视频的时间、音乐或视频的播放次数、图像特效的显示时间中的至少一种。
对于图11的装置实施例而言,由于其与前述方法实施例基本相似,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。
本发明还公开了一种浏览器,具体可以包括以下模块:
特征图片获取模块,适于当浏览器监测到触发事件时,获取当前页面中符合预设条件的特征图片;
特征码图像数据提取模块,适于提取所述特征图片中的特征码图像数据;其中,所述特征码图像数据标记出与所述特征图片一处加载的富媒体资源;
富媒体资源获取模块,适于依据所述特征码图像数据获取对应的富媒体资源;
加载模块,适于将获取的富媒体资源与所述特征图片一处进行加载。
在本发明的一种优选实施例中,所述触发事件包括网页加载完成事件,和/或,图片的鼠标悬停hover事件。
在本发明的一种优选实施例中,所述特征图片获取模块还适于:
从内存中提取符合预设显示区域和/或预设尺寸大小的图片;并
判断所提取图片的指定位置的数据是否为特征码图像数据;
如果是,将所提取图片作为特征图片。
在本发明的一种优选实施例中,所述特征图片获取模块还适于:
将所述指定位置的数据进行二维码或者条形码的解码,获取其对应的字符串信息;
匹配所述字符串消息,如果所述字符串信息符合预定的数据格式,则判断所述指定位置的数据为特征码图像数据。
在本发明的一种优选实施例中,所述特征码图像数据提取模块还适于:
将所述特征码图像数据进行二维码或者条形码的解码后,获取其对应的字符串信息;
解析所述字符串信息,获得与所述特征图片一处加载的富媒体资源的内容码和操作码;
其中,所述内容码为音频数据和/或特效数据的标识;
所述操作码为所述音频数据和/或特效数据的操作方式的标识。
在本发明的一种优选实施例中,所述音频数据包括音频文件或录音文 件;所述特效数据包括GIF图片文件或FLASH文件。
在本发明的一种优选实施例中,所述解析的字符串信息进一步包括:对应于所述操作码的操作参数,其标记针对所述音频数据和/或特效数据的操作方式的预置执行参数。
在本发明的一种优选实施例中,所述特征码图像数据中还包括标识出生成方的标识图片。
在本发明的一种优选实施例中,所富媒体资源获取模块还适于:
发送富媒体数据获取请求至浏览器对应的服务器;所述富媒体数据获取请求中包括所述音频数据和/或述特效数据的标识;
接收所述服务器返回的音频数据和/或特效数据;
或者,
解析所述音频数据的标识,获得所述音频数据的网络地址;
访问所述音频数据的网络地址,获取所述音频数据;
或者,
在本地提取所述特效数据的标识对应的特效数据。
在本发明的一种优选实施例中,所述浏览器具体还可以包括如下模块:
自校验模块,适于对所述特征码图像数据进行自校验。
在本发明的一种优选实施例中,所述加载模块还适于:
在所述特征图片的显示区域上的预置区域生成一窗口加载所述获取的富媒体资源,其中所述生成的窗口为一浏览器窗口或者一网页浮层元素;
在所述窗口中加载浏览器侧的插件或者调用系统API进行所述富媒体资源的加载和使用。
在本发明的一种优选实施例中,其中所述的操作方式包括:
单次播放音乐、循环播放音乐、播放动画、播放Flash视频、渐变加入元素、渐变淡出元素、播放录音中的至少一种。
在本发明的一种优选实施例中,其中所述的操作参数包括:
图像或视频的显示位置、播放音乐或视频的时间、音乐或视频的播放 次数、图像特效的显示时间中的至少一种。
本发明的各个部件实施例可以以硬件实现,或者以在一个或者多个处理器上运行的软件模块实现,或者以它们的组合实现。本领域的技术人员应当理解,可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的在浏览器中进行图片加载的设备中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如,计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上,或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到,或者在载体信号上提供,或者以任何其他形式提供。
例如,图12示出了可以实现根据本发明的在浏览器中进行图片加载的电子设备,例如电脑、移动设备。该电子设备传统上包括处理器1210和以存储器1220形式的计算机程序产品或者计算机可读介质。存储器1220可以是诸如闪存、EEPROM(电可擦除可编程只读存储器)、EPROM、硬盘或者ROM之类的电子存储器。存储器1220具有用于执行上述方法中的任何方法步骤的程序代码1231的存储空间1230。例如,用于程序代码的存储空间1230可以包括分别用于实现上面的方法中的各种步骤的各个程序代码1231。这些程序代码可以从一个或者多个计算机程序产品中读出或者写入到这一个或者多个计算机程序产品中。这些计算机程序产品包括诸如硬盘,紧致盘(CD)、存储卡或者软盘之类的程序代码载体。这样的计算机程序产品通常为如参考图13所述的便携式或者固定存储单元。该存储单元可以具有与图12的电子设备中的存储器1220类似布置的存储段、存储空间等。程序代码可以例如以适当形式进行压缩。通常,存储单元包括计算机可读代码1231’,即可以由例如诸如1210之类的处理器读取的代码,这些代码当由电子设备运行时,导致该电子设备执行上面所描述的方法中的各个步骤。
本文中所称的“一个实施例”、“实施例”或者“一个或者多个实施例”意味着,结合实施例描述的特定特征、结构或者特性包括在本发明的至少一个实施例中。此外,请注意,这里“在一个实施例中”的词语例子不一定全指同一个实施例。
在此处所提供的说明书中,说明了大量具体细节。然而,能够理解,本发明的实施例可以在没有这些具体细节的情况下被实践。在一些实例中,并未详细示出公知的方法、结构和技术,以便不模糊对本说明书的理解。
应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制,并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中,不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中,这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。
此外,还应当注意,本说明书中使用的语言主要是为了可读性和教导的目的而选择的,而不是为了解释或者限定本发明的主题而选择的。因此,在不偏离所附权利要求书的范围和精神的情况下,对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。对于本发明的范围,对本发明所做的公开是说明性的,而非限制性的,本发明的范围由所附权利要求书限定。

Claims (22)

  1. 一种在浏览器中进行图片处理的方法,包括:
    在浏览器侧获取原始图像数据,获取音频数据和/或特效数据;
    依据所述音频数据和/或特效数据,生成特征码图像数据;
    在所述原始图像数据上添加所述特征码图像数据生成特征图片。
  2. 如权利要求1所述的方法,在所述获得原始图像数据的步骤之前,还包括:
    获得浏览器用户账号的登录信息,进行浏览器用户的登录;
    则并将所述形成的特征图片保存为该浏览器用户对应的图片。
  3. 如权利要求1所述的方法,所述在浏览器侧获取原始图像数据的步骤包括:
    确定所述原始图像数据的地址,所述地址包括本地地址或网络地址;
    从所述地址提取所述原始图像数据。
  4. 如权利要求1所述的方法,所述音频数据包括音频文件或录音文件;所述特效数据包括GIF图片文件或FLASH文件。
  5. 如权利要求4所述的方法,所述获取音频数据和/或特效数据的步骤包括:
    获取音频文件或录音文件的本地地址或网络地址;
    从所述本地地址或网络地址提取所述音频文件或录音文件;
    和/或,
    获取FLASH文件所涉及的FLASH元素的本地地址或网络地址;
    从所述本地地址或网络地址提取所述FLASH文件的FLASH元素;
    和/或,
    获取GIF图片文件的本地地址或网络地址;
    从所述本地地址或网络地址提取所述GIF图片。
  6. 如权利要求1所述的方法,所述特征码图像数据包括内容码,操作码和操作参数,所述依据所述音频数据和/或特效数据,生成特征码图像数据的步骤包括:
    为所述音频数据和/或特效数据配置对应的操作码;
    为所述音频数据和/或特效数据的操作码配置对应的操作参数;
    获取所述音频数据和/或特效数据的标识;
    采用所述音频数据和/或特效数据的标识生成内容码;
    由所述内容码、操作码和操作参数组成特征码图像数据。
  7. 如权利要求6所述的方法,所述获取所述音频数据和/或特效数据的标识的步骤包括:
    将所述音频数据上传至浏览器对应的服务器侧;所述服务器用于依据所述音频数据的地址生成所述音频数据的标识;
    接收所述服务器返回的所述音频数据的标识;
    和/或,
    将所述特效数据上传至浏览器对应的服务器侧;所述服务器用于针对所述配置了操作参数的特效数据生成所述特效数据的标识;
    接收所述服务器返回的所述特效数据的标识;
    和/或,
    提取所述音频数据和/或特效数据的预置标识。
  8. 如权利要求1或6所述的方法,所述特征码图像数据中还包括标识出图片生成方的标识图片。
  9. 如权利要求1所述的方法,所述特征码图像数据为二维码图像数据或条形码图像数据。
  10. 如权利要求1或9所述的方法,还包括:
    将所述生成的特征图片上传至所述浏览器对应的服务器中。
  11. 如权利要求1所述的方法,其中所述浏览器中进行图片处理是实现为浏览器侧的一个浏览器插件或者为一个浏览器应用或者为浏览器可调用的一个独立应用程序。
  12. 如权利要求1所述的方法,还包括:在浏览器侧将所述生成的特征图片在网络中进行分发。
  13. 一种在浏览器中进行图片处理的装置,包括:
    原始图像数据获取模块,适于在浏览器侧获取原始图像数据;
    富媒体数据获取模块,适于获取音频数据和/或特效数据;
    特征码图像数据生成模块,适于依据所述音频数据和/或特效数据,生成特征码图像数据;
    特征图片生成模块,适于在所述原始图像数据上添加所述特征码图像数据生成特征图片。
  14. 如权利要求13所述的装置,还包括:
    账号登陆模块,适于获得浏览器用户账号的登录信息,进行浏览器用户的登录;
    图片保存模块,适于将所述形成的特征图片保存为该浏览器用户对应的图片。
  15. 如权利要求13所述的装置,所述音频数据包括音频文件或录音文件;所述特效数据包括GIF图片文件或FLASH文件。
  16. 如权利要求13所述的装置,所述特征码图像数据包括内容码,操作码和操作参数,所述特征码图像数据生成模块还适于:
    为所述音频数据和/或特效数据配置对应的操作码;
    为所述音频数据和/或特效数据的操作码配置对应的操作参数;
    获取所述音频数据和/或特效数据的标识;
    采用所述音频数据和/或特效数据的标识生成内容码;
    由所述内容码、操作码和操作参数组成特征码图像数据。
  17. 如权利要求16所述的装置,所述特征码图像数据生成模块还适于:
    将所述音频数据上传至浏览器对应的服务器侧;所述服务器用于依据所述音频数据的地址生成所述音频数据的标识;
    接收所述服务器返回的所述音频数据的标识;
    和/或,
    将所述特效数据上传至浏览器对应的服务器侧;所述服务器用于针对所述配置了操作参数的特效数据生成所述特效数据的标识;
    接收所述服务器返回的所述特效数据的标识;
    和/或,
    提取所述音频数据和/或特效数据的预置标识。
  18. 如权利要求13所述的装置,所述特征码图像数据为二维码图像数据或条形码图像数据。
  19. 如权利要求13所述的装置,其中所述浏览器中进行图片处理是实现为浏览器侧的一个浏览器插件或者为一个浏览器应用或者为浏览器可调用的一个独立应用程序。
  20. 一种浏览器,包括:
    原始图像数据获取模块,适于在浏览器侧获取原始图像数据;
    富媒体数据获取模块,适于获取音频数据和/或特效数据;
    特征码图像数据生成模块,适于依据所述音频数据和/或特效数据,生成特征码图像数据;
    特征图片生成模块,适于在所述原始图像数据上添加所述特征码图像数据生成特征图片。
  21. 一种计算机程序,包括计算机可读代码,当所述计算机可读代码在浏览器上运行时,导致所述浏览器执行根据权利要求1-12中的任一个所述的在浏览器中进行图片处理的方法。
  22. 一种计算机可读介质,其中存储了如权利要求21所述的计算机程序。
PCT/CN2014/086431 2013-09-13 2014-09-12 一种在浏览器中进行图片处理的方法、装置和浏览器 WO2015035944A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201310419149.9A CN103500187B (zh) 2013-09-13 2013-09-13 一种在浏览器中进行图片处理的方法、装置和浏览器
CN201310419149.9 2013-09-13

Publications (1)

Publication Number Publication Date
WO2015035944A1 true WO2015035944A1 (zh) 2015-03-19

Family

ID=49865398

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2014/086431 WO2015035944A1 (zh) 2013-09-13 2014-09-12 一种在浏览器中进行图片处理的方法、装置和浏览器

Country Status (2)

Country Link
CN (1) CN103500187B (zh)
WO (1) WO2015035944A1 (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113573102A (zh) * 2021-08-18 2021-10-29 北京中网易企秀科技有限公司 一种视频生成方法及装置

Families Citing this family (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103500186B (zh) * 2013-09-13 2018-05-04 北京奇虎科技有限公司 一种在浏览器中进行图片加载的方法、装置和浏览器
CN103500187B (zh) * 2013-09-13 2017-03-15 北京奇虎科技有限公司 一种在浏览器中进行图片处理的方法、装置和浏览器
CN104077389A (zh) * 2014-06-27 2014-10-01 北京奇虎科技有限公司 一种网页元素信息的显示方法和浏览器装置
CN104703020B (zh) * 2015-03-17 2018-09-21 北京酷云互动科技有限公司 二维码的处理方法、装置和视频播放设备
CN106909548B (zh) * 2015-12-22 2021-01-08 北京奇虎科技有限公司 基于服务器的图片加载方法及装置
CN109684568A (zh) * 2018-12-13 2019-04-26 珠海天燕科技有限公司 图片处理方法和装置
CN110704059B (zh) * 2019-10-16 2023-05-30 北京达佳互联信息技术有限公司 图像处理方法、装置、电子设备及存储介质
CN112927312A (zh) * 2019-12-05 2021-06-08 广州凡科互联网科技股份有限公司 一种新型的图片生成方法

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20090327231A1 (en) * 2008-06-27 2009-12-31 Microsoft Corporation Inline enhancement of web lists
CN101656814A (zh) * 2008-08-18 2010-02-24 爱思开电讯投资(中国)有限公司 用于将声音文件添加到jpeg文件中的方法及装置
CN103024063A (zh) * 2012-12-24 2013-04-03 腾讯科技(深圳)有限公司 一种数据共享方法、客户端及系统
CN103500186A (zh) * 2013-09-13 2014-01-08 北京奇虎科技有限公司 一种在浏览器中进行图片加载的方法、装置和浏览器
CN103500187A (zh) * 2013-09-13 2014-01-08 北京奇虎科技有限公司 一种在浏览器中进行图片处理的方法、装置和浏览器

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20020054243A (ko) * 2000-12-27 2002-07-06 오길록 다중 영상을 이용한 대화형 모델 생성 장치 및 그 방법
CN102523387B (zh) * 2011-12-09 2014-06-18 深圳万兴信息科技股份有限公司 一种在视频中实现火焰特效的方法和装置
CN102591655A (zh) * 2011-12-28 2012-07-18 北京新媒传信科技有限公司 一种图标按钮的实现方法和装置

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20090327231A1 (en) * 2008-06-27 2009-12-31 Microsoft Corporation Inline enhancement of web lists
CN101656814A (zh) * 2008-08-18 2010-02-24 爱思开电讯投资(中国)有限公司 用于将声音文件添加到jpeg文件中的方法及装置
CN103024063A (zh) * 2012-12-24 2013-04-03 腾讯科技(深圳)有限公司 一种数据共享方法、客户端及系统
CN103500186A (zh) * 2013-09-13 2014-01-08 北京奇虎科技有限公司 一种在浏览器中进行图片加载的方法、装置和浏览器
CN103500187A (zh) * 2013-09-13 2014-01-08 北京奇虎科技有限公司 一种在浏览器中进行图片处理的方法、装置和浏览器

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113573102A (zh) * 2021-08-18 2021-10-29 北京中网易企秀科技有限公司 一种视频生成方法及装置

Also Published As

Publication number Publication date
CN103500187B (zh) 2017-03-15
CN103500187A (zh) 2014-01-08

Similar Documents

Publication Publication Date Title
WO2015035943A1 (zh) 一种在浏览器中进行图片加载的方法、装置和浏览器
WO2015035944A1 (zh) 一种在浏览器中进行图片处理的方法、装置和浏览器
US10949052B2 (en) Social interaction in a media streaming service
US10380227B2 (en) Generating layout for content presentation structures
CN106462555B (zh) 用于web内容生成的方法和系统
CN102460412B (zh) 用于在网络中管理及/或再现因特网多媒体内容的系统及方法
US9674580B2 (en) Method and system for recording video directly into an HTML framework
US20130326333A1 (en) Mobile Content Management System
WO2017173781A1 (zh) 视频帧截取方法和装置
US20130272679A1 (en) Video Generator System
US20080313570A1 (en) Method and system for media landmark identification
US20070011138A1 (en) System and method for interactive data management
WO2015196954A1 (zh) 网页元素的显示方法以及浏览器装置
WO2010033828A1 (en) Self-replicating rich media interface
US20140282138A1 (en) Dynamic generation of user interface placeholder templates
US20110161802A1 (en) Methods, processes and systems for centralized rich media content creation, custimization, and distributed presentation
US20090064005A1 (en) In-place upload and editing application for editing media assets
JP7293338B2 (ja) ビデオ処理方法、装置、デバイスおよびコンピュータプログラム
US20130198636A1 (en) Dynamic Content Presentations
Firtman jQuery mobile: up and running
CN105096363A (zh) 一种编辑图片的方法及图片编辑装置
CN108509589B (zh) 信息流展示方法及系统、计算机可读存储介质
US10694222B2 (en) Generating video content items using object assets
WO2014108040A1 (zh) 在电子设备上呈现内容的方法和装置
CN106899859A (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: 14843845

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 14843845

Country of ref document: EP

Kind code of ref document: A1