createImageBitmap example

Copy

import Box from './utils/box';

var sprites = {
  'sprite01': {
    x: 557 * 0,
    y: 0,
    w: 557,
    h: 557
  },
  'sprite02': {
    x: 557 * 1,
    y: 0,
    w: 557,
    h: 557
  },
  'sprite03': {
    x: 557 * 2,
    y: 0,
    w: 557,
    h: 557
  },
  'sprite04': {
    x: 557 * 3,
    y: 0,
    w: 557,
    h: 557
  },
  'sprite05': {
    x: 557 * 4,
    y: 0,
    w: 557,
    h: 557
  },
  'sprite06': {
    x: 557 * 5,
    y: 0,
    w: 557,
    h: 557
  },
};

var imageCanvas = document.getElementById('canvas-image');
var imageBox;

getSpritesFromCanvas('data/img/dice.png', sprites)
  .then(function (images) {
    imageBox = new Box(imageCanvas, {
      images: images,
      ratio: window.devicePixelRatio
    });
  });

function getSpritesFromCanvas(spriteSheet, sprites) {
  return new Promise(function (resolve, reject) {
    var loadedSprites = [];
    var loadedSpriteSheet = new Image();

loadedSpriteSheet.src = spriteSheet;
    loadedSpriteSheet.onload = function () {
      Object
        .keys(sprites)
        .forEach(function (name) {
          loadedSprites.push(getSprite(loadedSpriteSheet, sprites, name));
        });
      resolve(loadedSprites);
    };
    loadedSpriteSheet.onerror = function (e) {
      reject(e);
    }
  });
}

function getSprite(spriteSheet, sprites, spriteName) {
  var canvas = document.createElement('CANVAS');
  var ctx = canvas.getContext('2d');
  var sprite = sprites[spriteName];

canvas.width = sprite.w;
  canvas.height = sprite.h;
  ctx.drawImage(spriteSheet,
    sprite.x, sprite.y, sprite.w, sprite.h,
    0, 0, sprite.w, sprite.h
  );

return canvas;
}

var createImageBitmapCanvas = document.getElementById('canvas-image-bitmap');
var imageBitmapBox;

getSpritesFromImageBitmap('data/img/dice.png', sprites)
  .then(function (images) {
    imageBitmapBox = new Box(createImageBitmapCanvas, {
      images: images,
      ratio: window.devicePixelRatio,
    });
  });

function getSpritesFromImageBitmap(spriteSheet, sprites) {
  return new Promise(function (resolve, reject) {
    var bitmaps = [];
    var loadedSpriteSheet = new Image();

loadedSpriteSheet.src = spriteSheet;
    loadedSpriteSheet.onload = function () {
      Object
        .keys(sprites)
        .forEach(function (name) {
          var sprite = sprites[name];
          bitmaps.push(
            createImageBitmap(loadedSpriteSheet, sprite.x, sprite.y, sprite.w, sprite.h)
          );
        });
      Promise
        .all(bitmaps)
        .then(function (loadedBitmap) {
          resolve(loadedBitmap);
        });
    };
    loadedSpriteSheet.onerror = function (e) {
      reject(e);
    }
  });
}

window.addEventListener('resize', onWindowResize, false);

function onWindowResize() {
  var container = document.getElementById('container');
  var width = container.clientWidth;
  var height = container.clientHeight;

imageBox.resize(width, height);
  imageBitmapBox.resize(width, height);
}

<!DOCTYPE html>
<html>
  <head>
    <title>createImageBitmap example</title>
    <link rel="stylesheet" href="http://www.3daysofprogramming.com/playground/pg.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Map,Set,Promise"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.min.js"></script>
    <script src="http://www.3daysofprogramming.com/playground/examples/resources/js/stats.js"></script>
    <style>
      #container {
        position: relative;
        display: flex;
        justify-content: space-evenly;
      }

      .canvas-box {
        display: inline-block;
        background-color: #ffffff;
        padding: 10px;
      }

      .canvas-box h2 {
        border-bottom: 1px solid #d3d3d3;
        text-align: center;
      }

      #canvas-image {
        width: 300px;
        height: 300px;
      }

      #canvas-image-bitmap {
        width: 300px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div id="container" class="main">
      <div class="canvas-box">
        <h2>Image</h2>
        <canvas id="canvas-image">
        </canvas>
      </div>

      <div class="canvas-box">
        <h2>Image Bitmap</h2>
        <canvas id="canvas-image-bitmap">
        </canvas>
      </div>
    </div>
    <script>
      import Box from './utils/box';

      var sprites = {
        'sprite01': {
          x: 557 * 0,
          y: 0,
          w: 557,
          h: 557
        },
        'sprite02': {
          x: 557 * 1,
          y: 0,
          w: 557,
          h: 557
        },
        'sprite03': {
          x: 557 * 2,
          y: 0,
          w: 557,
          h: 557
        },
        'sprite04': {
          x: 557 * 3,
          y: 0,
          w: 557,
          h: 557
        },
        'sprite05': {
          x: 557 * 4,
          y: 0,
          w: 557,
          h: 557
        },
        'sprite06': {
          x: 557 * 5,
          y: 0,
          w: 557,
          h: 557
        },
      };

      var imageCanvas = document.getElementById('canvas-image');
      var imageBox;

      getSpritesFromCanvas('data/img/dice.png', sprites)
        .then(function (images) {
          imageBox = new Box(imageCanvas, {
            images: images,
            ratio: window.devicePixelRatio
          });
        });

      function getSpritesFromCanvas(spriteSheet, sprites) {
        return new Promise(function (resolve, reject) {
          var loadedSprites = [];
          var loadedSpriteSheet = new Image();

          loadedSpriteSheet.src = spriteSheet;
          loadedSpriteSheet.onload = function () {
            Object
              .keys(sprites)
              .forEach(function (name) {
                loadedSprites.push(getSprite(loadedSpriteSheet, sprites, name));
              });
            resolve(loadedSprites);
          };
          loadedSpriteSheet.onerror = function (e) {
            reject(e);
          }
        });
      }

      function getSprite(spriteSheet, sprites, spriteName) {
        var canvas = document.createElement('CANVAS');
        var ctx = canvas.getContext('2d');
        var sprite = sprites[spriteName];

        canvas.width = sprite.w;
        canvas.height = sprite.h;
        ctx.drawImage(spriteSheet,
          sprite.x, sprite.y, sprite.w, sprite.h,
          0, 0, sprite.w, sprite.h
        );

        return canvas;
      }

      var createImageBitmapCanvas = document.getElementById('canvas-image-bitmap');
      var imageBitmapBox;

      getSpritesFromImageBitmap('data/img/dice.png', sprites)
        .then(function (images) {
          imageBitmapBox = new Box(createImageBitmapCanvas, {
            images: images,
            ratio: window.devicePixelRatio,
          });
        });

      function getSpritesFromImageBitmap(spriteSheet, sprites) {
        return new Promise(function (resolve, reject) {
          var bitmaps = [];
          var loadedSpriteSheet = new Image();

          loadedSpriteSheet.src = spriteSheet;
          loadedSpriteSheet.onload = function () {
            Object
              .keys(sprites)
              .forEach(function (name) {
                var sprite = sprites[name];
                bitmaps.push(
                  createImageBitmap(loadedSpriteSheet, sprite.x, sprite.y, sprite.w, sprite.h)
                );
              });
            Promise
              .all(bitmaps)
              .then(function (loadedBitmap) {
                resolve(loadedBitmap);
              });
          };
          loadedSpriteSheet.onerror = function (e) {
            reject(e);
          }
        });
      }

      window.addEventListener('resize', onWindowResize, false);

      function onWindowResize() {
        var container = document.getElementById('container');
        var width = container.clientWidth;
        var height = container.clientHeight;

        imageBox.resize(width, height);
        imageBitmapBox.resize(width, height);
      }
    </script>
  </body>
</html>