Canvas image data

Introduction

Get image data from texture, or text object.

  • Author: Rex
  • Method only

Live demos

Usage

Sample code

Install plugin

Load minify file

  • Load plugin (minify file) in preload stage
    scene.load.plugin('rexcanvasdataplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcanvasdataplugin.min.js', true);
    
  • Add canvas-data object
    var canvasData = scene.plugins.get('rexcanvasdataplugin').canvasObjectToBitmap(gameObject);
    var canvasData = scene.plugins.get('rexcanvasdataplugin').textureTColorMap(textureKey, frameName);
    

Import plugin

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Install plugin in configuration of game
    import CanvasDataPlugin from 'phaser3-rex-plugins/plugins/canvasdata-plugin.js';
    var config = {
        // ...
        plugins: {
            global: [{
                key: 'rexCanvasData',
                plugin: CanvasDataPlugin,
                start: true
            },
            // ...
            ]
        }
        // ...
    };
    var game = new Phaser.Game(config);
    
  • Add canvas-data object
    var canvasData = scene.plugins.get('rexCanvasData').canvasObjectToBitmap(gameObject);
    var canvasData = scene.plugins.get('rexCanvasData').textureTColorMap(textureKey, frameName);
    

Import class

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Import class
    import CanvasData from 'phaser3-rex-plugins/plugins/canvasdata.js';
    
  • Add canvas-data object
    var canvasdata = CanvasData.canvasObjectToBitmap(gameObject);
    var canvasdata = CanvasData.textureTColorMap(textureKey, frameName);
    

Text/canvas object -> Bitmap

var canvasData = scene.plugins.get('rexCanvasData').canvasObjectToBitmap(gameObject);
// var out = scene.plugins.get('rexCanvasData').canvasObjectToBitmap(gameObject, out);

Texture -> Color map

  • Texture -> Color map
    var canvasData = scene.plugins.get('rexCanvasData').textureTColorMap(textureKey, frameName);
    // var out = scene.plugins.get('rexCanvasData').canvasObjectToBitmap(textureKey, frameName, out);
    
  • Texture of game object -> Color map
    var canvasData = scene.plugins.get('rexCanvasData').textureTColorMap(gameObject);
    // var out = scene.plugins.get('rexCanvasData').canvasObjectToBitmap(gameObject, out);
    
  • For each pixel data
    canvasData.forEach(function(value, x, y, canvasData){
    
    }, scope);
    
    • value : Color32 integer = color integer + (alpha << 24)
      • Get color integer (0 ~ 0xffffff)
        var color = value & 0xffffff;
        
        or
        var color = canvasData.color32ToColorInt(value);
        
      • Get alpha (0 ~ 0xff)
        var alpha = value >>> 24;
        
        var alpha = canvasData.color32TAlpha(value);
        

Canvas data

For each pixel

  • For each pixel data
    canvasData.forEach(callback, scope);
    
    • callback : Callback for each pixel
      function(value, x, y, canvasData) {
      
      }
      
  • For each non zero pixel data
    canvasData.forEachNonZero(callback, scope);
    

Get pixel data

var data = canvasData.get(x, y);
  • data :
    • true, or false in result of canvasObjectToBitmap method
    • Color32 in result of textureTColorMap method