getImageData() equivalent.

[jake.caron]

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?

[samme]

http://labs.phaser.io/index.html?dir=snapshot/

[jake.caron]

Thank you Samme, do you know if there is a way to get just a section of the canvas or an element on the canvas?

EDIT: Figured it out using a much less elegant solution. 

[Raghvendra Singh]

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";  
                  }else{
                    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';

                 document.body.appendChild(image);

 

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