cocos creator 按需截屏转成 base64

Posted by lamyoung on August 30, 2019

facebook小游戏分享的时候要传图片的base64码这个参数,有时需求是要截屏分享,让我们一起探索如何截屏吧。

何时截屏

我们要在游戏渲染完一次后截屏,cocos creator 提供了cc.Director.EVENT_AFTER_DRAW事件,这个事件是在渲染过程之后所触发的事件。由于我们只要触发一次截屏,只需要监听一次事件。

cc.director.once(cc.Director.EVENT_AFTER_DRAW, () => {
    //此处开始执行截屏
});

获取游戏canvas

游戏的画布可以通过cc.game.canvas获取,再调用canvas.toDataURL("image/png")就可以获取整个游戏屏幕的base64码了。

    const canvas = cc.game.canvas;
    const base64 = canvas.toDataURL("image/png");

截取所需区域

有时我们不需要整个屏幕的,而是要截取其中的一部分。这时我们可以通过创建新的const new_canvas = document.createElement('canvas'),把旧的canvas的图切一部分放在新的new_canvas上,再调用new_canvas.toDataURL("image/png"),获取新的base64码。
假设我们要截取整个屏幕最中间的部分。x的长度刚好是width的0.25倍,yheight的0.25倍,wwidth的0.5倍,hheight的0.5倍。
接着用Canvas 2D API中的 CanvasRenderingContext2D.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 在Canvas上绘制图像。

示例代码:

    const canvas = cc.game.canvas;
    const width = canvas.width;
    const height = canvas.height;

    // 新截图占原图的比例
    const rect = {x:0.25, y:0.25, w:0.5, h:0.5};

    const w = width * rect.w;
    const h = height * rect.h;
    const x = width * rect.x;
    const y = height * rect.y;

    const new_canvas = document.createElement('canvas');
    const new_canvas_ctx = new_canvas.getContext('2d');
    new_canvas.width = w;
    new_canvas.height = h;
    new_canvas_ctx.drawImage(canvas, x, y, w, h, 0, 0, w, h);
    const base64 = canvas.toDataURL("image/png");

微信小游戏的截图分享

cocos creator 发布微信项目的获取游戏canvas是基于wx.createCanvas()创建的,而且绑定在全局变量canvas上,微信的截取所需区域分享可以用canvas.toTempFilePathSyncwx.shareAppMessage
示例代码:

const canvas = canvas || cc.game.canvas;
const width = canvas.width;
const height = canvas.height;
const rect = {x:0.25, y:0.25, w:0.5, h:0.5};

const w = width * rect.w;
const h = height * rect.h;
const x = width * rect.x;
const y = height * rect.y;
let tempFilePath = canvas.toTempFilePathSync({
  x: x,
  y: y,
  width: w,
  height: h,
  destWidth: w,
  destHeight: h
})
wx.shareAppMessage({
  imageUrl: tempFilePath
})

cocos creator v2.0.8