3.3.x版本Camera截图

Creator 3.x
#1

当前引擎版本没有readPixels接口,摄像机截图有些麻烦

1.web端

截图思路

  1. 将RenderTexture的像素数据转为Base64
  2. 将Base64数据写入文件

image
image2186×3312 781 KB

注: 这里省略了文件保存的方法实现,拿到Base64格式的数据直接写入文件应该就可以了

2.Android端

截图思路

  1. 将RenderTexture的像素数据拼接为字符串格式
  2. 将字符串格式数据传输给java层
  3. java层解析字符串数据并保存到手机相册

js层

image
image2186×3052 753 KB

3.3.1版本貌似没有copyFramebufferToBuffer接口
我这里用copyTextureToBuffers代替了
如果有copyFramebufferToBuffer接口,可以使用copyRenderTexture方法里注释掉的两行

image
image2186×1600 362 KB

java层

image
image2340×5284 1.14 MB

注:

这种方式js给java传输的数据量比较大,保存图片比较慢,转成Base64格式最好
不过Android环境下canvas.getContext(‘2d’),canvas.toDataURL(‘image/jpeg’, 0.1)两个方法有问题
我这里也不知道图片像素数据如何转换成Base64格式,所以使用了拼接的方式

后续3.4.0版本好像就有readPixels接口了,另外保存文件应该可以使用jsb.fileUtils下的方法

补充: 截取单个节点

截取单个节点,需要让摄像机拍摄的部分只有目标节点的大小

image
image467×629 29.3 KB

RenderTexture大小设置为目标节点大小
OrthoHeight设置为targetTexture高度的一半

如果需要透明背景
ClearFlags设置为DONT_CLEAR
ClearColor Alpha通道设置为0
另外java保存图片时候压缩算法要选PNG

15赞
3.3.2版本renderTexture里不存在 readPixels()，并且jsb里也没有writeDatetoFile方法，该如何保存截屏图片到本地呢
creator3.3 怎样实现截取屏幕一部分保存为一张图片呢
批量保存图片
#2

感谢分享～

#4

感觉分享 !!

#5

大佬，这两个设置后，截图的依然不是透明背景

尝试过使用这个

const colorAttachment = new gfx.ColorAttachment();
colorAttachment.loadOp = gfx.LoadOp.LOAD;
colorAttachment.endLayout = gfx.TextureLayout.SHADER_READONLY_OPTIMAL;
const depthStencilAttachment = new gfx.DepthStencilAttachment();
const passInfo = new gfx.RenderPassInfo([colorAttachment], depthStencilAttachment);
texture.reset({width: 300, height: 500, passInfo: passInfo});

也有问题，endLayout 这个属性也会去掉了

#6

我截图没有用单独的layer, 截图相机向右偏移了10000, 完了把要截的节点也偏移10000,保证截图相机只能拍到想要的节点元素, 你看看是不是这个原因

#7

感谢大佬回复
通过编辑器操作，可以透明底，但是通过代码的方式不行·····
我再看看吧

#8

你可以把你的RenderTexture先直接渲染出来看一看, 我是建了一个专门的Canvas预制用来截图,提前设置好相机参数,完了把要截的节点添加到Container下

image
image1919×1000 117 KB

#9

求试试 3.4 的 RT readPixels 截图，现在全平台统一了

#10

:+1: :+1: :+1: :+1:

#11

读数据是可以了```如何保存呢?jsb.saveImageData这个方法没有了啊?

#12

/**

    * write a ValueMap into a plist file

    *

    *@param dict the ValueMap want to save (key,value)

    *@param fullPath The full path to the file you want to save a string

    *@return bool

    */

    export function writeToFile (valueMap:any):boolean;

jsb.d.ts这里的参数类型也不对吧,还少了一个参数吧```这里不知道能不能用ArrayBuffer或者Uint8Arrray?

#13

cocos creator 3.4.0spine动画插槽实现中sp.skeletonTextureon在模拟器上找不到，是不是只能在web上使用

#14

image
试试这个转base64？

#15

writeDataToFile 是 ArrayBuffer 类型的数据

#16

这个接口不能直接将图片ArrayBuffer转base64，它和canvas.toDataURL转base64是不一样的，canvas.toDataURL转换时候是有特殊处理的；使用window.btoa转base64，数据没法还原成图片

#17

readPixels读出来的数据做了翻转之后能直接用writeDataFile保存到手机里为图片格式吗？
saveImageData这个接口为什么就没了呢？

#18

二进制拼成字符串，填入btoa转换后加上base64的头（data:image/png…那段）应该可以还原图片的，不够好像不能像toDataURL设置清晰度了

#19

可以试试其他人提到的 btoa，writeDataFile 可以写入到任何格式，可以尝试转成 base64 之后存成 png 格式，也可以尝试使用引擎自带的 libpng 看看有没有方法。之所以没有 saveImageData 是因为现在的数据源是通用的 FrameBuffer，不再是以前的 canvas 了，完全跨平台，不局限于 web 端。

#20

看到大神们侃侃而谈，瞬间感觉格格不入，我折腾一下午，嫩是没把图片存到本地，有哪位大神指导下，不甚感激

#21

我这边发布微信小程序，用上面的方法，copyRenderTexture获取到的arrayBuffer全是0，没得数据呢

1赞