PIXI js - Pixel Data is Zero












0















I'm currently working on a little game written in JS using Pixi.js(https://github.com/pixijs). One Problem has occured currently, I'm trying to implement pixel exact collision between shapes, while I was programing a little I noticed that all the pixel RBGA values of my images are just 0.
I searched on the web but for a while but the only reason for those Problems I could find was that the canvas was tainted because of CORS(Pixel RGB values are all zero).



But this can't be the reason in my case because I created the sprites myself, I'm not loading them from other (any) domains or something like that.



Could this be a problem with the images? How do I avoid that? I will append some code that works if I use other images (some images I downloaded for tests).



const app = new PIXI.Application({width: 500, height: 500});
document.body.appendChild(app.view);
PIXI.loader.add("sprites/test.png")
.load(() => {
let img = new PIXI.Sprite(PIXI.loader.resources["sprites/test.png"].texture);
app.stage.addChild(img);
console.log(app.renderer.extract.pixels(img));
});


Edit: I tried getting the RGBA values using a short Java Program btw, same problem. Every single value is zero.










share|improve this question

























  • Have you checked that you are loading the images from the same exact domain? For example www.example.com is different than example.com.

    – Alesana
    Nov 18 '18 at 19:56













  • I don't load them from any domain if I understand your answer correctly.

    – EadH
    Nov 18 '18 at 20:21











  • any other ideas?

    – EadH
    Nov 20 '18 at 11:16
















0















I'm currently working on a little game written in JS using Pixi.js(https://github.com/pixijs). One Problem has occured currently, I'm trying to implement pixel exact collision between shapes, while I was programing a little I noticed that all the pixel RBGA values of my images are just 0.
I searched on the web but for a while but the only reason for those Problems I could find was that the canvas was tainted because of CORS(Pixel RGB values are all zero).



But this can't be the reason in my case because I created the sprites myself, I'm not loading them from other (any) domains or something like that.



Could this be a problem with the images? How do I avoid that? I will append some code that works if I use other images (some images I downloaded for tests).



const app = new PIXI.Application({width: 500, height: 500});
document.body.appendChild(app.view);
PIXI.loader.add("sprites/test.png")
.load(() => {
let img = new PIXI.Sprite(PIXI.loader.resources["sprites/test.png"].texture);
app.stage.addChild(img);
console.log(app.renderer.extract.pixels(img));
});


Edit: I tried getting the RGBA values using a short Java Program btw, same problem. Every single value is zero.










share|improve this question

























  • Have you checked that you are loading the images from the same exact domain? For example www.example.com is different than example.com.

    – Alesana
    Nov 18 '18 at 19:56













  • I don't load them from any domain if I understand your answer correctly.

    – EadH
    Nov 18 '18 at 20:21











  • any other ideas?

    – EadH
    Nov 20 '18 at 11:16














0












0








0








I'm currently working on a little game written in JS using Pixi.js(https://github.com/pixijs). One Problem has occured currently, I'm trying to implement pixel exact collision between shapes, while I was programing a little I noticed that all the pixel RBGA values of my images are just 0.
I searched on the web but for a while but the only reason for those Problems I could find was that the canvas was tainted because of CORS(Pixel RGB values are all zero).



But this can't be the reason in my case because I created the sprites myself, I'm not loading them from other (any) domains or something like that.



Could this be a problem with the images? How do I avoid that? I will append some code that works if I use other images (some images I downloaded for tests).



const app = new PIXI.Application({width: 500, height: 500});
document.body.appendChild(app.view);
PIXI.loader.add("sprites/test.png")
.load(() => {
let img = new PIXI.Sprite(PIXI.loader.resources["sprites/test.png"].texture);
app.stage.addChild(img);
console.log(app.renderer.extract.pixels(img));
});


Edit: I tried getting the RGBA values using a short Java Program btw, same problem. Every single value is zero.










share|improve this question
















I'm currently working on a little game written in JS using Pixi.js(https://github.com/pixijs). One Problem has occured currently, I'm trying to implement pixel exact collision between shapes, while I was programing a little I noticed that all the pixel RBGA values of my images are just 0.
I searched on the web but for a while but the only reason for those Problems I could find was that the canvas was tainted because of CORS(Pixel RGB values are all zero).



But this can't be the reason in my case because I created the sprites myself, I'm not loading them from other (any) domains or something like that.



Could this be a problem with the images? How do I avoid that? I will append some code that works if I use other images (some images I downloaded for tests).



const app = new PIXI.Application({width: 500, height: 500});
document.body.appendChild(app.view);
PIXI.loader.add("sprites/test.png")
.load(() => {
let img = new PIXI.Sprite(PIXI.loader.resources["sprites/test.png"].texture);
app.stage.addChild(img);
console.log(app.renderer.extract.pixels(img));
});


Edit: I tried getting the RGBA values using a short Java Program btw, same problem. Every single value is zero.







html5-canvas pixi.js






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 18 '18 at 20:21







EadH

















asked Nov 18 '18 at 19:52









EadHEadH

11




11













  • Have you checked that you are loading the images from the same exact domain? For example www.example.com is different than example.com.

    – Alesana
    Nov 18 '18 at 19:56













  • I don't load them from any domain if I understand your answer correctly.

    – EadH
    Nov 18 '18 at 20:21











  • any other ideas?

    – EadH
    Nov 20 '18 at 11:16



















  • Have you checked that you are loading the images from the same exact domain? For example www.example.com is different than example.com.

    – Alesana
    Nov 18 '18 at 19:56













  • I don't load them from any domain if I understand your answer correctly.

    – EadH
    Nov 18 '18 at 20:21











  • any other ideas?

    – EadH
    Nov 20 '18 at 11:16

















Have you checked that you are loading the images from the same exact domain? For example www.example.com is different than example.com.

– Alesana
Nov 18 '18 at 19:56







Have you checked that you are loading the images from the same exact domain? For example www.example.com is different than example.com.

– Alesana
Nov 18 '18 at 19:56















I don't load them from any domain if I understand your answer correctly.

– EadH
Nov 18 '18 at 20:21





I don't load them from any domain if I understand your answer correctly.

– EadH
Nov 18 '18 at 20:21













any other ideas?

– EadH
Nov 20 '18 at 11:16





any other ideas?

– EadH
Nov 20 '18 at 11:16












0






active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53364844%2fpixi-js-pixel-data-is-zero%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























0






active

oldest

votes








0






active

oldest

votes









active

oldest

votes






active

oldest

votes
















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53364844%2fpixi-js-pixel-data-is-zero%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







這個網誌中的熱門文章

Tangent Lines Diagram Along Smooth Curve

Yusuf al-Mu'taman ibn Hud

Zucchini