Cocos2d-js 3.6.1 Load image from URL

cocos2d-x JavaScript
#1

How can i load a image from url??
I try to load but it does not success. its notify: “Image from origin ‘URL’ 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://127.0.0.1:8000’ is therefore not allowed access”
plz help me.!!!

How to load image from external website into game using Javascript?
#2

The cross-origin policy may come from your browser. If you test it on browser, you may need to disabled the browser security.

For Google Chrome, please refer to this

or install this plugin

To load an image from url :

cc.textureCache.addImageAsync(imageUrl, callback, this);

But currently there is a problem which might cause the app to crash as reported here
https://github.com/cocos2d/cocos2d-js/issues/1658#issuecomment-105808171

#3

thanks Zinitter, but i can not run it. i have a list view and anh load image, then i add that image in to listview.
how can i do that? can you help me.

#4

I’m not sure about list view as i didn’t use it.

But i can show you how i use it.

// the return result is a texture2D if success
cc.textureCache.addImageAsync(imageUrl, this.imageLoaded, this); 

imageLoaded : function(texture)
{
    var sprite = new cc.Sprite(texture);
    this.addChild(sprite);
}
#5

thanks, but i have some problem, do you have skype nick. can you give me? i want to ask you some thinks about cocos2d-js, because im new coder. my skype: phamluanfit2010. plz

#6

I’m also learning how to use Cocos2d-JS and didn’t use Skype.

So i would suggest you to ask your questions in forum as there are more expert who can help and answer your questions better.

#7

my question mean:
i have several js file and resource on server, then i want to code to use that js file and resourse in any game.
do you understand me?

#8

Are you using Cocos2d-JS to develop web only game?

If your js file and resource are currently exist, why you don’t want to including them in you game?

If you want to dynamic load the file and resource, may be you can have a look on this cc.loader or Assets Manger
http://www.cocos2d-x.org/reference/html5-js/V3.6/symbols/cc.loader.html
http://cocos2d-x.org/docs/manual/framework/html5/v3/assets-manager/en

#9

hey Zinnitter, i don’t know i cann’t add that image into listview? and i want to ask you how to define a global variable? i have a mainscene (json) and a listview in that mainscene then i wanna define both of them are global variables?

#10

Does your listview is

var listView = new ccui.ListView();

You can refer to this
http://www.cocos2d-x.org/reference/html5-js/V3.5/symbols/ccui.ListView.html

For image, try this
http://www.cocos2d-x.org/reference/html5-js/V3.6/symbols/ccui.ImageView.html

Or you can try create new ccui.Widget() and add all the listview and imageview to it
new ccui.Widget();

If you are using Cocos2d-JS full version, you can create the test case project.
The sources file are in /cocos2d-js-v3.6.1/samples/js-tests

Step : create a new project in Cocos Code IDE, then in the dialog, tick copy “Create From Existing Resource”
and select all the files in that folder.

Online test case, web and native version will have different features.
http://cocos2d-x.org/js-tests/

2.Global variable

If normal global variable, you just need to declare them outside function as var global_variable = value;

If for scene
You need extend the class

 var MenuScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new MenuLayer();
        layer.init();
        this.addChild(layer);
    }
});

Then you can create the scene like var newMenuScene = new MenuScene();

For more details, please study the tutorial.
http://cocos2d-x.org/docs/tutorial/framework/html5/parkour-game-with-javascript/chapter3/en

#11

thanks to Zinnitte, code for load image isn’t run in app. can you show me other code to load image form url.
i mean i wana download a image and i use that image to load in app?

#12

To load an image from url, you can use cc.textureCache.addImageAsync.

The callback function will return the image texture if success, then you can create a sprite with the texture.

var imageUrl = http://discuss.cocos2d-x.org/images/logo-small.png;
cc.textureCache.addImageAsync(imageUrl, this.texLoaded, this);

texLoaded: function(texture) {
        if (texture instanceof cc.Texture2D) {
            cc.log("Remote texture loaded");
            
            var sprite = new cc.Sprite(texture);
            sprite.x = cc.winSize.width/2;
            sprite.y = cc.winSize.height/2;
            this.addChild(sprite);
        }
        else {
            cc.log("Fail to load remote texture");
        }
}

You may need to manual patch the fixed for cc.textureCache.addImageAsync.
https://github.com/cocos2d/cocos2d-x/pull/12132

#13

Dear all,

Is this cc.textureCache.addImageAsync working?
I got back the texture but, it didn’t have any data in it.
(Basically, width and height were zeroes)
Sprite couldn’t be created using that texture.
No error, but nothing appeared.
What went wrong?
Tested on PC and Android.

        var imageUrl = "http://graph.facebook.com/166/picture";

    cc.textureCache.addImageAsync(imageUrl, function (texture) {
        
        if (texture instanceof cc.Texture2D) {
            cc.log(texture);
            cc.log("Remote texture loaded for user_id: ");
            var sprite = new cc.Sprite(texture);
            sprite.x = cc.winSize.width / 2;
            sprite.y = cc.winSize.height / 2;
            that.addChild(sprite);
        }
        else {
            cc.log("Fail to load remote texture");
        }
    }, this);

Edit: screen shot of the return:

adf23942fca26354.PNG777×190

Thanks!

#14

This is working in browser:
Not sure it’s a right way or not… But it works…

   var imageUrl = "http://graph.facebook.com/166/picture";
    
    var that = this;
    
    cc.loader.loadImg(imageUrl, { isCrossOrigin: true }, function (err, img) {
        cc.log(img);
        var texture2d = new cc.Texture2D();
        texture2d.initWithElement(img);
        texture2d.handleLoadedTexture();
        var sprite = new cc.Sprite(texture2d);
        sprite.x = cc.winSize.width / 2;
        sprite.y = cc.winSize.height / 2;
        sprite.setScale(100 / texture2d.width);
        that.addChild(sprite);
    });
#15

@Zinitter Could you please help?

#16

@StudioAMK

Please try this code to check if it is working for your, i’m using this code to load image.

cc.textureCache.addImageAsync("http://discuss.cocos2d-x.org/images/logo-vertical.png", this.downloadCompleted, this);

downloadCompleted : function(texture)
{
	var sprite = new cc.Sprite(texture);
	this.addChild(sprite);
}

If the picture can show mean there is problems on the Facebook url which can’t return the image.

I didn’t use it with Facebook yet, but i think you can try to check the Facebook api on how to return the image properly.

#17

Thanks @Zinitter

Could you please try FB image?

I think, I was just unlucky…

  1. I tired with FB and not working. So, I changed to my server.
  2. I tried with my own image (It was HTTPS) and not working…

So, I thought I made mistake.
In fact, addImageAsync is not working with URL redirection and HTTPS, I guess.

@pandamicro Could you please check?

#18

@StudioAMK

You test in on native app or web?

It might caused by cross origin domain issue on web.

#19

@Zinitter

I’ve tested on both.

cross origin disabled on Chrome as well. :smile:

#20

@StudioAMK

I tested the code and image can download from http but not https.
So the downloader can’t handle https which caused your code to fail.

You can try have a look on the downloader at path below and i think there are problems on curl with ssl

/extensions/assets-manager/Downloader.cpp
1 Like