Jump to content

Canvas As Image


sugondo
 Share

Recommended Posts

Dear Sir/Madam,

 

I have a question for phaser usage, from what i see from the example you give. The library function is for make game from image. but there is some function that didn't included in this library like change color of image.

 

I just wondering if there is some method to read canvas as image.

 

Thanks for the attention

 

Link to comment
Share on other sites

There are no commands to change the colour of images at the moment, sorry. If making a canvas game you could update the data stored in game.canvas (or game.context) though. Or create a RenderTexture (which is like a dynamic canvas object that sprites can use as a texture) and modify the data of that. I don't have any examples right now though.

Link to comment
Share on other sites

if it is like that, at least can i use saved canvas that i used to change color as source to render it on phaser?

 

like if i say i used i have canvas named canvas1 and  i make context

 

context = canvas1.getContext('2d');

 

I have change picture color on that context via putImageData of normal html5 code.

 

I am about using the context instead of image. is it possible?

 

Thanks for the respond.

 

 

Link to comment
Share on other sites

Or did you just want to turn that canvas into an image?
Like this for smallish images....

 

var canvas = document.getElementById("canvas");
var url = canvas.toDataURL();

var newImg = document.createElement("img");
newImg.src = url;

 

 

or if the image is big, do this.....

 

 

var canvas = document.getElementById("canvas");
canvas.toBlob(function(blob) {
var newImg = document.createElement("img"),
url = URL.createObjectURL(blob);
newImg.onload = function() {
// no longer need to read the blob so it's revoked
URL.revokeObjectURL(url);
};
newImg.src = url;
document.body.appendChild(newImg);
});

 

The reason youd do it different for big images is that if you try to use too big a dataurl in src it will crash....well thats been my experience in Chrome anyways.

Both those code examples came from.....

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...