Sign in to follow this  
jake.caron

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.