一种绘制跨域图像的交互系统及方法技术方案

本发明专利技术公开了一种绘制跨域图像的交互系统及方法，该系统包括：第一服务器；一至多个第二服务器，一至多个所述第二服务器均与所述第一服务器连接；客户端，连接于所述第一服务器，当所述客户端向所述第一服务器发送跨域图像请求时，所述第一服务器依据所述跨域图像请求向一至多个所述第二服务器中的一个或多个请求并获取图片资源，所述第一服务器将所述图片资源回传至所述客户端，所述客户端将所述图片资源载入至Canvas元素。该发明专利技术的有益效果为：通过服务器处理图片转换，前端Canvas绘图可避免跨域问题；对待跨域图像资源可以像同域资源一样，可以更加灵活的处理资源。

【技术实现步骤摘要】
一种绘制跨域图像的交互系统及方法
本技术涉及图像处理、服务器技术，具体涉及一种绘制跨域图像的交互系统及方法。
技术介绍
参见图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元素图像处理方法调用与分布式服务器之间的矛盾。参见图3，图3为本专利技术一实施例提供的一种绘制跨域图像的交互系统的示意图，该绘制跨域图像的交互系统包括第一服务器、一至多个第二服务器及客户端，一至多个所述第二服务器均与所述第一服务器连接。客户端连接于所述第一服务器。第一服务器优选为图3中的siteA，第二服务器优选为图3中的siteB。当所述客户端向所述第一服务器发送跨域图像请求时，所述第一服务器依据所述跨域图像请求向一至多个所述第二服务器中的一个或多个请求并获取图片资源，所述第一服务器将所述图片资源回传至所述客户端，所述客户端将所述图片资源载入至Canvas元素。优选的，所述客户端中的前端页面通过JavaScript代码检查URL对应的图片资源是否跨域，若是，则对所述URL进行参数转义，将进行参数转义后的URL发送至所述第一服务器。即图像处理可以由服务端移至客户端，不仅降低的服务器数据处理的压力，客户端图像处理不仅降低了数据传输造成的响应时间，并且客户端对图像修改更加多样化，个性化更强，提高用户体验。优选的，所述第一服务器对进行参数转义后的URL进行解析以向一至多个所述第二服务器中对应的一个或多个请求并获取所述图片资源。例如：siteA向客户端提供http://siteA，同时向siteB请求图片资源。在本专利技术所述的交互系统中，所述第一服务器对所述图片资源进行同源同域处理之后，返回至所述客户端，所述客户端的前端页面以同源同域策略将所述图片资源载入至Canvas元素。siteB的图片资源经过siteA处理之后，前端页面通过http://siteA？image＝siteB/image获取siteB的图片资源。此时便可以对Canvas元素图像信息进行任意处理，不会触发浏览器跨域规则限制。所述客户端将所述图片资源进行本地缓存。即前端可以将获取到的图片数据进行本地缓存，提高下次访问速度，减少请求。另一方面，本专利技术还提供一种绘制跨域图像的交互方法，提供如上所述的交互系统，包括以下步骤S1-S3：S1、藉由客户端的前端页面向第一服务器发送跨域图像请求；所述步骤S1还包括：所述客户端的前端页面通过JavaScript代码检查URL对应的图片资源是否跨域，若是，则对所述URL进行参数转义，将进行参数转义后的URL发送至所述第一服务器。即图像处理可以由服务端移至客户端，不仅降低的服务器数据处理的压力，客户端图像处理不仅降低了数据传输造成的响应时间，并且客户端对图像修改更加多样化，个性化更强，提高用户体验。S2、所述第一服务器依据所述跨域图像请求向一至多个第二服务器中的一个或多个请求并获取图片资源；所述步骤S2还包括：所述第一服务器对进行参数转义后的URL进行解析以向一至多个所述第二服务器中对应的一个或多个请求并获取所述图片资源。例如：siteA向客户端提供http://siteA，同时向siteB请求图片资源。S3、所述第一服务器将所述图片资源回传至所述客户端，所述客户端将所述图片资源载入至Canvas元素。所述步骤S3还包括：所述第一服务器对所述图片资源进行同源同域处理之后，返回至所述客户端，所述客户端的前本文档来自技高网...

【技术保护点】
一种绘制跨域图像的交互系统，其特征在于，包括：第一服务器；一至多个第二服务器，一至多个所述第二服务器均与所述第一服务器连接；客户端，连接于所述第一服务器，当所述客户端向所述第一服务器发送跨域图像请求时，所述第一服务器依据所述跨域图像请求向一至多个所述第二服务器中的一个或多个请求并获取图片资源，所述第一服务器将所述图片资源回传至所述客户端，所述客户端将所述图片资源载入至Canvas元素。

【技术特征摘要】
1.一种绘制跨域图像的交互系统，其特征在于，包括：第一服务器；一至多个第二服务器，一至多个所述第二服务器均与所述第一服务器连接；客户端，连接于所述第一服务器，当所述客户端向所述第一服务器发送跨域图像请求时，所述第一服务器依据所述跨域图像请求向一至多个所述第二服务器中的一个或多个请求并获取图片资源，所述第一服务器将所述图片资源回传至所述客户端，所述客户端将所述图片资源载入至Canvas元素。2.根据权利要求1所述的交互系统，其特征在于，所述客户端中的前端页面通过JavaScript代码检查URL对应的图片资源是否跨域，若是，则对所述URL进行参数转义，将进行参数转义后的URL发送至所述第一服务器。3.根据权利要求2所述的交互系统，其特征在于，所述第一服务器对进行参数转义后的URL进行解析以向一至多个所述第二服务器中对应的一个或多个请求并获取所述图片资源。4.根据权利要求3所述的交互系统，其特征在于，所述第一服务器对所述图片资源进行同源同域处理之后，返回至所述客户端，所述客户端的前端页面以同源同域策略将所述图片资源载入至Canvas元素。5.根据权利要求1-4任一项所述的交互系统，其特征在于，所述客户端将所述图片资源进行本地缓存。6.一种绘制跨...

【专利技术属性】
技术研发人员：张晓民，王智翔，
申请(专利权)人：广州帕克西软件开发有限公司，
类型：发明
国别省市：广东,44