Tiny.js

画布扩展

  • 插件名：extract
  • npm：tinyjs-plugin-extract

通过 renderer 的插件 extract 对象可以获取画布相关的东东，比如：Image 对象、base64 格式的图片、像素值等等。下面我们分别介绍一下使用姿势：

首先，创建一组精灵到舞台场景中：

Tiny.Loader.add('https://a.alipayobjects.com/g/H5Promo/618-payment-promotion/1.0.4/res/images/mole_tile.json').load(function() {
  // 支地鼠
  var aliMole = new Tiny.Sprite(Tiny.TextureCache['ali_mole.png']);

  // 堵车地鼠
  var dcMole = new Tiny.Sprite(Tiny.TextureCache['dc_mole.png']);
  dcMole.setPosition(40);

  // 排队地鼠
  var pdMole = new Tiny.Sprite(Tiny.TextureCache['pd_mole.png']);
  pdMole.setPosition(80);

  var moles = new Tiny.Container();
  moles.addChild(aliMole);
  moles.addChild(dcMole);
  moles.addChild(pdMole);
  app.run(moles);
});

效果如下：

接着我们取到 extract 对象：

var extract = app.renderer.plugins.extract;

通过 pixels 方法获取像素值

var data = extract.pixels(moles);
console.log(data);
//=> Uint8Array(228480) [0, 0, 0, 0..]

通过 canvas 方法获取 Canvas Dom 对象

var canvasDom = extract.canvas(moles);
console.log(canvasDom);
//=> <canvas width="240" height="238"></canvas>

添加到 body 中看看：

document.body.appendChild(canvasDom);

效果如下：

通过 base64 方法获取 b64 格式图片

var img = extract.base64(moles);
console.log(img);
//=> data:image/png;base64,iVBORw0KGgoAAAANSUh..

通过 image 方法获取 Image 对象

var img = extract.image(moles);
console.log(img);
//=> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUh..">

添加到 body 中和上面的效果一样。

这些方法可以很方便将互动场景中的某个/组显示对象转成图片格式，很适应于截屏。

← 简单粒子 →