cocos creator 实现截屏截图切割转成 base64分享--facebook小游戏截图base64分享,微信小游戏截图分享【白玉无冰】每天进步一点点

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码。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0YezkXul-1569718663881)(/img/in-post/2019-08-30-ccc-clip.jpeg)]
假设我们要截取整个屏幕最中间的部分。x的长度刚好是width的0.25倍，y是height的0.25倍，w是width的0.5倍，h是height的0.5倍。
接着用Canvas 2D API中的 CanvasRenderingContext2D.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 在Canvas上绘制图像。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VBYlhXoN-1569718663883)(/img/in-post/2019-08-30-Canvas-drawimage.jpg)]

示例代码:

    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.toTempFilePathSync和wx.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

---

关注【白玉无冰】获取最新更新，每日成长一点点