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


  • Recently Browsing   0 members

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