利用相机功能可以实现屏幕的截取
native版:
@ccclass
export default class QRCode extends cc.Component {_width:number = 0;_height:number = 0;camera:any = null;texture:any = null;onLoad(){this.camera=cc.find('Canvas/Camera').getComponent(cc.Camera);if (cc.sys.isBrowser)returnlet texture = new cc.RenderTexture();let gl = cc.game._renderContext;texture.initWithSize(this.aniNode.width, this.aniNode.height, gl.STENCIL_INDEX8);this.camera.targetTexture = texture;this.texture = texture;this.scheduleOnce(()=>{this.onclick()},0.5)}onclick(){if (cc.sys.isBrowser)returnlet picData = this.initImage();this.saveFile(picData);}initImage () { let data = this.texture.readPixels();this._width = this.texture.width;this._height = this.texture.height;let picData = this.filpYImage(data, this._width, this._height);return picData;}saveFile (picData) {if (CC_JSB) {let filePath = jsb.fileUtils.getWritablePath() + 'render_to_sprite_image.png';// this.testLabel.string = filePath;let success = jsb.saveImageData(picData, this._width, this._height, filePath)if (success) {cc.log("save image data success, file: " + filePath);// sdk.sharePic(filePath,this._width,this._height)}else {cc.error("save image data failed!");}}}// This is a temporary solutionfilpYImage (data, width, height) {// create the data arraylet picData = new Uint8Array(width * height * 4);let rowBytes = width * 4;for (let row = 0; row < height; row++) {let srow = height - 1 - row;let start = srow * width * 4;let reStart = row * width * 4;// save the piexls datafor (let i = 0; i < rowBytes; i++) {picData[reStart + i] = data[start + i];}}return picData;}}
web版:
// 传入画布
screenShot(camera) {if (this.div) {this.PanelNode.active = truethis.div.style.display = 'block'return}let canvas = null;//第一步------>给摄像机指定渲染目标 不直接渲染到屏幕上let texture = new cc.RenderTexture();cc.log(this.cutNode.width, this.cutNode.height)texture.initWithSize(this.cutNode.width, this.cutNode.height, cc.gfx.RB_FMT_S8);camera.targetTexture = texture;//第二步----->创建并渲染画布let width = texture.width;let height = texture.height;if (canvas == null) {//创建canvascanvas = document.createElement('canvas');canvas.width = width;canvas.height = height;} else {//清理画布上指定矩形区域内的像素canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);}//返回值 ctx 一个 CanvasRenderingContext2D 对象,使用它可以绘制到 Canvas 元素中。let ctx = canvas.getContext('2d');//手动渲染一次摄像机camera.render();//readPixels 方法 从 render texture 读取像素数据let data = texture.readPixels();//把从摄像机读取的像素 渲染到canvas画布上去let rowBytes = width * 4;for (let row = 0; row < height; row++) {let srow = height - 1 - row;let imageData = ctx.createImageData(width, 1);//创建新的空白 ImageData 对象let start = srow * width * 4;for (let i = 0; i < rowBytes; i++) {imageData.data[i] = data[start + i];}ctx.putImageData(imageData, 0, row);//将图像数据拷贝回画布上}//第三步------>把画布显示在屏幕上var body = document.body;this.div = document.createElement("div");this.div.style.display = 'block';var shareImg = document.createElement("img");shareImg.style.width = '300px';shareImg.style.height = '550px';shareImg.style.position = "absolute";shareImg.style.transform = `translate(-50%,-50%)`;shareImg.style.left = `50%`;shareImg.style.top = `54%`;//toDataURL 方法 将当前画布的内容作为图像返回let dataURL = canvas.toDataURL('image/png');shareImg.src = dataURL;this.div.appendChild(shareImg);body.insertBefore(this.div, body.lastChild);// console.log('shareImg==>', shareImg);this.PanelNode.active = true}