{html5} webgl下面跨域拉取图片的问题

来源:互联网 发布:球球代点刷棒棒源码 编辑:程序博客网 时间:2024/04/30 14:39

需要拉取微信用户头像并显示在游戏中,有两种方式:1)是使用xmlhttprequest 2)使用img.src=url。但这两种方式在webgl模式下面都不行。因为需要服务端配合设置Access-Control-Allow-Origin。而微信头像的服务器并没有设置,具体报错为:
Image from origin ‘http://wx.qlogo.cn’ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:7456’ is therefore not allowed access.
然而使用canvas绘制图片是可以的,因为webgl比canvas更严格,详情:
https://www.khronos.org/registry/webgl/specs/1.0/(搜索CORS):
WebGL necessarily imposes stronger restrictions on the use of cross-domain media than other APIs such as the 2D canvas rendering context, because shaders can be used to indirectly deduce the contents of textures which have been uploaded to the GPU.

WebGL applications may utilize images and videos that come from other domains, with the cooperation of the server hosting the media, using Cross-Origin Resource Sharing [CORS]. In order to use such media, the application needs to explicitly request permission to do so, and the server needs to explicitly grant permission. Successful CORS-enabled fetches of image and video elements from other domains cause the origin of these elements to be set to that of the containing Document [HTML].

var image = new Image();

// The onload handler should be set to a function which uploads the HTMLImageElement
// using texImage2D or texSubImage2D.
image.onload = …;

image.crossOrigin = “anonymous”;

image.src = “http://other-domain.com/image.jpg“;
现在只能用服务器转发了

0 0
原创粉丝点击