CN102546921B - Method, system and mobile terminal for achieving Web panorama browsing - Google Patents

Abstract

The invention discloses a method, a system and a mobile terminal for achieving Web panorama browsing, which relates to the field of virtual reality achieving. The method includes: obtaining a panorama; responding to a browsing command and determining browsing images according to the panorama; writing the browsing images into a double-display cache area corresponding to a viewing window alternatively; and displaying the browsing images in the double-display cache area alternatively in a viewing window. Due to the fact that the browsing images are written into the double-display area alternatively, a terminal displays the browsing images in the cache area alternatively in the viewing window, and a problem of slack browsing caused by insufficient processing capacity of the terminal is solved, the panorama can be displayed smoothly, and user experience is improved.

Description

Implementation method, system and mobile terminal that Web panorama sketch is browsed

Technical field

The present invention relates to virtual reality technology field, relate in particular to implementation method, system and mobile terminal that a kind of Web panorama sketch is browsed.

Background technology

Along with improving gradually and operation system of smart phone constantly perfect of smart mobile phone performance, increasing user habit is in passing through surfing Internet with cell phone browsing page, and current mobile phone web pages still mainly adopts the presentation mode of graph text information, user experiences poor, needs a kind of brand-new form that represents to attract user.

Panorama sketch technology is an important technology in virtual reality, can greatly improve user's experience.Use on the internet at present, be applicable to the various industries that have displaying demand such as tourism, real estate.Compare with other virtual reality technology means that need a large amount of three-dimensional scenic building model and simulation technology to drop into, panorama sketch technology adopts the real panoramic picture of splicing to help relatively easily people to realize virtual roaming on the spot in person and mutual serious hope.Show for the three-dimensional of a lot of actual environments,, house property panoramic virtual such as: the virtual guide to visitors in tourist attractions, urban environment three-dimensional panorama is virtual etc., has very actual using value.

Current existing panorama sketch is browsed, or uses flash technology, but that flash file takies resource is excessive, and mobile phone is supportive not strong; Use the mode of plug-in unit, but prerequisite is that certain plug-in unit must be installed in the terminal of oneself.

Summary of the invention

The technical problem that the present invention will solve is to provide implementation method, system and the mobile terminal that a kind of Web panorama sketch is browsed, and can realize more glibly panorama sketch and browse.

The invention provides the implementation method that a kind of Web panorama sketch is browsed, comprising:

Obtain panoramic picture;

In response to browsing instructions, determine image browsing according to panoramic picture;

Image browsing is alternately write to the dual display buffers district corresponding with view window; Described browsing instructions comprise move horizontally, vertically move, panorama sketch convergent-divergent or full screen display;

Image browsing in view window in Alternation Display dual display buffers district;

Script based on CSS and JavaScript is realized Web panorama sketch and is browsed;

Wherein, represent respectively the image of two display buffers corresponding with view window with Image1 and Image2, the size of panoramic pictures, (left, top for position; width, height) represent, size, the position of view window use (0; 0, View_width, View_height) represent;

According to the horizontal direction of picture displacement, set two kinds of Move Modes: MOVE_ASC pattern, view is motionless and picture moves to left, the effect of translation relatively from left to right that what view was seen is; MOVE_DESC pattern, view is motionless and picture moves to right, the effect of translation from right to left relatively that what view was seen is; For Image1, the position of Image2 is on its left side or right side, and the pattern of browsing depending on panorama sketch, has the position relationship localRelation of two types, is designated as: IMG_FIRST, represents the left side of Image2 at Image1; IMG_LAST, represents the right side of Image2 at Image1;

(1) browse initialization

The position relationship localRelation that sets Move Mode moveMode, Image2 is respectively MOVE_ASC pattern or MOVE_DESC pattern, the step-length imgeStep that level when mobile, vertical direction move is set and is some constants;

(2) horizontal direction displacement

1) translation step-length step determines

If that moveMode adopts is MOVE_ASC pattern, step=-imageStep;

If that moveMode adopts is MOVE_DESC pattern, step=imageStep;

2) Image1 picture is processed

Once, the horizontal level of picture can be expressed as in every translation:

x=Image1.left+step

If do not consider the situation of picture translation out-of-bounds, the value of x is the Image1.left value after translation; But consider the problem of picture translation out-of-bounds, the value of x can not directly be given Image1.left, need process by following several situations:

If what a) moveMode adopted is MOVE_ASC pattern

In the time that view area left margin is shifted out in picture Image1 left side, be handled as follows:

localRelation=IMG_LAST;

In the time of the shift-in view area of the right side of picture, be handled as follows:

x=x+2×Image1.width

localRelation=IMG_FIRST;

What b) img_move adopted is MOVE_DESC pattern

In the time that view area right margin is shifted out on picture Image1 right side, be handled as follows:

localRelation=IMG_LAST;

In the time that the left side of picture Image1 enters view area, be handled as follows:

x=x-2×Image1.width

localRelation=IMG_FIRST;

Finally directly give Image1.left by the value of x;

3) Image2 picture is processed

Image2 picture and Image1 picture keep picture size (width, height) consistent, and top value is also consistent, unique different be exactly left value; To left value, big or small control divides following two kinds of situation processing:

A) moveMode adopt be MOVE_ASC pattern and localRelation=IMG_LAST, or moveMode adopt be MOVE_DESC pattern and localRelation=IMG_FIRST:

Image2.left=Image1.left+Image1.width

B) other situations:

Image2.left=Image1.left-Image1.width

By the effective control to picture Image1 and Image2, realize same Zhang Quanjing figure left and right 360 and spend the effect of browsing; When moving to left with the exchange moving to right by moveMode and localRelation, switch and can realize.

According to the inventive method embodiment, obtain panoramic picture and comprise: obtain panoramic picture from server end.

According to the inventive method embodiment, also comprise: server end is by image preliminary treatment, characteristic vector extraction, characteristic matching, Image Mosaics, image co-registration generating panorama image.

According to the inventive method embodiment, browsing instructions comprise move horizontally, vertically move, panorama sketch convergent-divergent or full screen display.

According to the inventive method embodiment, panoramic picture is the cylindrical surface projecting image that conversion obtains through cylindrical surface projecting.

The present invention also provides a kind of mobile terminal, comprises the dual display buffers district corresponding with view window, and:

Panoramic picture acquisition module, for obtaining panoramic picture;

Image browsing determination module, in response to browsing instructions, determines image browsing according to panoramic picture, and image browsing is alternately write to dual display buffers district;

Image display, for the image browsing in view window Alternation Display dual display buffers district; Described browsing instructions comprise move horizontally, vertically move, panorama sketch convergent-divergent or full screen display;

Control module, obtains operational order for the script of resolving CSS and JavaScript, and operational order is sent to panoramic picture acquisition module, image browsing determination module and image display;

Wherein, represent respectively the image of two display buffers corresponding with view window with Image1 and Image2, the size of panoramic pictures, (left, top for position; width, height) represent, size, the position of view window use (0; 0, View_width, View_height) represent;

According to the horizontal direction of picture displacement, set two kinds of Move Modes: MOVE_ASC pattern, view is motionless and picture moves to left, the effect of translation relatively from left to right that what view was seen is; MOVE_DESC pattern, view is motionless and picture moves to right, the effect of translation from right to left relatively that what view was seen is; For Image1, the position of Image2 is on its left side or right side, and the pattern of browsing depending on panorama sketch, has the position relationship localRelation of two types, is designated as: IMG_FIRST, represents the left side of Image2 at Image1; IMG_LAST, represents the right side of Image2 at Image1;

(1) browse initialization

The position relationship localRelation that sets Move Mode moveMode, Image2 is respectively MOVE_ASC pattern or MOVE_DESC pattern, the step-length imgeStep that level when mobile, vertical direction move is set and is some constants;

(2) horizontal direction displacement

1) translation step-length step determines

If that moveMode adopts is MOVE_ASC pattern, step=-imageStep;

If that moveMode adopts is MOVE_DESC pattern, step=imageStep;

2) Image1 picture is processed

Once, the horizontal level of picture can be expressed as in every translation:

x=Image1.left+step

If do not consider the situation of picture translation out-of-bounds, the value of x is the Image1.left value after translation; But consider the problem of picture translation out-of-bounds, the value of x can not directly be given Image1.left, need process by following several situations:

If what a) moveMode adopted is MOVE_ASC pattern

In the time that view area left margin is shifted out in picture Image1 left side, be handled as follows:

localRelation=IMG_LAST;

In the time of the shift-in view area of the right side of picture, be handled as follows:

x=x+2×Image1.width

localRelation=IMG_FIRST;

What b) img_move adopted is MOVE_DESC pattern

In the time that view area right margin is shifted out on picture Image1 right side, be handled as follows:

localRelation=IMG_LAST;

In the time that the left side of picture Image1 enters view area, be handled as follows:

x=x-2×Image1.width

localRelation=IMG_FIRST;

Finally directly give Image1.left by the value of x;

3) Image2 picture is processed

Image2 picture and Image1 picture keep picture size (width, height) consistent, and top value is also consistent, unique different be exactly left value; To left value, big or small control divides following two kinds of situation processing:

A) moveMode adopt be MOVE_ASC pattern and localRelation=IMG_LAST, or moveMode adopt be MOVE_DESC pattern and localRelation=IMG_FIRST:

Image2.left=Image1.left+Image1.width

B) other situations:

Image2.left=Image1.left-Image1.width

By the effective control to picture Image1 and Image2, realize same Zhang Quanjing figure left and right 360 and spend the effect of browsing; When moving to left with the exchange moving to right by moveMode and localRelation, switch and can realize.

According to mobile terminal of the present invention embodiment, browsing instructions comprise move horizontally, vertically move, panorama sketch convergent-divergent or full screen display.

The system that realizes that the present invention also provides a kind of Web panorama sketch to browse, comprises server and above-mentioned mobile terminal; Server is for generating panorama image, and mobile terminal obtains panoramic picture from server.

Implementation method, system and mobile terminal that Web panorama sketch provided by the invention is browsed, image browsing is alternately write to dual display buffers district, terminal is the image browsing in Alternation Display buffering area in view window, overcome the slack problem of browsing that common terminal processing capacity deficiency causes, can show more glibly panorama sketch, improve user's experience.

Accompanying drawing explanation

Fig. 1 illustrates the flow chart of an embodiment of the implementation method that mobile phone Web panorama sketch of the present invention browses;

Fig. 2 illustrates that server end of the present invention generates the flow chart of an embodiment of panorama sketch;

Fig. 3 illustrates the example that generates panorama sketch according to picture;

Fig. 4 illustrates the example that generates cylindrical surface projecting figure according to panorama sketch;

Fig. 5 illustrates the position relationship schematic diagram of panorama sketch and view window;

Fig. 6 illustrates the structure chart of an embodiment of the system that realizes that Web panorama sketch of the present invention browses;

Fig. 7 goes out the structure chart of an embodiment of mobile terminal of the present invention.

Embodiment

With reference to the accompanying drawings the present invention is described more fully, exemplary embodiment of the present invention is wherein described.In the accompanying drawings, identical label represents identical or similar assembly or element.

According to part embodiment of the present invention, adopt image processing, CSS and JavaScript technology, realize mobile phone Web panorama map generalization and result of browse, and operated and realized man-machine interaction by mobile phone key.

Fig. 1 illustrates the flow chart of an embodiment of the implementation method that mobile phone Web panorama sketch of the present invention browses.

As shown in Figure 1, in step 102, obtain panoramic picture.For example at server end according to picture generating panorama image, terminal obtains panoramic picture from server end.

In step 104, in response to browsing instructions, determine image browsing according to panoramic picture.User inputs browsing instructions, and terminal, according to user's browsing instructions, is determined image browsing according to panoramic picture.For example, according to the moving to left of user, move to right, on move, move down, the instruction such as convergent-divergent, determine current image browsing.

In step 106, image browsing is alternately write to the dual display buffers district corresponding with view window.Two display buffers corresponding with view window are set in the internal memory of terminal, definite image browsing is alternately write to dual display buffers district.

In step 108, the image browsing in view window in Alternation Display dual display buffers district.For example, current time shows the image of the first display buffer, and next moment shows the image of the second display buffer, then next moment show the image of the first display buffer, the like.

In the above-described embodiments, image browsing is alternately write to dual display buffers district, and terminal is the image browsing in Alternation Display buffering area in view window, has overcome the slack problem of browsing that common terminal processing capacity deficiency causes, can smoothly show and improve user's experience by panorama sketch.

According to one embodiment of present invention, the script in terminal based on CSS and JavaScript is realized Web panorama sketch and is browsed, by CSS(Cascading Style Sheets, CSS) and the script of JavaScript realize the above-mentioned step of browsing.Terminal plays panorama sketch in prior art, or use flash technology, but that flash file takies resource is excessive, and mobile phone is supportive not strong; Use the mode of plug-in unit, but prerequisite is that certain plug-in unit must be installed in the terminal of oneself.Script based on CSS and JavaScript is realized Web panorama sketch and is browsed, and highly versatile does not need user to download any plug-in unit, takies resource little, supportive strong to mobile phone.

Fig. 2 illustrates that server end of the present invention generates the flow chart of an embodiment of panorama sketch.

As shown in Figure 2, step 202, image preliminary treatment.For example, the preliminary treatment of use image improves the visual effect of image, removes the noise of image by picture smooth treatment technology.

Step 204, characteristic vector is extracted.For example, use SIFT algorithm to extract characteristic vector.

SIFT algorithm is a kind of method for registering based on feature.SIFT Feature Correspondence Algorithm is that David G.Lowe has summed up on the basis of the characteristic detection method based on invariant technology in the past, in 2004 propose a kind of based on metric space, to image scaling, rotate the Feature Correspondence Algorithm that even affine transformation maintains the invariance.This algorithmic match ability is stronger, can extract stable feature, can process the matching problem under translation, rotation, affine transformation, visual transform, illumination change situation occurs between two width images, even to a certain extent the image of arbitrarily angled shooting is also possessed to comparatively stable characteristic matching ability, thereby can realize the characteristic matching between the two width images that differ greatly.

Step 206, characteristic matching.For example, use KD tree to carry out characteristic matching with BBF algorithm.

For the SIFT characteristic point of extracting in image, literary composition uses k-d tree tree to build algorithm and builds a k-d tree, re-uses BBF algorithm and find the near distance spot KNN (K-nearest neighbor) on k-d tree.K-d tree is the expansion of binary search tree, the dimension of k representation space.Space is divided into two by every one deck of k-d tree, and the top layer node of tree is divided by one dimension, and lower one deck node is divided by another dimension, and by that analogy, each dimension moves in circles.Division will make at each node, and the only about half of point being stored in subtree falls into a side, and second half falls into opposite side.In the time that counting in a node is less than given maximum number of points, divides and finish.BBF (Best Bin First) algorithm for looking for minimum distance matching double points on KD-tree.It from root node, finds path at KD-tree by Priority Queues, and the point missing is first filled in Priority Queues, is first scanned up to forward leaf node; And then from queue, take out current key value minimum, and repeat said process, directly sweep to leaf node for one; Until queue is empty, or stop while having repeated 200 times.

Step 208, Image Mosaics.For example, use DLT method, RANSAC algorithm, LM nonlinear optimization algorithm to obtain transformation parameter between matching characteristic to realize Image Mosaics.

After successfully extracting the SIFT characteristic point of mating between image, utilize DLT(Direct Linear Transformation) method find these characteristic points between transformation parameter, and use RANSAC algorithm to purify to characteristic point, find optimal characteristic point to (being called interior point), and estimate transformation parameter matrix.On the basis based on interior point, further utilize the transformation parameter between LM nonlinear optimization algorithm Optimized Matching characteristic point afterwards, make it to be effectively used in the splicing of image.

DLT(direct linear transformation) method, Abdal-Aziz and Karara have proposed direct linear transformation's camera and have determined calibration method, they from the deep research of the angle of photogrammetry the relation between camera image and environment object, set up the linear model of camera imaging geometry, the estimation of this PARAMETERS IN THE LINEAR MODEL completely can by linear equation solve realize.Direct linear transformation is the form of the imaging geometry of picture point and object point being write under homogeneous coordinates as to perspective projection matrix.RANSAC algorithm is a kind of full-automatic sane Image Mosaics blending algorithm.The data acquisition system P of given N data point composition, wherein great majority are to be produced by the particular model of a unknown parameters, the parameter of this model at least needs n data point to obtain (N>n).The object of algorithm is exactly to obtain the parameter of this model.By following process operation k time: Step1, from P, choose at random the subset S1 that contains n data point; Step2, calculates a model H1 by a selected n data point; Step3, to remaining N-n data point in data acquisition system, calculates the distance between they and model H1, is recorded in the number c of data point in the P in certain error allowed band of H1.

Levenberg-Marquardt nonlinear optimization algorithm is the standard method that solves non-linear minimization problem.This algorithm is to do level and smooth mediation between the limit of contrary Hessian matrix method and steepest descent method, and a rear method is applied when away from minimum value, is switched to gradually last method in the time approaching minimum value.From algorithm essence, they all cannot overcome chooses sensitivity and can not guarantee to converge to the defects such as globally optimal solution initial value.If but conventionally initial value error within the specific limits, utilize this refinement algorithm, can make within the error of match point is controlled at 0.1 pixel.

Step 210, image co-registration.For example, use the splicing vestige between image interfusion method removal of images.

Fig. 3 illustrates the example that generates panorama sketch according to picture.Fig. 3 top illustrates that processing generates the panorama sketch shown in Fig. 3 below to 3 continuous pictures through image.

According to one embodiment of present invention, for the plane panorama sketch generating, can also adopt cylindrical surface projecting transformation for mula to realize the cylindrical surface projecting of this panorama sketch, obtain the cylindrical surface projecting image of panorama sketch.Like this, except directly browsing plane panorama sketch, user can also select the visual effect of cylindrical distortion.Fig. 4 illustrates the example that generates cylindrical surface projecting figure according to panorama sketch.As shown in Figure 4, the panorama sketch before the 1st behavior projection, the effect after the 2nd behavior cylindrical surface projecting.

The realization of browsing below by a concrete example explanation panorama sketch mobile phone.

Fig. 5 illustrates the position relationship schematic diagram of panorama sketch and view window.The large frame table in outside shows panorama sketch, has corresponding width width, height height and left upper apex (left, top).Wherein ripple frame table shows view window, has width View_width and height View_height.In the following description, represent respectively the image of two display buffers corresponding with view window with Image1 and Image2.As shown in Figure 5, the size of panoramic pictures, position use (left, top, width, height) to represent, size, the position of view window represent with (0,0, View_width, View_height).Smooth and easy the browsing of spending in order to realize panorama sketch 360, has been used picture (being denoted as respectively Image1 and the Image2) Alternation Display in two display buffers.

According to the horizontal direction of picture displacement, set two kinds of Move Mode moveMode:MOVE_ASC patterns, view is motionless and picture moves to left, and is the effect of translation relatively from left to right so view sees; MOVE_DESC pattern, view is motionless and picture moves to right, and is the effect of translation from right to left relatively so view sees.For Image1, the position of Image2 can be that the pattern of browsing depending on panorama sketch, particularly has the position relationship localRelation of two types, is designated as on its left side or right side: IMG_FIRST, represents the left side of Image2 at Image1; IMG_LAST, represents the right side of Image2 at Image1.

(1) browse initialization

The position relationship localRelation that sets Move Mode moveMode, Image2 is respectively MOVE_ASC pattern, IMG_LAST, the step-length imgeStep that level when mobile, vertical direction move is set simultaneously and is some constants.

(2) horizontal direction displacement

1) translation step-length step determines

If that moveMode adopts is MOVE_ASC pattern, step=-imageStep;

If that moveMode adopts is MOVE_DESC pattern, step=imageStep;

2) Image1 picture is processed

Once, the horizontal level of picture can be expressed as in every translation:

x=Image1.left+step

If do not consider the situation of picture translation out-of-bounds, the value of x is the Image1.left value after translation.But consider the problem of picture translation out-of-bounds, the value of x can not directly be given Image1.left, need process by following several situations.

If what a) moveMode adopted is MOVE_ASC pattern

In the time that view area left margin is shifted out in picture Image1 left side, be handled as follows:

localRelation=IMG_LAST;

In the time of the shift-in view area of the right side of picture, be handled as follows:

x=x+2×Image1.width

localRelation=IMG_FIRST;

What b) img_move adopted is MOVE_DESC pattern

In the time that view area right margin is shifted out on picture Image1 right side, be handled as follows:

localRelation=IMG_LAST;

In the time that the left side of picture Image1 enters view area, be handled as follows:

x=x-2×Image1.width

localRelation=IMG_FIRST;

Finally directly give Image1.left by the value of x.

3) Image2 picture is processed

Image2 picture and Image1 picture keep picture size (width, height) consistent, and top value is also consistent, unique different be exactly left value.To left value, big or small control divides following two kinds of situation processing.

A) moveMode adopt be MOVE_ASC pattern and localRelation=IMG_LAST, or moveMode adopt be MOVE_DESC pattern and localRelation=IMG_FIRST:

Image2.left=Image1.left+Image1.width

B) other situations:

Image2.left=Image1.left-Image1.width

By the effective control to picture Image1 and Image2, can realize same Zhang Quanjing figure left and right 360 and spend the perfect effect of browsing.Move to left with the exchange moving to right also only need to be by moveMode and localRelation time switching can realize.

(3) vertical direction displacement

Because Image2 picture and Image1 picture keep picture size (width, height) consistent, top value is also consistent, so only need process the position that can obtain after translation to a pictures wherein.

On the result of browse of moving by picture is moved down and is achieved, move event on triggering once,

y=Image1.top+imageStep

Move down picture and may occur out-of-bounds problem, therefore add a constraints to move down not out-of-bounds to guarantee picture, if that is: y is greater than zero, directly the value of y is made as to zero, finally give Image1.top and Image2.top by y value.

In like manner, the result of browse moving down is moved on being equivalent to picture being carried out, and triggers the event that once moves down,

y=Image1.top-imageStep

Move down picture and may occur out-of-bounds problem, therefore add a constraints to move down not out-of-bounds to guarantee picture, if that is: y is less than (View_height-Image1.height), directly y value is made as to (View_height-Image1.height), finally gives Image1.top and Image2.top by y value.

(4) panorama sketch convergent-divergent

In order to make the center of convergent-divergent rearview constant, we choose and carry out convergent-divergent take view center as datum mark, and the ratio of establishing convergent-divergent is:

m=1.3 ^d

The picture size after convergent-divergent, position are:

$\begin{array}{c}\mathrm{width}=\mathrm{width}\×m\\ \mathrm{height}=\mathrm{height}\×m\\ \mathrm{left}=\frac{1}{2}\mathrm{View}\_\mathrm{width}-(\frac{1}{2}\mathrm{View}\_\mathrm{width}-\mathrm{left})\×m\\ \mathrm{top}=\frac{1}{2}\mathrm{View}\_\mathrm{height}-(\frac{1}{2}\mathrm{View}\_\mathrm{height}-\mathrm{top})\×m\end{array}$

By can realize the zoom function of panorama sketch to the control of d.

In addition, for fear of the too large or too little situation without practical significance of panorama sketch convergent-divergent, value that can be by d is set, in a closed interval, can certainly be carried out boundary constraint by picture size is set.

(5) panorama sketch is full frame

Only need change View_width, View_height, make it the size that size is equal to screen.

Fig. 6 illustrates the structure chart of an embodiment of the system that realizes that Web panorama sketch of the present invention browses.As shown in Figure 6, this system comprises mobile terminal 61 and server 62.Server 62 generating panorama images, mobile terminal 61 obtains this panoramic picture from server 62.Wherein, mobile terminal 61 comprises the dual display buffers district corresponding with view window, also comprises panoramic picture acquisition module 611, image browsing determination module 612 and image display 613.Panoramic picture acquisition module 611 obtains panoramic picture; Image browsing determination module 612, in response to browsing instructions, is determined image browsing according to panoramic picture, and image browsing is alternately write to dual display buffers district; Image display 613 is the image browsing in Alternation Display dual display buffers district in view window.

Fig. 7 goes out the structure chart of an embodiment of mobile terminal of the present invention.As shown in Figure 7, this mobile terminal 71, except comprising panoramic picture acquisition module 611, image browsing determination module 612 and image display 613, also comprises control module 714.Panoramic picture acquisition module 611, image browsing determination module 612 and image display 613 can be referring to the descriptions of respective modules in Fig. 6, for being not described in detail at this for purpose of brevity.The script that control module 714 is resolved CSS and JavaScript obtains operational order, and operational order is sent to panoramic picture acquisition module 611, image browsing determination module 612 and image display 613.

In above-described embodiment, browsing instructions for example comprise move horizontally, vertically move, panorama sketch convergent-divergent or full screen display.

This business is based on smart mobile phone, for user provides the function of browsing Web panorama sketch on mobile phone, make user watch the true scene of 3 D Quasi by mobile phone whenever and wherever possible, as on the spot in person, experience the panorama of the industries such as tourist attractions, real estate, hotel apartment, communal facility and show, to bringing the sensation of impacting and shaking on user psychology.This business can be brought brand-new visual effect and brand-new business experience for user, brings considerable economic benefit.

For the specific implementation of modules in the embodiment of Fig. 6-7, can, referring to the above description of Fig. 1-5 embodiment, for for purpose of brevity, not describe in detail at this.

In superincumbent several embodiment, modules illustrates to illustrate their function with block diagram.These functional blocks can realize by hardware, software, firmware, middleware, microcode, hardware description voice or their combination in any.For instance, one or two functional blocks can utilize the code operating on microprocessor, digital signal processor (DSP) or any other suitable platform to realize.Code can represent the combination in any of process, function, subprogram, program, routine, subroutine, module or instruction, data structure or program statement.Code can be arranged in computer-readable medium.Computer-readable medium can comprise one or more memory device, for example, comprise RAM memory, flash memories, ROM memory, eprom memory, eeprom memory, register, hard disk, portable hard drive, CD-ROM or other any type of storage mediums well known in the art.Computer-readable medium can also comprise the carrier wave of encoded data signal.

Alternatively, or in addition, one or two functional modules can utilize application-specific integrated circuit (ASIC) (ASIC), controller, microcontroller, state machine, field programmable gate array (FPGA) or other programmable logic devices, discrete gate or transistor logic, discrete hardware components or their combination in any to realize.

Those skilled in the art will recognize that hardware, firmware and software configure replaceability in these cases, and how to realize best the described function in each application-specific ground.

Description of the invention provides for example with for the purpose of describing, and is not exhaustively or limit the invention to disclosed form.Many modifications and variations are obvious for the ordinary skill in the art.Selecting and describing embodiment is for better explanation principle of the present invention and practical application, thereby and makes those of ordinary skill in the art can understand the present invention's design to be suitable for the various embodiment with various modifications of special-purpose.

Claims (6)

1. the implementation method that Web panorama sketch is browsed, is characterized in that, comprising:

Obtain panoramic picture;

In response to browsing instructions, determine image browsing according to described panoramic picture, described browsing instructions comprise move horizontally, vertically move, panorama sketch convergent-divergent or full screen display;

Described image browsing is alternately write to the dual display buffers district corresponding with view window;

The image browsing in dual display buffers district described in Alternation Display in described view window;

Script based on CSS and JavaScript is realized Web panorama sketch and is browsed;

Wherein, represent respectively the image of two display buffers corresponding with view window with Image1 and Image2, the size of panoramic pictures, (left, top for position; width, height) represent, size, the position of view window use (0; 0, View_width, View_height) represent;

According to the horizontal direction of picture displacement, set two kinds of Move Modes: MOVE_ASC pattern, view is motionless and picture moves to left, the effect of translation relatively from left to right that what view was seen is; MOVE_DESC pattern, view is motionless and picture moves to right, the effect of translation from right to left relatively that what view was seen is; For Image1, the position of Image2 is on its left side or right side, and the pattern of browsing depending on panorama sketch, has the position relationship localRelation of two types, is designated as: IMG_FIRST, represents the left side of Image2 at Image1; IMG_LAST, represents the right side of Image2 at Image1;

(1) browse initialization

The position relationship localRelation that sets Move Mode moveMode, Image2 is respectively MOVE_ASC pattern or MOVE_DESC pattern, the step-length imgeStep that level when mobile, vertical direction move is set and is some constants;

(2) horizontal direction displacement

1) translation step-length step determines

If that moveMode adopts is MOVE_ASC pattern, step=-imageStep;

If that moveMode adopts is MOVE_DESC pattern, step=imageStep;

2) Image1 picture is processed

Once, the horizontal level of picture can be expressed as in every translation:

x=Image1.left+step

If do not consider the situation of picture translation out-of-bounds, the value of x is the Image1.left value after translation; But consider the problem of picture translation out-of-bounds, the value of x can not directly be given Image1.left, need process by following several situations:

If what a) moveMode adopted is MOVE_ASC pattern

In the time that view area left margin is shifted out in picture Image1 left side, be handled as follows:

localRelation=IMG_LAST;

In the time of the shift-in view area of the right side of picture, be handled as follows:

x=x+2×Image1.width

localRelation=IMG_FIRST;

What b) img_move adopted is MOVE_DESC pattern

In the time that view area right margin is shifted out on picture Image1 right side, be handled as follows:

localRelation=IMG_LAST;

In the time that the left side of picture Image1 enters view area, be handled as follows:

x=x-2×Image1.width

localRelation=IMG_FIRST;

Finally directly give Image1.left by the value of x;

3) Image2 picture is processed

Image2 picture and Image1 picture keep picture size (width, height) consistent, and top value is also consistent, unique different be exactly left value; To left value, big or small control divides following two kinds of situation processing:

A) moveMode adopt be MOVE_ASC pattern and localRelation=IMG_LAST, or moveMode adopt be MOVE_DESC pattern and localRelation=IMG_FIRST:

Image2.left=Image1.left+Image1.width

B) other situations:

Image2.left=Image1.left-Image1.width

By the effective control to picture Image1 and Image2, realize same Zhang Quanjing figure left and right 360 and spend the effect of browsing; When moving to left with the exchange moving to right by moveMode and localRelation, switch and can realize.

2. implementation method according to claim 1, is characterized in that, described in obtain panoramic picture and comprise:

Obtain described panoramic picture from server end.

3. implementation method according to claim 2, is characterized in that, also comprises:

Described server end generates described panoramic picture by image preliminary treatment, characteristic vector extraction, characteristic matching, Image Mosaics, image co-registration.

4. implementation method according to claim 1, is characterized in that, described panoramic picture is the cylindrical surface projecting image that conversion obtains through cylindrical surface projecting.

5. a mobile terminal, is characterized in that, comprises the dual display buffers district corresponding with view window, also comprises:

Panoramic picture acquisition module, for obtaining panoramic picture;

Image browsing determination module, in response to browsing instructions, determines image browsing according to described panoramic picture, and described image browsing is alternately write to described dual display buffers district; Described browsing instructions comprise move horizontally, vertically move, panorama sketch convergent-divergent or full screen display;

Image display, for the image browsing in dual display buffers district described in described view window Alternation Display;

Control module, obtains operational order for the script of resolving CSS and JavaScript, and described operational order is sent to described panoramic picture acquisition module, image browsing determination module and image display;

Wherein, represent respectively the image of two display buffers corresponding with view window with Image1 and Image2, the size of panoramic pictures, (left, top for position; width, height) represent, size, the position of view window use (0; 0, View_width, View_height) represent;

According to the horizontal direction of picture displacement, set two kinds of Move Modes: MOVE_ASC pattern, view is motionless and picture moves to left, the effect of translation relatively from left to right that what view was seen is; MOVE_DESC pattern, view is motionless and picture moves to right, the effect of translation from right to left relatively that what view was seen is; For Image1, the position of Image2 is on its left side or right side, and the pattern of browsing depending on panorama sketch, has the position relationship localRelation of two types, is designated as: IMG_FIRST, represents the left side of Image2 at Image1; IMG_LAST, represents the right side of Image2 at Image1;

(1) browse initialization

The position relationship localRelation that sets Move Mode moveMode, Image2 is respectively MOVE_ASC pattern or MOVE_DESC pattern, the step-length imgeStep that level when mobile, vertical direction move is set and is some constants;

(2) horizontal direction displacement

1) translation step-length step determines

If that moveMode adopts is MOVE_ASC pattern, step=-imageStep;

If that moveMode adopts is MOVE_DESC pattern, step=imageStep;

2) Image1 picture is processed

Once, the horizontal level of picture can be expressed as in every translation:

x=Image1.left+step

If do not consider the situation of picture translation out-of-bounds, the value of x is the Image1.left value after translation; But consider the problem of picture translation out-of-bounds, the value of x can not directly be given Image1.left, need process by following several situations:

If what a) moveMode adopted is MOVE_ASC pattern

In the time that view area left margin is shifted out in picture Image1 left side, be handled as follows:

localRelation=IMG_LAST;

In the time of the shift-in view area of the right side of picture, be handled as follows:

x=x+2×Image1.width

localRelation=IMG_FIRST;

What b) img_move adopted is MOVE_DESC pattern

In the time that view area right margin is shifted out on picture Image1 right side, be handled as follows:

localRelation=IMG_LAST;

In the time that the left side of picture Image1 enters view area, be handled as follows:

x=x-2×Image1.width

localRelation=IMG_FIRST;

Finally directly give Image1.left by the value of x;

3) Image2 picture is processed

Image2 picture and Image1 picture keep picture size (width, height) consistent, and top value is also consistent, unique different be exactly left value; To left value, big or small control divides following two kinds of situation processing:

A) moveMode adopt be MOVE_ASC pattern and localRelation=IMG_LAST, or moveMode adopt be MOVE_DESC pattern and localRelation=IMG_FIRST:

Image2.left=Image1.left+Image1.width

B) other situations:

Image2.left=Image1.left-Image1.width

By the effective control to picture Image1 and Image2, realize same Zhang Quanjing figure left and right 360 and spend the effect of browsing; When moving to left with the exchange moving to right by moveMode and localRelation, switch and can realize.

6. the system that realizes that Web panorama sketch is browsed, is characterized in that, comprises server and mobile terminal as claimed in claim 5;

Described server is used for generating described panoramic picture, and described mobile terminal obtains described panoramic picture from described server.

Images