有关于cocos js加载网络图片

最新推荐文章于 2024-01-30 17:02:31 发布

原创最新推荐文章于 2024-01-30 17:02:31 发布 · 8.5k 阅读

CC 4.0 BY-SA版权

本文介绍了Cocos JS中预加载网络图片资源的必要性，以及在不同平台上的差异。同时，对比了WebGL、OpenGL和Canvas的区别，强调WebGL在HTML上下文中绘制Canvas对象的特性，为后续讨论Cocos JS如何加载网络图片奠定基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.预加载

在说加载网络图片之前，我们来先说说，cocos js的预加载，在cocos-html中在图片的一些操作之前是要先要预加载图片资源，不然有一些操作是无效的，比如通过getContensize()获取图片的大小，设置锚点等等，当然在window平台和ios、android平台是没有这个问题。

2.区别于openGL、webGL、canvas

webGL是一组用于在web页面绘制3D图形(动画)的API,继承自OpenGL® ES规范,提供了与其类似的渲染功能,区别在于webGL在html上下文中绘制.

webGL为渲染html中的Canvas对象而设计,HTML Canvas提供了一张可以用来渲染的画布,负责呈现不同的API绘制的效果.所以说canvas的api继承至webGL,真是这种特性，在html上其实webGL和canvas还是有区别的！等到到下面我将会说到这个区别！

3.cocos js加载网络图片

    loadImgFromUrl: function (target, imgUrl, p, tag) {
        if(!imgUrl)return;
        var self = target;
        var loadCb = function(err, img){
           if(err) return;
            cc.textureCache.addImage(imgUrl);
            var texture2d = new cc.Texture2D();
            texture2d.initWithElement(img);
            texture2d.handleLoadedTexture();
            var sp = new cc.Sprite();
            sp.initWithTexture(texture2d);
            self.addChild(sp);
            sp.x = p.x;
            sp.y = p.y;
            sp.tag = tag;
        };
        cc.loader.loadImg(imgUrl, {isCrossOrigin:false }, loadCb);
    },

用上面的方法理论上可以用来加载网络图片才对，但是实际上在浏览器中调试却是TexturesWebGL.js:470 Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at /pic/thumb_57b6d3d36d3b1.jpg may not be loaded.报这样的错误！我刚开始也是很纳闷，以为是什么跨域啊！等等等等，后面参考canvas和webGl的区别突然明白了，webgl不能使用网络图片的纹理加载，在cocos-html中默认是使用自动获取渲染的模式的,也就是它会优先使用webgl,正式如此，所以问题的解决方案一中是先把网络图片下载到本地然后使用，但是这个很不合实际，在cocos js里面的project.json文档里面设置

renderMode："1",

设置为canvas模式，使用就可以了！