Jump to content

getImageData() equivalent.


Recommended Posts

Hi all, I am using Phaser, but I am also using standard canvas elements as well. My current objective is to render only one part of the Phaser canvas onto a new canvas element that is not associated with Phaser. 

One way I wanted to do this was to get the image data from an existing Phaser.Gameobject.Image. Is this possible and if so, how can it be done?

Link to comment
Share on other sites

  • 2 weeks later...

Hi @jake.caron

Below is is the code 


var  type = 'image/png'; 
               var encoderOptions = 0.92; 
                var gl = game.getContext('2d');
                  var canvas = document.createElement('canvas');
                  var ctx = canvas.getContext('2d');
                  var imageData;
                  var xMin = parseInt(this.getMinX(this.polygons.body.vertices));
                  var xMax = parseInt(this.getMaxX(this.polygons.body.vertices));
                  var yMin = parseInt(this.getMinY(this.polygons.body.vertices));
                  var yMax = parseInt(this.getMaxY(this.polygons.body.vertices));
                  //imageData = gl.getImageData((xMin-20), (yMin+20), (xMin-50),((yMax+30)-yMin));
                  imageData = gl.getImageData((xMin-20), (yMin+20), 300, 300);

                  var data = imageData.data;
                  ctx.putImageData(imageData, 0, 0);
                  var src = canvas.toDataURL(type, encoderOptions);
                  var image = new Image();
                  image.src = src;
                  console.log("xMax-xMin :: ", xMax-xMin)
                  console.log("((yMax+50)-yMin) :: ", ((yMax+50)-yMin))
                  if((xMax-xMin) < 150){
                    image.style.width = "150px";  
                    image.style.width = (xMax-xMin)+"px";

                  image.style.height = (yMax-yMin)+"px";
                  image.style.position = 'absolute';
                  image.style.left = '900px';
                  image.style.top = '100px';
                  image.style.paddingLeft = '2px';



You need to just update the x and y value according to your x and y value.

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.

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.


  • Recently Browsing   0 members

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