如何在cocos creator web项目中使用跨域图片
2017-09-02 09:42
417 查看
我们知道,在使用cocos creator做web项目的时候,经常要用到外部图片,举个例子:微信头像。当web项目在浏览器中运行的时候,用普通的http请求微信头像的方法会提示跨域,无法获取到图片。
解决跨域的方法也看了很多,全都是需要服务器配合才能完成的操作,我们无法操作微信的服务器,所以只能想其他办法解决。
过程:
1、客户端请求该转发服务器,并把要获取的资源链接当参数传过去;
2、转发服务器收到请求之后解析一下参数, 把资源链接提取出来,直接请求资源链接;
3、资源链接返回的数据给转发服务器;
4、转发服务器把收到的资源数据原封不动返回给客户端。
逻辑过程已经很明白了,具体的实现过程有很多方法,这里就不举例了。
以上就是cocos creator使用跨域图片的全部过程。如果有什么疑问,可以在下方留言。
解决跨域的方法也看了很多,全都是需要服务器配合才能完成的操作,我们无法操作微信的服务器,所以只能想其他办法解决。
1:搭建一个可以转发http的服务器
要注意:这个服务器要可以被跨域访问,设置一下header就行,如何设置,自行探索。过程:
1、客户端请求该转发服务器,并把要获取的资源链接当参数传过去;
2、转发服务器收到请求之后解析一下参数, 把资源链接提取出来,直接请求资源链接;
3、资源链接返回的数据给转发服务器;
4、转发服务器把收到的资源数据原封不动返回给客户端。
逻辑过程已经很明白了,具体的实现过程有很多方法,这里就不举例了。
2:获取图片数据并生成图片
客户端js代码//这是http转发请求封装的方法 httpRequest = function (params) { cc.log('发送请求', params.url); var urlStr = 'http://192.168.31.22/httpGet?url=' + params.url; var methodStr = params.method || 'GET'; var async = false; if (!!params.async) { async = true; } var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && (xhr.status >= 200 && xhr.status < 400)) { if (!!params.callback) { cc.log('收到数据', xhr); params.callback(xhr); } } }; if (!!params.responseType) { xhr.responseType = params.responseType; } xhr.open(methodStr, urlStr, async); xhr.send(); }; //base64 var Base64 = { _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", // public method for encoding encode: function encode(input) { var output = ""; var chr1, chr2, chr3, enc1, enc2, enc3, enc4; var i = 0; while (i < input.length) { chr1 = input[i++]; chr2 = input[i++]; chr3 = input[i++]; enc1 = chr1 >> 2; enc2 = (chr1 & 3) << 4 | chr2 >> 4; enc3 = (chr2 & 15) << 2 | chr3 >> 6; enc4 = chr3 & 63; if (isNaN(chr2)) { enc3 = enc4 = 64; } else if (isNaN(chr3)) { enc4 = 64; } output = output + Base64._keyStr.charAt(enc1) + Base64._keyStr.charAt(enc2) + Base64._keyStr.charAt(enc3) + Base64._keyStr.charAt(enc4); } return output; } }; httpRequest({ url: imgUrl, async: true, responseType: 'arraybuffer', callback: function (data) { //把请求回来的数据解析成图片的过程,图片的使用一定要在onload之后,如果不在onload之后,可能图片数据还没有解析出来,下面的代码就调用了,会报错。 var blob = new Uint8Array(data.response); var img = new Image(); img.src = "data:image/png;base64," + Base64.encode(blob); img.onload = function () { var texture = new cc.Texture2D(); texture.generateMipmaps = false; texture.initWithElement(img); texture.handleLoadedTexture(); target.spriteFrame = new cc.SpriteFrame(texture); } }.bind(this) });
以上就是cocos creator使用跨域图片的全部过程。如果有什么疑问,可以在下方留言。
相关文章推荐
- 如何在web项目中使用jfreechart和显示硬盘上指定路径上的图片
- VS2010如何在一个web项目中使用APP_CODE下的自定义类
- 如何删除xcode项目中不再使用的图片资源
- 如何在Web项目中使用Makefile
- 如何删除xcode项目中不再使用的图片资源
- Dynamic Web TWAIN使用教程:如何从Firefox扫描图片
- 如何删除xcode项目中不再使用的图片资源
- 如何删除xcode项目中不再使用的图片资源
- 关于如何使用eclipse创建web项目——整个流程的概述
- Intellij IDEA如何使用Maven Tomcat Plugin运行web项目
- 如何使用Eclipse上传一个Java web项目到Git@OSC上
- 在web项目中如何使用rdlc报表
- 如何删除xcode项目中不再使用的图片资源
- IDEA 如何使用JRebel 部署web项目
- 如何在使用eclipse的情况下,清理android项目中的冗余class文件和资源文件以及冗余图片
- 编写GO的WEB开发框架 (十五): 目录结构及如何使用ecgo开发项目
- Eclipse使用技巧:web项目构建时如何不删除WEB-INF/classes下的文件
- 如何使用Maven创建Web项目
- JAVA_WEB项目之三大框架中不使用HibernateTemplate而使用SessionFactory以及如何使用注解
- 如何删除xcode项目中不再使用的图片资源