cocosCreator中有半透明元素时生成图片或者截图的问题

2020-09-24 本文已影响0人传奇狗

使用cocosCreator制作h5活动小游戏，最终产物要求合成一张可下载的图片。
在官网就有关于添加摄像机，截图的源码：

// 此代码仅适用于 web 平台。要在 native 平台中使用这个功能，请参考 example-case 中的 capture_to_native 场景。

let node = new cc.Node();

node.parent = cc.director.getScene();

let camera = node.addComponent(cc.Camera);

// 设置你想要的截图内容的 cullingMask

camera.cullingMask = 0xffffffff;

// 新建一个 RenderTexture，并且设置 camera 的 targetTexture 为新建的 RenderTexture，这样 camera 的内容将会渲染到新建的 RenderTexture 中。

let texture = new cc.RenderTexture();

let gl = cc.game._renderContext;

// 如果截图内容中不包含 Mask 组件，可以不用传递第三个参数

texture.initWithSize(cc.visibleRect.width, cc.visibleRect.height, gl.STENCIL_INDEX8);

camera.targetTexture = texture;

// 渲染一次摄像机，即更新一次内容到 RenderTexture 中

camera.render();

// 这样我们就能从 RenderTexture 中获取到数据了

let data = texture.readPixels();

// 接下来就可以对这些数据进行操作了

let canvas = document.createElement('canvas');

let ctx = canvas.getContext('2d');

let width = canvas.width = texture.width;

let height = canvas.height = texture.height;

canvas.width = texture.width;

canvas.height = texture.height;

let rowBytes = width * 4;

for (let row = 0; row < height; row++) {

let srow = height - 1 - row;

let imageData = ctx.createImageData(width, 1);

let start = srow*width*4;

for (let i = 0; i < rowBytes; i++) {

imageData.data[i] = data[start+i];

}

ctx.putImageData(imageData, 0, row);

}

let dataURL = canvas.toDataURL("image/jpeg");

let img = document.createElement("img");

img.src = dataURL;

这上面是引用的官方源码，修修改改，let node = cc.find("Canvas/我的节点名称");这样就拿去直接用了，基本原理是使用initWithSize来获取node节点的像素信息，然后创建一个canvas来把像素信息在for循环中使用putImageData方法渲染上去，这样就出来了一个干净独立的canvas，然后使用toDataURL方法转为base64传给图片就OK可以实现长摁（或者a标签）下载了。

上面说的都是截图的基础，下面是遇到的问题。在截图过程中，选择两张图片，然后叠放在一起，生成png图片