CN111581564B - 一种应用Canvas实现的网页同步交流方法 - Google Patents

Abstract

本申请涉及一种应用Canvas实现的网页同步交流方法，应用于网页同步交流，方法包括，在第一网页中创建与用于同步的网页内容相独立的第一Canvas，第一网页响应于网页同步执行请求，读取第一网页中用于同步显示的网页元素，基于所述网页元素的显示特征在第一Canvas上执行绘制，并将绘制内容生成图片数据，将所述图片数据发送至第二网页；所述第二网页接收并提取图片数据，基于图片数据在预置的第二Canvas中执行图像绘制操作。本申请第一网页包含完整的网页数据和拥有网页操作执行权限，第二网页以Canvas形式显示网页同步画面，在保护第一网页的网页数据和执行权限的基础上实现了第一网页、第二网页之间的同步交流。

Description

一种应用Canvas实现的网页同步交流方法

技术领域

本发明涉及通信领域，尤其涉及一种应用Canvas实现的网页同步交流方法。

背景技术

用户浏览网页，会遇到将网页发送或分享至其他用户进行同步交流的情形，原用户与参与用户针对同一网页进行交流，交流者共同操作相关网页元素，交流过程中网页操作、显示画面保持同步状态，极大的提升了交流效率且拥有非常好的交流效果。

现有技术中，存在以下问题：原用户与参与用户针对同一网页进行交流，由于用户所使用的浏览器、设备存在差异，不同用户之间很难达到完全一致的浏览效果，如图2所示的同一网页在iPhone 6/7/8Plus与Galaxy S5上浏览效果，其中的文字部分可见明显差异(详见字样“1965”的显示位置)，产生原因如：浏览器显示区域尺寸不同、不同浏览器对CSS样式解析存在差异、设备字体不同等，由此造成网页交流画面不能完全同步，严重影响交流质量，例如在交流过程中进行涂鸦、标记时，所操作的位置会出现错乱现象等。另外，原用户与参与用户同时操作某一网页，如网页中存在登录、与服务器端交互等情形，会导致用户隐私与重要的网页数据泄露，重复向服务器发送请求、提交数据等问题。以上关于网页交流过程中的交流画面同步问题、网页数据和操作安全问题亟需解决。

发明内容

本申请有鉴于上述现有的状况，应用HTML Canvas及其相关技术，解决网页同步交流过程中的交流画面同步问题、网页数据和操作安全问题。

第一方面，本申请提供了一种应用Canvas实现的网页同步交流方法，方法包括：

在第一网页中预先创建第一Canvas，所述第一Canvas与用于同步的网页内容相独立；

所述第一网页响应于网页同步执行请求，读取所述第一网页中用于同步显示的网页元素，基于所述网页元素的显示特征在所述第一Canvas上执行绘制，并提取所述第一Canvas内容生成图片数据，将所述图片数据生成为第一同步数据发送至第二网页；

所述第一同步数据用于所述第二网页接收，并基于其包含的所述图片数据在所述第二网页内预置的第二Canvas中执行图像绘制操作，绘制所述图片数据。

上述第一方面提供的技术方案中，将所述第一Canvas内容生成图片数据，包括以下任意一种生成方式：

A.根据所述第一Canvas显示的整体内容生成为图片数据；

B.根据所述第一Canvas当前内容与上一网页同步执行请求完成后的内容进行比较计算并获得差异部分，或者，根据本次同步执行请求所执行的绘制内容区域作为差异部分，将所述差异部分提取生成为一个或多个差异图片，同时对应记录每个差异图片在所述第一Canvas中的相对位置信息，将所述差异图片与所述相对位置信息组合生成为图片数据；相应地，所述第二网页解析所述图片数据，根据所述图片数据包含的所述相对位置信息计算获得替换区域，以所述图片数据包含的所述差异图片作为替换内容，在所述第二Canvas中的所述替换区域对应绘制所述替换内容。

通过本申请实施例提供的方案，可使得，在第一网页执行操作后，所述第二网页中的Canvas与所述第一网页内容画面保持一致，但第二网页中除一个预置的Canvas或图片外，可不包括其它HTML元素和网页内容。

第二方面，本申请提供了一种应用Canvas实现的网页同步交流方法，方法包括：

所述第一网页响应于网页同步执行请求，读取所述第一网页中用于同步显示的网页元素，基于所述网页元素的显示特征，生成绘制所述网页元素的一个或多个绘制指令，并对应记录所述绘制指令相关的参数、素材作为绘制资源信息，将所述绘制指令与所述绘制资源信息按照对应关系生成为绘制数据，将所述绘制数据生成为第二同步数据发送至第二网页；

所述第二同步数据用于所述第二网页接收，并基于其包含的绘制数据在所述第二网页内预置的第二Canvas中执行绘制操作，具体为：解析所述绘制数据，基于所述绘制指令及其相关的参数与素材，在预置的第二Canvas上执行所述绘制指令。

通过以上第二方面的实施例提供的方案，与第一方面所提供方法相同之处在于，同样实现了在仅公开网页显示的部分的基础上与第二网页进行交流，为两者之间进行交流提供了安全保障；与第一方面所提供方法不同之处在于，通过传送绘制指令取代直接传送图像的方式，因而，在同步过程中传输的数据量非常小，充分利用了第二网页中所预置的第二Canvas的绘制能力。

在第二方面的一种可能的实现方式中，在上一次网页同步执行请求完成后的Canvas绘制状态基础上，根据本次同步执行请求中显示特征发生改变的网页元素，计算获得与所述网页元素显示特征发生改变相对应的绘制指令，并对应记录绘制资源信息，将所述绘制指令与所述绘制资源信息按照对应关系生成为绘制数据，并将所述绘制数据生成为第二同步数据发送至第二网页；相应地，所述第二网页根据所述绘制指令，在第二Canvas当前的绘制状态下执行所述绘制指令。

该种可能的实现方式中，结合上述应用Canvas生成所述绘制指令的优选的实施方式，每一次同步基于Canvas内部所管理的绘制对象的改变输出并发送对应的绘制指令。

在第二方面的一种可能的实现方式中，当所述第一网页中用于同步显示的网页元素类型为Canvas时，基于所述Canvas，将所述Canvas上发生的Canvas绘制操作记录为一个或多个绘制指令，并对应记录绘制指令相关的参数、素材作为绘制资源信息，将所述绘制指令与所述绘制资源信息按照对应关系生成为绘制数据，将所述绘制数据生成为第二同步数据发送给第二网页。

通过本申请实施例提供的方案，可使在第一网页执行操作后，所述第二网页接收绘制指令与绘制资源信息，在所述第二网页中的Canvas上进行绘制，达到与所述第一网页内容画面保持一致的效果。

上述第一方面、第二方面提供的技术方案中，还包括记录网页元素基于Canvas的定位信息，并将所述定位信息与所述网页元素的标识信息对应存储；其中，所述Canvas为第一方面中执行绘制的第一Canvas或者第二方面中用于计算绘制指令的Canvas，所述定位信息包括网页元素在所述Canvas上绘制的大小、网页元素相对于所述Canvas的位置、网页元素在所述Canvas中所处的图层信息中的一种或多种，用于标识所述网页元素在第二Canvas中的显示位置。

以上，记录网页元素基于所述第一Canvas的定位信息目的在于记录网页元素在页面中的位置、布局信息，用于所述第一网页在接收到用户在所述第二网页的操作后，通过该操作的位置坐标，在所述记录的信息中可查找获得其所操作的网页元素；所述网页元素的标识信息，是为网页元素建立的唯一标识，用于在所述第一网页中查找并获取具体的网页元素。

上述第一方面、第二方面提供的技术方案中，获取所述网页元素的显示特征的方法，包括：

当所述第一方面中用于绘制或所述第二方面中用于执行绘制指令计算的Canvas尺寸为当前第一网页显示区域尺寸时，根据所述网页元素在第一网页中的显示，计算其显示特征；

当所述第一方面中用于绘制或所述第二方面中用于执行绘制指令计算的Canvas尺寸为自定义尺寸时，读取所述自定义尺寸，根据所述自定义尺寸建立网页容器，在所述网页容器中放置当前应用于同步的网页内容，由所述网页内容包含的自适应布局或响应式布局适配于所述网页容器获得显示效果，应用浏览器的渲染能力对其进行渲染，获取其中所包含的网页元素显示特征。

第三方面，本申请提供了一种应用Canvas实现的网页同步交流方法，所述方法包括：

第一网页响应于网页同步执行请求，读取所述第一网页中用于同步显示的网页元素，提取所述网页元素显示特征中的要素，将所述要素作为参数，执行预先制定的网页同步方法选择计算函数，根据所述函数计算结果确定本次网页同步应用的以下方法A或B生成同步数据：

A.在第一网页中预先创建的Canvas上，基于所述网页元素的显示特征在所述Canvas上执行绘制，并提取所述Canvas内容生成图片数据，将所述图片数据生成为第一同步数据发送至第二网页；

B.基于所述网页元素的显示特征，生成绘制所述网页元素的一个或多个绘制指令，并对应记录所述绘制指令相关的参数、素材作为绘制资源信息，将所述绘制指令与所述绘制资源信息按照对应关系生成为绘制数据，将所述绘制数据生成为第二同步数据发送至第二网页；

相应地，所述同步数据由所述第二网页接收后判断其执行的同步方法，当判断为按照以上A方法生成同步数据时，基于其包含的所述相对位置信息在所述第二网页内预置的第二Canvas中执行所对应的图片数据的图像绘制操作；当判断为按照以上B方法生成同步数据时，解析所述绘制数据，基于所述绘制指令相关的参数与素材，在预置的第二Canvas上执行所述绘制指令。

上述第三方面提供的技术方案中，所述网页元素显示特征中的要素，包括但不限于所述网页元素的类型、显示区域大小、是否用户交互控件中的一种或者多种；所述预先制定的网页同步方法选择计算函数，用于根据所述网页元素显示特征中的要素计算获得最适合的同步方法，如：所述要素中存在大量的图片且用户交互控件较少，采用方法A进行同步。

以上第三方面实施例提供的方案，首先对用于同步的网页内容进行分析，计算获得最优的同步方法，然后选择按照第一方面或第二方面提供的方法执行。

在本申请的一些实施例中，还包括根据网页元素的类型和/或显示特征，为网页元素选择独立的同步方法，如：在第一网页中存在视频元素，在第二网页中，其它网页元素通过第二Canvas绘制，为视频元素选择独立的同步方法，例如，在第二Canvas上方构建video标签，并从同步数据包含的绘制资源信息中，获取视频文件网址设置其src属性，获取播放控制参数控制其播放(该方式优点在于降低了与同步服务器之间的数据传输，但并非唯一方法，如，还可以采用建立定时器不停抓取视频每帧画面在所述Canvas中使用drawImage方法绘制的方式实现)。

第四方面，本申请提供了一种应用Canvas实现的网页同步交流方法，所述方法包括，

所述第二网页响应于用户在所述第二Canvas上的操作，获取所述操作的操作信息并发送至第一网页；其中，所述操作信息包括操作性质、操作位置、操作数据中的一种或多种，所述操作性质包括点击、拖动、输入、滑动中的一种或多种，所述操作位置为相对于所述第二Canvas的位置。

所述操作信息用于所述第一网页接收并解析，根据解析结果中的操作位置在预先记录的定位信息中查找，获取到用户在第二网页中的操作所对应的网页元素，基于所述操作的操作性质、操作数据在该网页元素上执行相应的网页操作。

在第四方面的一种可能的实现方式中，还包括，响应于用户在所述第二Canvas上的操作，根据所述操作的操作位置，在预先记录的定位信息中查找并获取所述操作对应的网页元素，根据所述网页元素类型判断是否以控件形式呈现，当判断为以控件形式呈现时，在所述第二网页创建相应的网页元素控件，由所述控件接收用户操作并将所述操作发生的操作数据、操作性质、操作位置数据作为操作信息发送至第一网页。

以上第四方面实施例提供的方案，所述第二网页在仅有一个Canvas(不具有实际的网页数据、网页程序执行的运行环境)的情形下，实现了由第二网页用户进行同步操作控制、执行网页操作的效果，其通过采集所述第二Canvas的用户操作，由第一网页代理执行并同步至第二网页的方式实现，此方案保证了第一网页的数据安全、操作安全。

附图说明

图1为本申请实施例提供的一种应用Canvas实现的网页同步交流方法活动图；

图2为同一网页在不同设备或浏览器中浏览的差异效果示意图；

图3为本申请实施例提供的一种应用Canvas实现的网页同步交流方法活动图；

图4为本申请实施例提供的一种应用Canvas实现的网页同步交流方法活动图；

图5为本申请实施例提供的一种应用Canvas实现的网页同步交流方法活动图(所同步的网页主体内容为Canvas)；

图6为本申请实施例提供的一种带有选择同步方法的应用Canvas实现的网页同步交流方法活动图；

图7为本申请实施例提供的一种为网页元素选择独立的同步方法的应用Canvas实现的网页同步交流方法活动图；

图8为本申请实施例提供的另一种应用Canvas实现的网页同步交流方法活动图；

图9为本申请实施例提供的一种在第二Canvas中根据网页元素类型进行同步方法处理的流程示意图；

图10为本申请实施例提供的一种使用自定义网页容器处理浏览器差异过大问题的同步效果示意图。

具体实施方式

本申请的实施方式部分仅用于对本申请进行解释，而非旨在限制本申请。

下面结合附图，对本申请的实施例进行描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。本领域普通技术人员可知，随着技术的发展和新场景的出现，本申请实施例提供的技术方案对于类似的技术问题，同样适用。

实施例一，如图3所示，本申请提供一种应用Canvas实现的网页同步交流方法，应用于第一网页与第二网页之间的同步交流，其中所述第一网页包含需要进行同步的网页内容，所述第二网页可以仅包含一个Canvas，本方法将所述第一网页中需要同步的网页内容，通过在第一网页内创建一个Canvas并在其上进行绘制，将绘制生成的图片发送至第二网页并在其所包含的Canvas中绘制，达到第一网页、第二网页之间的显示内容同步。以下详细说明：

在所述第一网页内创建canvas元素，创建方式包括在HTML文档中创建或者使用脚本创建，用于辅助生成所述第一网页需同步的网页内容的图像，其不需要在第一网页内实际显示，通过调用所述canvas的getContext方法返回的有绘制能力的对象执行绘制操作。

步骤S301，所述第一网页响应于网页同步执行请求，启动本次同步操作；

步骤S302，所述第一网页读取用于同步显示的全部或显示特征发生改变的网页元素；

步骤S303，所述第一网页在第一Canvas上执行绘制；

步骤S304，所述第一网页记录所绘制的网页元素在第一Canvas上的定位信息；

步骤S305，在所述第一网页中，选择图片生成方式。当选择需将所述第一网页包含的用于同步的网页元素整体生成图片(方式S3051)时，执行步骤S306，将第一Canvas包含的整体内容生成为图片数据；当选择根据当前网页操作引起的网页元素显示发生变化，根据差异部分生成图片(方式S3052)时，执行步骤S307，计算获得Canvas图像差异化部分，并执行步骤S308，根据Canvas图像差异化部分生成差异图片与相对位置信息，并组合生成为图片数据；

步骤S309，在以上步骤S306或步骤S308基础上执行该操作，在所述第一网页中生成第一同步数据；

步骤S310，数据发送，将所述第一同步数据发送至第二网页；

步骤S311，数据接收，所述第二网页接收所述第一同步数据；

步骤S312，所述第二网页基于所述第一同步数据提取图片数据；

步骤S313，所述第二网页根据所述图片在第一网页中的生成方式判断，当判断所述图片采用步骤S306计算生成时，执行步骤S314，在预置的第二Canvas中执行图像整体绘制；当判断所述图片采用步骤S307、步骤S308计算生成时，执行步骤S315解析图片数据，计算替换区域与替换内容，并执行步骤S316，在预置的第二Canvas中根据替换区域绘制替换内容。

根据以上步骤，可使在第一网页执行操作后，通过发送图片数据的方式进行同步，所述第二网页中的Canvas与所述第一网页内容画面保持一致，但第二网页中除一个预置的Canvas或图片外，可不包括其它HTML元素和网页内容。

其中，步骤S301中的所述第一网页的网页同步执行请求，即为需要执行与所述第二网页进行同步时发起的请求。所述第一网页响应该请求后启动网页同步操作，所述第一网页的网页同步执行请求的发起包括但不限于以下情形：

A.所述第一网页加载完成后；

B.所述第一网页与所述第二网页首次建立同步连接后；

C.监听到所述第一网页有新的网页操作完成并引起网页所包含网页元素的显示特征发生改变时；

D.接收到所述第二网页主动发送的要求同步的请求后；

E.光标的位置、显示发生变化时。

另外，在以上C情形中的网页操作，包括用户执行的网页操作、非用户执行的网页操作两种，其中，所述用户执行的网页操作指用户针对网页的操作，包括但不限于点击、拖拽、拖动、输入、页面滚动等；所述非用户执行的网页操作指非用户引起的网页程序自动执行的网页操作，包括但不限于定时器执行程序、网页加载触发的执行程序、浏览器触发的执行程序、异步执行程序、外部触发的执行程序、回调执行程序等，如：定时器按照计时触发某程序执行、网页加载完成执行某程序、因网络连接状态发生改变触发的程序执行、因外部数据传输引起的自动执行程序、服务器指令执行完成后执行某回调程序等。但是，上述网页操作不应包括为实现本方法(网页同步交流)而执行的相关网页操作。

其中，步骤S302中的所述网页元素，可对应于网页HTML文档中的标签节点，所述网页元素的显示特征包含所述标签节点在页面中渲染显示时所表现出的相关特征，包括但不限于显示区域、显示大小、图片、颜色、阴影、边框、背景、文字内容、文本效果、字体、2D转换、3D转换、多列、过渡、动画、定位中的一种或多种。如body元素的网页可见区域宽(document.body.clientWidth)、window元素的屏幕可用工作区高度(window.screen.availHeight)、div元素的大小等均属于网页元素的显示特征。在基于本申请的一种优选的实现方案中，基于Canvas技术，建立在Canvas中绘制不同的网页元素、绘制相应的CSS效果的绘制函数库，以便在所述Canvas中绘制所述元素时，根据元素类型、元素样式调用，实现快速绘制。

以上，步骤S305选择图片生成方式中，该步骤执行选择计算所参考的因素，包括但不限于同步执行请求的发起情形、网页操作的性质、同步内容、网络传输数据量中的一种或者多种，根据预先设定的规则计算获得本次同步采用的图片生成方式。例如：在同步交流建立的开始或网页画面整体切换时，网页显示内容整体发生了变化，选择方式S3051(整体生成图片的方式)，然后执行步骤S306将第一Canvas显示的整体生成为图片数据(可选地，将该图片数据转化为网络资源独立存储，适合于与多个第二网页同步的情形)；在针对网页交流过程中，网页内容变化少，选择方式S3052(根据差异部分生成图片的方式)，该方式生成的差异图片数据量相对S3051方式小，有利于网络传输，具体如：第一网页用户点击某按钮导致按钮变色，仅传输变色区域的按钮图片(同时携带按钮的绘制位置)即可。其中，步骤S307、步骤S308计算差异化的部分获得差异化图片，可通过比较当前Canvas的显示内容与上一次同步完成后的显示内容获得，还可以通过第一Canvas内部新的绘制内容获得，具体为：所述第一Canvas根据第一网页中的网页操作执行相关绘制，所绘制的内容即为变化部分，获取该部分的绘制结果内容即可得到差异化图片。另外，步骤S307、步骤S308在具体的实施过程中，还包括一次生成多个差异化的图片的情况，并记录每个差异化图片相对于第一Canvas的位置信息，进一步的，记录所述差异化图片的顺序属性，以供在所述第二Canvas中按照顺序绘制(在以图片取代第二Canvas的实现方式中，该顺序属性作为图片元素的z－index值参考)。以上所述图片的生成，在具体的实施中，还包括：根据网络单次传输的数据量限制生成多个图片，适用于所述图片较大的情形，将一个图片分割为多个图片发送，便于实现显示过程中分块加载的效果；将差异化的图片转化为网络资源图片独立存储，适用于同多个第二网页进行同步的情形，同时所存储的网络资源图片可被重复利用(如某按钮元素，将获得焦点、失去焦点状态的图片独立存储为网络资源并设置编号，可在下一次同步时直接根据编号使用)；根据网页操作的步骤进行绘制产生差异化图片，即对每次网页显示发生变化执行一次绘制，生成一个差异化图片；合并多个网页操作步骤计算绘制图片等。对应于图片的生成方式，在步骤S314、步骤S316中进行相应的绘制，可选地，在第二Canvas内对已被其它图片完全覆盖的图片进行删除处理。

在本实施例的一种可能的实现方式中，所述第二网页接收所述第一同步数据，解析其包含的图片数据，在所述第二网页中直接以图片取代第二Canvas方式呈现。根据本申请的实现原理，所述第二网页能够达到将第一网页内容以图像的形式呈现即可，所以，使用图片方式同样可达到这一要求，该种方式适合于一些网页画面在同步交流过程中变化较少的情形。

以上，在所述第二网页中以图片取代第二Canvas的实现方式中，步骤S314的处理内容应调整为：在第二网页中显示所获得的图片；步骤S315的处理内容应调整为：在第二网页中解析图片数据，获得差异图片与相对位置信息；步骤316的处理内容应调整为：在当前第二网页显示的图片上层，基于相对位置信息叠加显示所述差异图片。可选地，在步骤S314或步骤S316执行完成后，将已被其它图片完全覆盖的图片进行删除处理。

在本实施例的一种可能的实现方式中，还包括通过步骤S304记录网页元素基于第一Canvas的定位信息，并将所述定位信息与所述网页元素的标识信息对应存储，所述定位信息包括网页元素在第一Canvas上绘制的大小、网页元素相对于所述Canvas的位置、网页元素在所述Canvas中所处的图层信息(Canvas没有实际的图层，此处指逻辑的图层)中的一种或多种，用于标识所述网页元素在第二Canvas中的显示位置。

以上，记录网页元素基于所述第一Canvas的定位信息，用于在接收到用户在所述第二网页的操作后，在所述记录的信息中可查找获得所操作的网页元素。一种可选的实施方式中，步骤S304基于所述网页元素在浏览器中的显示、样式信息直接提取所述定位信息。一种优选的实施方式中，步骤S304仅存储可供用户操作的网页元素的定位信息与标识信息。

在本实施例的一种可能的实现方式中，还包括判断第一网页、第二网页视口的尺寸和比例是否存在差异或较大差异，该差异会导致交流同步过程中画面显示不完整、画面显示过小等问题，例如图10所示，10－1为第一网页(使用PC浏览器)，10－2为第二网页(手机浏览器)，同步过程中两者视口尺寸、比例不同，同步结果如图10－2，“元素2”、“元素4”显示不完整。在存在以上差异的情况下，一种优选的实施方式如10－3所示，在第一网页中自定义网页容器(所述网页容器显示属性设置为隐藏)，使其尺寸与第二网页尺寸相同，同时调整第一Canvas尺寸为该尺寸，将第一网页包含的网页元素放入该容器，所述网页元素包含自适应布局，经浏览器渲染后获得10－3效果，通过步骤S302基于该网页容器内的显示读取网页元素，执行在第一Canvas中绘制并获得图片数据，同步至第二网页后获得10－4的正常显示效果。以上所述网页容器主要特征在于可放置网页内容，如HTML中的div标签、网页组件等，在一种可选的实施方式中，网页容器采用第三方的可显示网页的组件，如Android中的WebView组件，该方式可充分利用设备特性与浏览器特性，结合网页的响应式布局对所述网页内容进行渲染，将最终获得的图像传输至第一网页。另外，以上应用网页容器的实现方案中，还包括对所述网页容器的参数进行设置，所设置信息如：尺寸、字体、是否支持缩放、文字缩放百分比等。

通过以上实施例一提供的方案，可使第一网页、第二网页的显示内容、显示效果完全同步，同时，在第一网页中保持着网页数据、网页程序执行的运行环境，第二网页中仅含有一个Canvas，不需要获取用于显示以外的其它数据，有效的保护了第一网页的网页数据、网页程序执行安全，实现了仅公开网页显示的部分与第二网页进行交流，为两者之间进行交流提供了安全保障。

实施例二，本申请的另一种实施方式，如图4所示，本申请提供一种应用Canvas实现的网页同步交流方法，应用于第一网页与第二网页之间的同步交流，其中所述第一网页包含需要进行同步的网页内容，所述第二网页仅包含一个Canvas，本方法基于所述第一网页需要同步的显示内容，计算出使用Canvas技术绘制所述显示内容所需的绘制指令，将所述绘制指令发送至第二网页并在其所包含的Canvas中绘制，达到第一网页、第二网页之间的显示内容同步。以下详细说明：

步骤S401，所述第一网页响应于网页同步执行请求，启动本次同步操作；

步骤S402，在所述第一网页中，读取用于同步显示的全部或显示特征发生改变的网页元素；

步骤S403，在所述第一网页中，基于所述网页元素的显示特征或显示特征发生的改变，生成Canvas上绘制所述网页元素的绘制指令，并记录与其相关的参数、素材为绘制资源信息；

步骤S404，在所述第一网页中，记录生成绘制指令时网页元素的定位信息；

步骤S405，在所述第一网页中，将所述绘制指令与所述绘制资源信息按照对应关系生成为绘制数据；

步骤S406，在所述第一网页中生成第一同步数据；

步骤S407，数据发送，将所述第一同步数据发送至第二网页；

步骤S408，数据接收，所述第二网页接收所述第一同步数据；

步骤S409，所述第二网页基于所述第一同步数据提取绘制数据；

步骤S410，在所述第二网页中，解析绘制数据；

步骤S411，在所述第二网页中，基于所述绘制指令相关的参数与素材，在预置的第二Canvas上执行所述绘制指令。

上述步骤S403中，基于所述网页元素的显示特征或显示特征发生的改变，生成绘制所述网页元素的一个或多个绘制指令，其主要目的在于生成绘制指令，而生成最终的绘制图像并非必要步骤。在本实施例的一种可选的实现方式中，通过canvas元素的getContext()方法返回一个对象，该对象提供了用于在画布上绘图的方法和属性，拥有生成绘制指令的能力，通过该对象完成步骤S403中的生成所述绘制指令操作；在本实施例的另一种可选的实施方式中，步骤S403中的生成所述绘制指令，所述绘制指令通过一个具有网页元素显示效果转换为Canvas绘制指令的功能函数库实现转换获得，所述功能函数库包含各种网页元素及显示效果的转换指令，所包含的函数针对各种类型的网页元素及其CSS样式输出对应的Canvas绘制指令；在本实施例的另一种可选的实施方式中，步骤S403中所生成的绘制指令，所述绘制指令还可以是一种绘制方法(不等于实际的Canvas绘制指令)，所述第二网页通过应用所述绘制方法实现绘制过程，且所述绘制内容不限于在第二Canvas中进行绘制，例如，在所述第一网页中包含一广告轮换部件，所述绘制方法如：绘制方法一，在Canvas中绘制广告轮换图片(相关参数为：绘制位置、绘制区域大小、广告图片的网址列表、图片轮换的时间间隔)；绘制方法二，独立创建html网页标签并置入广告轮换的相关html内容、JS代码(相关参数为：显示位置、大小、HTML代码或网址、相关CSS样式、相关JS代码)。

在一种可选的实施方式中，对应步骤S403，当应用Canvas生成多个绘制指令时，优选的，为所述绘制指令设置顺序属性，以实现步骤S411中的按照步骤绘制；为所述绘制指令设置时间属性，以实现步骤S411中的按照时间轴执行绘制。

上述步骤S403应用Canvas生成所述绘制指令过程中，一种优选的实施方式，所述Canvas基于所述网页元素在Canvas内部为其建立绘制对象，还包括对所述绘制对象的管理，管理绘制的网页元素对象，基于所述网页元素显示特征的改变而设置所述绘制对象，基于要求输出绘制对象，进一步的，可基于所述网页元素在DOM树上的关系在Canvas中建立绘制对象之间的关系，基于所述网页元素在页面中的图层(Z－index)，建立在Canvas中对应的绘制对象的图层或绘制顺序，基于所述网页元素显示特征改变的步骤设置所述绘制指令的顺序。

在一种可选的实施方式中，对应步骤S403，所述素材的记录方式还包括以文件形式、网址形式(包括将所述素材在服务器存储生成网址、使用所述素材原网址两种)记录，当以网址形式记录时，所述第二网页在基于步骤S411绘制时通过所述网址直接获取素材，由此可利用浏览器的缓存能力，降低网络传输量。

在以上实施例的一种可能的实现方式中，每次同步完成后，通过步骤S402计算并读取本次同步执行请求中显示特征发生改变的网页元素，在上一次同步完成后的Canvas绘制状态基础上，通过步骤S403中计算获得与所述网页元素显示特征发生改变相对应的绘制指令，并对应记录绘制资源信息，将所述绘制指令与所述绘制资源信息按照对应关系生成为绘制数据，并执行步骤S406生成第一同步数据，执行步骤S407将其发送至第二网页；相应地，所述第二网页根据所述绘制指令执行步骤S411，在第二Canvas当前的绘制状态下执行所述绘制指令。

该种可能的实现方式中，结合上述应用Canvas建立并管理绘制对象的实施方式，每一次同步，基于Canvas内部所管理的绘制对象的改变在步骤S403中生成对应的绘制指令。

在本实施例的一种可能的实现方式中，还包括，通过步骤S404记录生成绘制指令时网页元素的定位信息，并将所述定位信息与所述网页元素的标识信息对应存储，所述定位信息特性与功能与实施例一相同，在此不再赘述。

在本实施例的一种可能的实现方式中，还包括判断第一网页、第二网页视口的尺寸和比例是否存在差异或存在较大差异的情况，所述处理方式与实施例一基本相同，在此不再赘述。

通过本申请实施例二提供的方案，可使在第一网页执行操作后，所述第二网页接收绘制指令与绘制资源信息，在所述第二网页中的Canvas上进行绘制，达到与所述第一网页内容画面保持一致的效果。本实施例与实施例一提供方法相同之处在于，同样实现了网页显示内容的同步，为两者之间进行交流提供了安全保障，不同之处在于，本实施例通过传送绘制指令取代直接传送图像的方式，数据传输量小且充分利用了第二网页中所预置的第二Canvas的绘制功能。

实施例三，本申请的另一种实施方式，如图5所示，本申请提供一种应用Canvas实现的网页同步交流方法，应用于第一网页与第二网页之间的同步交流，所述第一网页中用于同步显示的网页元素类型为Canvas，所述第二网页仅包含一个Canvas。以下详细说明：

步骤S501，所述第一网页响应于网页同步执行请求，启动本次同步操作；

步骤S502，在所述第一网页中，获取在Canvas上的绘制操作指令，并对应记录与其相关的参数、素材为绘制资源信息；

步骤S503，在所述第一网页中，将所述绘制指令与所述绘制资源信息按照对应关系生成为绘制数据；

步骤S504，在所述第一网页中，生成第一同步数据；

步骤S505，数据发送，将所述第一同步数据发送至第二网页；

步骤S506，数据接收，所述第二网页接收所述第一同步数据；

步骤S507，在所述第二网页中，提取绘制数据；

步骤S508，在所述第二网页中，解析绘制数据；

步骤S509，在所述第二网页中，基于所述绘制指令相关的参数与素材，在预置的第二Canvas上执行所述绘制指令。

在以上实施场景中，所述第一网页、第二网页均含有一个canvas网页元素，同步的原理在于，将第一网页中包含的Canvas上的绘制指令发送至第二网页，在第二网页所含的Canvas中执行相应绘制，达到两个Canvas同步显示的效果。

实施例四，本申请的另一种实施方式，如图6所示，本申请提供一种应用Canvas实现的网页同步交流方法，应用于第一网页与第二网页之间的同步交流，本实施例在首次同步之前，首先根据网页的显示特征，执行计算分析后确定用于网页同步的方法，然后按照实施例一、实施二所提供的方法进行同步。以下详细说明：

步骤S601，所述第一网页首次响应于网页同步执行请求时，启动本次同步操作；

步骤S602，在所述第一网页中，基于网页同步执行请求，提取用于同步的网页元素，生成元素集合A；

步骤S603，基于集合A中网页元素显示特征的要素，应用预先制定的同步方法选择规则计算，根据计算结果选择按照S6031使用生成图片进行同步的方法，对应执行下述S604步骤，或者，选择S6032使用生成绘制指令进行同步的方法，对应执行下述S608步骤；

以下步骤S604～S607为使用生成图片的同步方法时，进行图片生成的步骤：

步骤S604，在所述第一网页中的第一Canvas上绘制集合A中包含的网页元素；

步骤S605，记录所绘制的网页元素在第一Canvas上的定位信息；

步骤S606，在所述第一网页中，计算获得图片与图片相对于第一Canvas的相对位置信息；

步骤S607，根据图片与步骤S606中的相对位置信息，组合生成为图片数据；

以下步骤S608～S610为使用生成绘制指令的同步方法时，进行的绘制指令生成步骤：

步骤S608，生成Canvas上绘制所述网页元素的绘制指令，并记录与其相关的参数、素材为绘制资源信息；

步骤S609，记录集合A中所含网页元素的定位信息；

步骤S610，将所述绘制指令与所述绘制资源信息按照对应关系生成为绘制数据；

步骤S611，在以上步骤S607或步骤S610基础上执行该操作，在所述第一网页中生成第一同步数据；

步骤S612，数据发送，将所述第一同步数据发送至第二网页；

步骤S613，数据接收，所述第二网页接收所述第一同步数据；

步骤S614，所述第二网页基于所述第一同步数据进行解析；

步骤S615，所述第二网页基于所述同步使用的同步方法，当判断本次同步采用生成指令的方法进行同步时(即步骤S6151)，执行步骤S618；当判断本次同步采用生成图片的方法进行同步时(即步骤S6152)，执行步骤S616；

步骤S616，在所述第二网页中解析图片数据，计算替换区域与替换内容；

步骤S617，在所述第二网页中预置的第二Canvas中根据替换区域绘制替换内容；

步骤S618，在所述第二网页中解析绘制数据；

步骤S619，在所述第二网页中，基于所述绘制指令相关的参数与素材，在预置的第二Canvas上执行所述绘制指令。

上述步骤S603中，基于集合A中网页元素显示特征的要素，应用预先制定的选择同步方法的计算函数，计算选择同步方法，所述网页元素显示特征中的要素，包括但不限于按照所述网页元素的类型、显示区域大小、是否用户交互控件中的一种或者多种；所述预先制定的选择网页同步方法的计算函数，用于根据集合A中网页元素的显示特征中的要素，执行计算获得最适合的同步方法，如：所述网页元素中存在大量的图片且用户交互控件较少，采用生成图片同步的方法具有优势。一种优选的实施方式中，所述预先制定的选择网页同步方法的计算函数内部，基于同步的要求设置所述函数中的计算规则，所述同步的要求如：网络传输数据量小优先、画质优先、同步速度优先等。

上述步骤S615中的所述方法类型，可通过在步骤S614中对第一同步数据的解析获得。可选地，在步骤S603计算选择最优的同步方法后记录所选择的方法类型，并通过所述第一同步数据发送至第二网页，在上述步骤S615中直接读取所述方法类型。

上述步骤S606中，计算获得图片与图片相对于第一Canvas的相对位置信息，如将网页内容整体生成图片，可省略计算图片相对于第一Canvas的相对位置信息步骤。

在以上步骤S609、步骤S605，以及实施例一、实施例二中，记录所述网页元素的定位信息，在达到记录条件后即可进行记录，不受严格的流程限制。

所述图6的流程为本实施例第一网页、第二网页首次建立同步时的流程示意图，一般地，后续的同步方法根据首次确立的方法进行同步。

根据以上实施例四提供的方案，首先对用于同步的网页内容进行分析，计算获得最优的同步方法，然后选择按照实施例一或实施例二提供的同步方法执行。

在以上所有实施例中，优选地，还包括根据第一网页尺寸、第一网页所在的浏览器(第一浏览器)视口尺寸、第二网页所在的浏览器(第二浏览器)视口尺寸设置Canvas尺寸，所述Canvas包括：第一网页中用于生成图片的第一Canvas、第一网页中用于生成绘制指令的Canvas、第二网页中用于呈现同步内容的第二Canvas。例如以设置Canvas的高度为例：第一网页较长，其长度大于第一浏览器视口高度，同时大于第二浏览器视口高度，如选择实施例一提供的方法进行同步时，对Canvas尺寸进行以下设置：将第一Canvas高度设定为第一网页高度，将第二Canvas高度设置为第二浏览器视口高度，并基于第一Canvas、第二Canvas的高度在所述第二Canvas中绘制纵向滚动条，同时建立滚动事件，实现在所述第二Canvas中上下滑动浏览网页的效果。

在以上所有实施例中，优选地，还包括为网页同步交流的过程建立缓存机制，所缓存的内容包括但不限于所述第二浏览器视口可显示的内容之外的部分、即将或者可能跳转到的页面、页面内可切换显示的内容、页面中隐藏的内容中的一种或多种，所缓存的内容通过异步传输，所缓存的内容形式包括图片和/或绘制指令。如以上针对第一Canvas、第二Canvas的尺寸进行设置的举例中，建立缓存存放第二Canvas中未显示部分的内容，由此，能够快速传输与渲染第二Canvas显示的部分，在其滚动条滑动时，从缓存读取未显示部分的内容可快速显示，提升用户体验效果。

在一种可能的实施方式中，上述所有实施例中的第一网页，还包括使用多个Canvas执行图像绘制或生成绘制指令的情形(即不限于使用一个第一Canvas)，所述使用多个Canvas执行图像绘制或生成绘制指令(以下简称绘制)，包括但不限于以下使用情形：将某些独立的且显示特征变化频繁的网页元素独立使用一个Canvas绘制、每个网页(对应一个网址)显示内容使用一个独立的Canvas绘制、性质相同或相似的网页元素采用一个Canvas绘制。

在一种可能的实施方式中，上述所有实施例中的第二网页，还包括使用多个Canvas呈现网页同步内容的情形(即不限于仅使用一个第二Canvas)，包括但不限于以下使用情形：将某些独立的且显示特征变化频繁的网页元素使用一个Canvas绘制、每个网页(对应一个网址)显示内容使用一个独立的Canvas绘制、性质相同或相似的网页元素采用一个Canvas绘制。

实施例五，本实施例在以上几个实施例的基础上，如图7所示，为第一网页中包含的指定类型的网页元素，建立独立的同步方法进行同步。以下详细说明：

步骤S701，在第一网页中，查找并获取集合A中指定类型的网页元素a；

步骤S702，为网页元素a选择独立的在第二网页中使用的同步方法M；

步骤S703，计算第二网页应用M方法同步，第一网页需提供的数据B；

步骤S704，将所述数据生成到第一同步数据中；

步骤S705，数据发送，将所述第一同步数据发送至第二网页；

步骤S706，数据接收，所述第二网页接收所述第一同步数据；

步骤S707，数据解析，所述第二网页解析所述第一同步数据；

步骤S708，第二网页从所述同步数据中，获取应用独立的同步方法进行同步的网页元素a以及同步方法M、同步数据B；

步骤S709，在第二网页中，为网页元素a应用M方法，基于数据B构建独立的同步；

其中，本实施例是建立在前面几个实施例的基础之上进行实施的，如所述步骤S701中的集合A，在实施例四中为步骤S602所生成的集合A。

上述步骤S701中，所述指定类型的网页元素，例如video标签、audio标签等。该类如直接使用Canvas技术中的生成图片方法、生成绘制指令方法进行同步，无法达到预期的效果。

上述步骤S702中，为指定类型的网页元素，选择独立的同步方法，如：对于网页元素video标签，方法如，在第二Canvas上方构建video标签，并从同步数据中的绘制资源信息中获取视频文件网址设置其src属性，获取播放控制参数控制其播放，由此，降低了与同步服务器之间的数据传输，另一种方法如，建立定时器不停抓取视频每帧画面在所述第二网页的第二Canvas中使用drawImage方法绘制，所述***可为第一网页或第二网页，该方法保证了所有内容均在第二Canvas内。

上述步骤S703中的数据B，根据同步方法M的需求确定，另外可以为空，如上述对网页元素video标签应用的同步方法，数据B包含的内容为视频文件网址、播放控制参数。

上述步骤S709，为根据所选择的独立同步方法，在第二网页中的实际执行同步的步骤，如上述为video标签选择的同步方法，步骤S709为，在第二网页中创建video标签，设置其src属性，根据控制参数控制播放。

在本实施例中，根据网页元素的类型和/或显示特征，为特殊网页元素选择独立的同步方法，弥补了前几个实施例中单纯应用Canvas技术进行同步的缺陷，以充分满足同步过程中的显示、用户交互、网络传输、存储等要求。

实施例六，本申请的另一种实施方式，如图8所示，本申请提供一种应用Canvas实现的网页同步交流方法，应用于同步交流过程中，由所述第二网页用户执行网页操作，进行同步控制的场景。详细说明如下：

步骤S801，所述第二网页响应于用户在第二Canvas上的操作；

步骤S802，获取用户在第二网页上的操作信息，包括操作性质、操作位置、操作数据等；

步骤S803，生成操作信息数据，将以上操作信息生成为操作信息数据；

步骤S804，将所述操作信息数据发送至第一网页；

步骤S805，所述第一网页接收所述操作信息数据；

步骤S806，在所述第一网页中，解析所述操作信息数据；

步骤S807，在所述第一网页中，根据解析结果中的操作位置数据，在预先记录的定位信息中查找，获取到用户在第二网页中操作对应的网页元素；

步骤S808，在第一网页中，根据解析结果中的操作性质、操作数据，在所获取的网页元素上执行相应的网页操作；

在本实施例中，所述第二网页包含的主要内容为第二Canvas，用户对所述第二网页的操作即为对Canvas的操作，所述第二Canvas中不包含实际的网页元素，以上步骤通过记录用户在第二Canvas中的操作信息，将其操作性质、操作位置、操作数据等信息发送至第一网页(如在第二网页中已记录了网页元素的定位信息，可直接获取到相应的网页元素)，由所述第一网页识别到用户对应操作的网页元素，在所述第一网页中代理执行所述网页操作，然后再同步至所述第二网页，体现操作的效果。其中，以上实施例也包括在实施例五中针对指定网页元素使用独立的同步方法的情形，如上例中针对canvas标签建立的同步方法，如用户在第二网页中执行视频播放暂停操作，则根据所述独立同步方法中采集操作数据的要求进行操作信息采集并发送至第一网页处理。在一些可选的实施方式中，还包括对所述对第二网页用户执行网页操作的权限的控制，所述第二网页在获取同步控制权的情况下执行本实施例提供的同步步骤。

通过以上实施例提供的方案，实现了在用户所述第二网页中进行操作，控制同步的效果，但有效的保证了第一网页的网页操作执行权限以及网页数据的安全性，同时达到了网页同步过程中的操作一致性(所有实际网页操作均唯一)。

实施例七，本申请的另一种实施方式，如图9所示，本申请提供一种应用Canvas实现的网页同步交流方法，建立在实施例六的基础之上，同时结合实施例五中为指定网页元素建立独立的同步方法的思路，为针对一些特殊的网页元素在第二网页中进行网页操作与同步控制时提供方案。详细说明如下：

步骤S901，所述第二网页响应用户在第二Canvas上的操作；

步骤S902，根据所述操作位置，在预先记录的定位信息中查找获取所操作的网页元素；

步骤S903，根据该网页元素类型判断是否应以控件形式呈现，当判断结果为以控件形式呈现时，执行步骤S905，否则执行步骤S904；

步骤S904，获取操作信息，包括操作性质、操作位置、操作数据等；

步骤S905，创建相应的网页元素控件接收用户操作，并搜集所述用户操作发生的操作数据、操作性质、操作位置数据；

步骤S906，接收步骤S904或步骤S905的输出生成操作信息数据；

后续步骤同实施例五，在此不再赘述。

其中，上述步骤S902中，在所述第二网页持有网页元素的定位信息的情况下直接查找，否则将所述定位信息发送至所述第一网页进行查找。

举例说明本实施例的应用情形，例如，在第一网页中存在textarea网页元素，该元素用于接收用户输入，如经上述实施例二同步后，通过绘制指令在第二Canvas中绘制一矩形框，并在其内部区域绘制其包含的文本，以上绘制达到了与第一网页相同的显示效果，但所述矩形区域不具有接收输入的能力，当第二网页用户点击该区域时，对应上述步骤S901，所述第二网页响应该操作，然后通过执行步骤S902获取到所述网页元素为textarea，在步骤S903中判断为应以控件形式呈现，在步骤S905中，采用控件形式建立一代理的textarea输入框，放置在所述第二Canvas下方(通过设置z－index值隐藏其显示)，当用户点击所述Canvas中的矩形区域时，通过程序控制触发textarea的focus事件，当用户输入时，则触发textarea的input事件接收输入，并搜集所输入的文本加入到操作数据中，通过步骤S906生成操作信息数据。

通过本实施例七提供的方案，在第二网页中，针对指定的网页元素建立对应的同步方法进行处理，实现在第二网页中对于指定的网页元素进行网页操作的同步效果。

在本申请实施例的一个优选的实现场景中，还包括，在第一网页、第二网页中应用Canvas实现同步涂鸦，所述涂鸦应用已有的Canvas或者建立独立的Canvas实现，可选地，所述涂鸦产生的数据加入至第一同步数据或操作信息数据发送。例如实施例一，在第一网页的最上方放置用于涂鸦的Canvas，用于接收第一网页用户的涂鸦操作以及显示来自第二网页的涂鸦数据，在第二网页内，可使用预置的第二Canvas显示来自第一网页的涂鸦数据以及接收第二网页用户的涂鸦操作。例如实施例三中，所述第一网页的网页内容本身为Canvas，在第一网页、第二网页放置内容的Canvas上直接进行涂鸦操作采集和涂鸦数据显示，通过绘制指令传递涂鸦数据，进行同步涂鸦。

在本申请实施例的一个优选的实现场景中，还包括在第一网页、第二网页中应用Canvas实现同步显示光标，以达到较好的用户体验。具体实现如：采集第一网页中的光标位置，将所述位置数据发送至第二网页，在所述第二网页中的第二Canvas中绘制该光标；采集第二网页中光标位置(采集光标相对第二Canvas的位置信息)，将所述位置数据发送至第一网页，在第一网页中，通过Canvas绘制光标或通过图片显示光标。优选地，通过隐藏***光标的方法，实习同步交流过程中双方的光标位置显示一致的效果，举例说明实现原理：

当第一网页为同步交流的控制方时，将第二网页中的***光标设置为隐藏并使用绘制光标方式显示光标，第一网页使用***光标执行操作，在第二网页中同步显示该光标；当第二网页为控制方时，在第二Canvas中跟随隐藏的***光标绘制光标(或者隐藏绘制光标，同时显示***光标)，在第一网页中隐藏***光标，基于第二网页同步光标的位置，通过Canvas绘制或者使用图片显示光标。以上例子实现了双方光标的同步效果。

在本申请实施例的一个优选的实现场景中，还包括按照时间顺序记录同步交流过程中的操作与数据，生成同步交流过程的整体记录数据，用于生成同步交流过程的回放，由于本申请所有的网页操作均实际在第一网页完成，同时所述第二网页拥有完整的操作效果，所以，记录同步交流数据选择在网页交流端的一侧进行即可，例如选择第二网页一侧，则基于其所包含的第二Canvas整体绘制过程进行记录即可，并同时记录所包含的绘制指令对应的绘制资源信息。优选地，记录网页同步交流过程数据，同时将所记录的数据通过信息摘要算法(如：MD5)产生散列值，存储该散列值用于标识本次网页同步交流，进一步用作交流的证据。所述记录的数据包括但不限于：操作时间戳、Canvas绘制指令数据、Canvas绘制指令所对应的绘制资源数据、所选择的网页同步方法、为指定网页元素独立建立的同步方法及其操作数据、第一网页用户识别信息、第二网页用户识别信息、第一网页浏览器参数、第二网页浏览器参数等。

在以上所有实施例中，类似根据A生成B，根据B生成C的描述，旨在说明C中包含或可能包含A的相关信息，实施例中的相关步骤顺序均为示例本发明的实现原理而设定，本技术领域的技术人员应充分理解本申请方法的原理，而不应因此而限制本申请。

以上所述，仅为本申请实施例的具体实施方式，但本申请实施例的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请实施例揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请实施例的保护范围之内。因此，本申请实施例的保护范围应以所述权利要求的保护范围为准。

Claims (9)

1.一种应用Canvas实现的网页同步交流方法，其特征在于，包括：

在第一网页中预先创建第一Canvas，所述第一Canvas与用于同步的网页内容相独立；

所述第一网页响应于网页同步执行请求，读取所述第一网页中用于同步显示的网页元素，基于所述网页元素的显示特征在所述第一Canvas上执行绘制，并提取所述第一Canvas内容生成图片数据，将所述图片数据生成为第一同步数据发送至第二网页；

所述第一同步数据用于所述第二网页接收，并基于其包含的所述图片数据在所述第二网页内预置的第二Canvas中执行图像绘制操作，绘制所述图片数据。

2.根据权利要求1所述的方法，其特征在于，将所述第一Canvas内容生成图片数据，包括以下任意一种生成方式：

A.根据所述第一Canvas显示的整体内容生成为图片数据；

B.根据所述第一Canvas当前内容与上一网页同步执行请求完成后的内容进行比较计算并获得差异部分，或者，根据本次同步执行请求所执行的绘制内容区域作为差异部分，将所述差异部分提取生成为一个或多个差异图片，同时对应记录每个差异图片在所述第一Canvas中的相对位置信息，将所述差异图片与所述相对位置信息组合生成为图片数据；相应地，所述第二网页解析所述图片数据，根据所述图片数据包含的所述相对位置信息计算获得替换区域，以所述图片数据包含的所述差异图片作为替换内容，在所述第二Canvas中的所述替换区域对应绘制所述替换内容。

3.根据权利要求1所述的方法，其特征在于，还包括记录网页元素基于Canvas的定位信息，并将所述定位信息与所述网页元素的标识信息对应存储；其中，所述Canvas为执行绘制的所述第一Canvas，所述定位信息包括网页元素在所述Canvas上绘制的大小、网页元素相对于所述Canvas的位置、网页元素在所述Canvas中所处的图层信息中的一种或多种，用于标识所述网页元素在第二Canvas中的显示位置。

4.根据权利要求1所述的方法，其特征在于，获取所述网页元素的显示特征的方法，包括，

当所述用于绘制的所述第一Canvas尺寸为当前第一网页显示区域尺寸时，根据所述网页元素在第一网页中的显示，计算其显示特征；

当所述用于绘制的所述第一Canvas尺寸为自定义尺寸时，读取所述自定义尺寸，根据所述自定义尺寸建立网页容器，在所述网页容器中放置当前用于同步的网页内容，由所述网页内容包含的自适应布局或响应式布局适配于所述网页容器获得显示效果，应用浏览器的渲染能力对其进行渲染，获取其中所包含的网页元素显示特征。

5.根据权利要求1所述的方法，其特征在于，在所述第二网页中，还包括：

所述第二网页响应于用户在所述第二Canvas上的操作，获取所述操作的操作信息并发送至所述第一网页；其中，所述操作信息包括操作性质、操作位置、操作数据中的一种或多种，所述操作性质包括点击、拖动、输入、滑动中的一种或多种，所述操作位置为相对于所述第二Canvas的位置；

所述第一网页接收并解析所述操作信息，根据解析结果中的操作位置在预先记录的定位信息中查找，获取到用户在所述第二网页中的操作所对应的网页元素，基于所述操作的操作性质、操作数据在该网页元素上执行相应的网页操作。

6.根据权利要求5所述的方法，其特征在于，还包括，响应于用户在所述第二Canvas上的操作，根据所述操作的操作位置，在预先记录的定位信息中查找并获取所述操作对应的网页元素，根据所述网页元素类型判断是否以控件形式呈现，当判断为以控件形式呈现时，在所述第二网页创建相应的网页元素控件，由所述控件接收用户操作并将所述操作发生的操作数据、操作性质、操作位置数据作为操作信息发送至第一网页。

7.一种应用Canvas实现的网页同步交流方法，应用于第一网页与第二网页之间的同步交流，其特征在于，所述方法包括，

所述第一网页首次响应于网页同步执行请求，读取所述第一网页中用于同步显示的网页元素，提取所述网页元素显示特征中的要素，将所述要素作为参数，执行预先制定的网页同步方法选择计算函数，根据所述函数计算结果确定本次网页同步应用的以下方法A或B生成同步数据：

A.在第一网页中预先创建的Canvas上，基于所述网页元素的显示特征在所述Canvas上执行绘制，并提取所述Canvas内容生成图片数据，将所述图片数据生成为第一同步数据发送至第二网页；

B.基于所述网页元素的显示特征，生成绘制所述网页元素的一个或多个绘制指令，并对应记录所述绘制指令相关的参数、素材作为绘制资源信息，将所述绘制指令与所述绘制资源信息按照对应关系生成为绘制数据，将所述绘制数据生成为第二同步数据发送至第二网页；

相应地，所述同步数据由所述第二网页接收后判断其执行的同步方法，当判断为按照以上A方法生成同步数据时，根据所述Canvas当前内容与上一网页同步执行请求完成后的内容进行比较计算并获得差异部分，或者，根据本次同步执行请求所执行的绘制内容区域作为差异部分，将所述差异部分提取生成为一个或多个差异图片，同时对应记录每个差异图片在所述Canvas中的相对位置信息，基于其包含的所述相对位置信息在所述第二网页内预置的第二Canvas中执行所对应的图片数据的图像绘制操作；当判断为按照以上B方法生成同步数据时，解析所述绘制数据，基于所述绘制指令相关的参数与素材，在预置的第二Canvas上执行所述绘制指令。

8.根据权利要求7所述的方法，其特征在于，应用所述方法B生成同步数据，所述方法还包括：

在上一次网页同步执行请求完成后的Canvas绘制状态基础上，根据本次同步执行请求中显示特征发生改变的网页元素，计算获得与所述网页元素显示特征发生改变相对应的绘制指令，并对应记录绘制资源信息，将所述绘制指令与所述绘制资源信息按照对应关系生成为绘制数据，并将所述绘制数据生成为第二同步数据发送至第二网页；相应地，所述第二网页根据所述绘制指令，在第二Canvas当前的绘制状态下执行所述绘制指令。

9.根据权利要求8所述的方法，其特征在于，确定应用所述方法B生成同步数据，所述方法还包括：

当所述第一网页中用于同步显示的网页元素类型为Canvas时，基于所述Canvas，将所述Canvas上发生的Canvas绘制操作记录为一个或多个绘制指令，并对应记录绘制指令相关的参数、素材作为绘制资源信息，将所述绘制指令与所述绘制资源信息按照对应关系生成为绘制数据，将所述绘制数据生成为第二同步数据发送给第二网页。