[发明专利]一种绘制跨域图像的交互系统及方法

说明书

技术领域

本技术涉及图像处理、服务器技术，具体涉及一种绘制跨域图像的交互系统及方法。

背景技术

参见图1，现有技术中，Canvas绘图一般需要同源同域才能进行，由于W3C规范限定网页页面中的Canvas元素绘图只能由同域同源下的图像资源提供，参见图2，当页面与图像处于不同域名，不同端口时，则无法对载入了跨域图像的Canvas元素调用图像处理方法，而在互联网中，提供网页页面与提供图像资源的服务器往往不能满足大规模应用的需求，不同域不同端口的服务器随处可见，但网页页面中对Canvas绘图也同样有较多需求。

发明内容

本发明的目的在于解决现有技术中当页面与图像处于不同域名、不同端口时，无法对载入了跨域图像的Canvas元素调用图像处理方法的问题，提供一种绘制跨域图像的交互系统及方法。

本发明解决其技术问题所采用的技术方案是：

提供一种绘制跨域图像的交互系统，包括：

第一服务器；

一至多个第二服务器，一至多个所述第二服务器均与所述第一服务器连接；

客户端，连接于所述第一服务器，当所述客户端向所述第一服务器发送跨域图像请求时，所述第一服务器依据所述跨域图像请求向一至多个所述第二服务器中的一个或多个请求并获取图片资源，所述第一服务器将所述图片资源回传至所述客户端，所述客户端将所述图片资源载入至Canvas元素。

在本发明所述的交互系统中，所述客户端中的前端页面通过JavaScript代码检查URL对应的图片资源是否跨域，若是，则对所述URL进行参数转义，将进行参数转义后的URL发送至所述第一服务器。

在本发明所述的交互系统中，所述第一服务器对进行参数转义后的URL进行解析以向一至多个所述第二服务器中对应的一个或多个请求并获取所述图片资源。

在本发明所述的交互系统中，所述第一服务器对所述图片资源进行同源同域处理之后，返回至所述客户端，所述客户端的前端页面以同源同域策略将所述图片资源载入至Canvas元素。

在本发明所述的交互系统中，所述客户端将所述图片资源进行本地缓存。

另一方面，提供一种绘制跨域图像的交互方法，提供如上所述的交互系统，包括以下步骤：

S1、藉由客户端的前端页面向第一服务器发送跨域图像请求；

S2、所述第一服务器依据所述跨域图像请求向一至多个第二服务器中的一个或多个请求并获取图片资源；

S3、所述第一服务器将所述图片资源回传至所述客户端，所述客户端将所述图片资源载入至Canvas元素。

在本发明所述的交互方法中，所述步骤S1还包括：

所述客户端的前端页面通过JavaScript代码检查URL对应的图片资源是否跨域，若是，则对所述URL进行参数转义，将进行参数转义后的URL发送至所述第一服务器。

在本发明所述的交互方法中，所述步骤S2还包括：

所述第一服务器对进行参数转义后的URL进行解析以向一至多个所述第二服务器中对应的一个或多个请求并获取所述图片资源。

在本发明所述的交互方法中，所述步骤S3还包括：

所述第一服务器对所述图片资源进行同源同域处理之后，返回至所述客户端，所述客户端的前端页面以同源同域策略将所述图片资源载入至Canvas元素。

在本发明所述的交互方法中，所述步骤S3还包括：

所述客户端将所述图片资源进行本地缓存。

上述公开的一种绘制跨域图像的交互系统及方法具有以下有益效果：通过服务器处理图片转换，前端Canvas绘图可避免跨域问题；对待跨域图像资源可以像同域资源一样，可以更加灵活的处理资源。

附图说明

图1为现有技术绘制同源同域图像的示意图；

图2为现有技术绘制跨域图像失败的示意图；

图3为本发明一实施例提供的一种绘制跨域图像的交互系统的示意图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。

本发明提供了一种绘制跨域图像的交互系统及方法，其目的在于，解决HTML规范中对于Canvas绘制跨域图片行为的限制，让web客户端的图像绘制处理更加灵活方便。解决绘制不同源不同域图像资源的Canvas元素图像处理方法调用与分布式服务器之间的矛盾。