Load Image via URL

Hi,
I’m trying to load Image via url, but I find there have some problem that I have load the image.

1st Problem: Cannot resize image

var url = "http://67.media.tumblr.com/24001a34d1d67f30b7b2444236403789/tumblr_nwad34FmEw1ujnycdo1_500.png";
var ProfileBox = this.node.getChildByName('Profile');
var textureProfile = cc.textureCache.addImage(url); 
var spriteProfile = ProfileBox.getComponent(cc.Sprite);
spriteProfile.spriteFrame = new cc.SpriteFrame(textureProfile);
spriteProfile.spriteFrame.name = "profile";
ProfileBox.width = 200;
ProfileBox.height = 200;

2nd Problem: Cannot load some image (No ‘Access-Control-Allow-Origin’)

var url = "https://s-media-cache-ak0.pinimg.com/736x/ac/9d/0c/ac9d0ccebd6d427fd8fadd70018d7087.jpg";
var ProfileBox = this.node.getChildByName('Profile');
var textureProfile = cc.textureCache.addImage(url); 
var spriteProfile = ProfileBox.getComponent(cc.Sprite);
spriteProfile.spriteFrame = new cc.SpriteFrame(textureProfile);
spriteProfile.spriteFrame.name = "profile";
ProfileBox.width = 200;
ProfileBox.height = 200;

ERROR show:
Image from origin 'https://s-media-cache-ak0.pinimg.com' 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.
Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at https://s-media-cache-ak0.pinimg.com/736x/ac/9d/0c/ac9d0ccebd6d427fd8fadd70018d7087.jpg may not be loaded.

Does anyone have any other suggestion for solving these problems?

Hi,

I just solve 1st Problem, the properties should be like this. Then the image will be resize.
The 2nd Problem still haven’t solve yet. I hope anyone have any other suggestion for solving 2nd problem.

1 Like

Waiting for solution for this issue too

Hi guys,

as far as I know, the server must be CORS enabled. See the following:

https://www.w3.org/wiki/CORS_Enabled

Best regards,
Zsolt

Hi,

I did enable CORS on server side. The thing is WEBGL is more strict on cross domain security than DOM, so images showed on website but not in webgl game