步骤
使用Cocos creator(JavaScript)截屏
方法
base64数据 转 图片
base64ToSpriteFrame(base64, callback) {
var img = new Image();
img.src = base64;
img.onload = function () {
var texture = new cc.Texture2D();
texture.initWithElement(img);
texture.handleLoadedTexture();
var newframe = new cc.SpriteFrame(texture);
if (callback) callback(newframe);
}
},
切图
解释: 由于目前Creator截图只能截全屏,截部分节点区域会出现bug。 如果想显示部分区域的话,通过设定截取的rect,进行任意切割。这里使用截图来实现,截取部分节点的功能.
cutPicture(data,rect){
let frame;
if(data instanceof cc.SpriteFrame) {
frame=data;
}else if(data instanceof cc.Texture2D) {
frame = new cc.SpriteFrame(texture);
}
if(!frame) {
return null;
}
//设置显示区域 ,注意使用cc.Rect()会得到undefinde
frame.setRect(rect);
return frame;
}
加载图片
加载图片的方式有很多种,这里提供一种方法.
loadImg(fullPath, callback) {
//延时就因为,texture.begin()是到是下一帧才截图完成
this.scheduleOnce(() => {
cc.loader.load(fullPath, (err, tex) => {
let spriteFrame = new cc.SpriteFrame(tex, cc.Rect(0, 0, tex.width, tex.height));
if (callback) callback(spriteFrame);
});
}, 0.01);
}
原生截图 适用于win android ios, creator 1.x
注意: EditBox,VideoPlayer,Webview 等控件无法被包含在截图里面.因为这是 OpenGL 的渲染到纹理的功能,上面提到的控件不是由引擎绘制的
screenshotNative(fileName = 'result_share.png', isMaskExist = false, targetNode = null, callback) {
var size = cc.director.getWinSize();
var fullPath = jsb.fileUtils.getWritablePath() + fileName;
cc.log('完整路径:', fullPath);
// 如果已存在则删除路径
if (jsb.fileUtils.isFileExist(fullPath)) {
cc.log('完整路径 : ', fullPath);
jsb.fileUtils.removeFile(fullPath);
}
// 普通方式:更加省内存. 如果包含mask组件需使用第二种方式,否则将截图白屏
var texture = new cc.RenderTexture(Math.floor(size.width), Math.floor(size.height));
// 若截图的场景中包含mask组件,需要使用下面方式
if (isMaskExist === true) {
//颜色深度 RGBA4444和RGBA8888,RGBA4444比RGBA8888的图像质量会差一些
//如果要图片高质量 可以使用cc.Texture2D.PIXEL_FORMAT_RGBA8888.
cc.log('true')
texture = new cc.RenderTexture(Math.floor(size.width), Math.floor(size.height), cc.Texture2D.PIXEL_FORMAT_RGBA4444, gl.DEPTH24_STENCIL8_OES);
}
texture.setPosition(cc.p(size.width / 2, size.height / 2));
texture.begin();
// 如果对某一个节点截图,使用: a.node._sgNode.visit()
if(targetNode != null)
{
targetNode._sgNode.visit();
// 将texture 添加到场景中去,否则截屏的时候,场景中的元素会移动.
targetNode._sgNode.addChild(texture);
// 将texture 设置为不可见,可以避免截图成功后,移除 将texture 造成的闪烁.
texture.setVisible(false);
}else{
cc.director.getRunningScene().visit();
}
texture.end();
//1.4 之前,使用cc.IMAGE_FORMAT_JPG; 1.4 之后,使用cc.IMAGE_FORMAT_PNG
texture.saveToFile(fileName, cc.IMAGE_FORMAT_PNG);
this.loadImg(fullPath, callback);
// 显示到界面
// 注意不要这样赋值spriteFrame : this.sprite.spriteFrame = renderTexture.getSprite().getSpriteFrame();
// let texture2d = texture.getSprite().getSpriteFrame().getTexture();
// this.sprite.spriteFrame.setTexture(texture2d);
}
浏览器截图
注意: 适用于 WebGL、Canvas环境
screenshotWebGL(callback) {
cc.director.on(cc.Director.EVENT_AFTER_DRAW, () => {
// 获取画布元素
var canvas = document.getElementById("GameCanvas");
// 图片转换为(base64)dataURL
var base64 = canvas.toDataURL("imagea/png");
// 取消渲染注册
cc.director.off(cc.Director.EVENT_AFTER_DRAW);
var frame = this.base64ToSpriteFrame(base64, (frame) => {
if (callback) callback(frame);
});
});
}
浏览器 Canvas环境 截图
注意: 只适用Canvas环境
screenshotCanvas(callback) {
var canvas = document.getElementById("GameCanvas");
var base64 = canvas.toDataURL("imagea/png");
var frame = this.base64ToSpriteFrame(base64, (frame) => {
if (callback) callback(frame);
});
}
使用
原生平台截取节点sprite
if (cc.sys.isNative ) {
var targetNode = this.targetSprite.node;
this.screenshot.screenshotNative('node_native.png', false,targetNode, frame => {
// 截取有效部分
var size = cc.director.getWinSize();
var targetNodeSize = cc.size(targetNode.width, targetNode.height);
let spriteFrame=this.screenshot.cutPicture(frame,cc.rect((size.width - targetNodeSize.width)/2,(size.height - targetNodeSize.height)/2 ,targetNodeSize.width,targetNodeSize.height));
this.shot.spriteFrame = spriteFrame;
});
} else {
this.label.string ='is not Native';
}
原生平台截屏
if (cc.sys.isNative ) {
this.screenshot.screenshotNative('native.png', false, null, frame => {
this.shot.spriteFrame = frame;
});
} else {
this.label.string = 'is not Native';
}
浏览器截屏
if (cc.sys.isBrowser) {
this.screenshot.screenshotWebGL(frame => {
this.shot.spriteFrame = frame;
});
}else {
this.label.string = 'is not Browser';
}
浏览器Canvas环境截屏
if(cc.sys.isBrowser) {
this.screenshot.screenshotCanvas(frame => {
this.shot.spriteFrame = frame;
});
}else {
this.label.string = 'is not Browser';
}
码云链接:https://gitee.com/ls_qq2670813470/Screenshot.
原文链接:https://blog.csdn.net/qq_14965517/article/details/104360417.