【cocos creator】【TS】指定节点截屏,图片保存到本地
创始人
2024-11-14 17:07:53
0
 const { ccclass, property } = cc._decorator;  @ccclass export default class ScreenshotCtrl extends cc.Component {       @property(cc.Node)     ScreenshotNode: cc.Node = null;      onScreenshot() {         this.captureScreen(this.node)     }       public getCameraTexture(node: cc.Node): cc.RenderTexture {         let camera = node.addComponent(cc.Camera);         // 设置你想要的截图内容的 cullingMask         camera.cullingMask = 0xffffffff;         camera.clearFlags = cc.Camera.ClearFlags.STENCIL | cc.Camera.ClearFlags.DEPTH;         camera.depth = 0;         camera.rect = cc.rect(0, 0, 1, 1);         camera.zoomRatio = Math.min(cc.winSize.height / node.height, cc.winSize.width / node.width)          // 新建一个 RenderTexture,并且设置 camera 的 targetTexture 为新建的 RenderTexture,这样 camera 的内容将会渲染到新建的 RenderTexture 中。         let texture = new cc.RenderTexture();         texture.initWithSize(node.width, node.height);         camera.targetTexture = texture;         camera.render(node);         //移除相机组件并且销毁相机         node.removeComponent(camera);         camera.destroy();         return texture;     }     /**          * 截屏          * @param {*摄像机 cc.Camera类型} camera           */     screenShot(node) {         const texture: cc.RenderTexture = this.getCameraTexture(node)         let canvas = null;         //第一步------>给摄像机指定渲染目标 不直接渲染到屏幕上         //第二步----->创建并渲染画布         let width = texture.width;         let height = texture.height;         if (canvas == null) {             //创建canvas             canvas = 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');         //readPixels 方法 从 render texture 读取像素数据         let data = texture.readPixels();         //把从摄像机读取的像素 渲染到canvas画布上去         let rowBytes = width * 4;         for (let row = 0; row < height; row++) {             let srow = 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, height - row - 1);//将图像数据拷贝回画布上         }          let a = document.createElement("a");         a.download = "test1.png";         a.href = canvas.toDataURL("image/png");         a.click();     }      /**         * @description 截图         * @param screenshotNode 截图节点         * @returns 存放截图的本地路径         * 注意1.全屏截图需要添加自适应组件         *  2.带透明的需要存储png格式(会出现亮斑)         *  3需要占用内存少,不被透明度营销就存储为.jpg格式         */     public captureScreen(screenshotNode: cc.Node): Promise {         return new Promise((resolve, reject) => {             const renderTexture = this.getCameraTexture(screenshotNode)             const imgData = renderTexture.readPixels()             if (CC_JSB) {   //CC_JBS标志是原生平台                 const shareImgRootPath = `${jsb.fileUtils.getWritablePath()}ShareImg/`                 const imgFilePath = shareImgRootPath + "_shareImg.jpg"                 console.log(`imgFilePath:`, imgFilePath);                 //@ts-ignore                 const success = jsb.saveImageData(imgData, screenshotNode.width, screenshotNode.height, imgFilePath)                 //文件写成功之后,返回图片存储的路径                 if (success) {                     resolve(imgFilePath)                 }                 else {                     console.log(`save imgData failed! path:`, imgFilePath);                     reject(null)                 }             }             else {                 this.screenShot(this.ScreenshotNode)             }         })     }  }  

相关内容

热门资讯

5分钟规律!大亨互娱辅助,小闲... 5分钟规律!大亨互娱辅助,小闲昭通棋牌有挂吗(其实一直都是有挂);1)小闲昭通棋牌有挂吗辅助挂:进一...
实测分享!奥云长岭麻将有挂吗,... 实测分享!奥云长岭麻将有挂吗,宝宝浙江游戏辅助有人在用吗,雀神微信小程序辅助器下载ios(详细教程)...
八分钟辅助挂!星星武汉麻将有老... 八分钟辅助挂!星星武汉麻将有老千吗,上海哈灵的确是有挂的,线上教程(有挂脚本)1、星星武汉麻将有老千...
实测发现!wpk数据分析,逗娱... 实测发现!wpk数据分析,逗娱碰胡外 挂,2025教程(有挂介绍)1.逗娱碰胡外 挂 ai辅助创建新...
两分钟攻略!老友圈手机麻将输赢... 两分钟攻略!老友圈手机麻将输赢规律,哈哈贵阳捉鸡手机麻将有挂吗(原来真的有挂)1、起透看视 哈哈贵阳...
推荐一款!途乐竞技有挂吗,桂林... 推荐一款!途乐竞技有挂吗,桂林字牌十打九赢的方法,广东雀神麻雀辅助软件(详细教程)1、途乐竞技有挂吗...
推荐一款!!微扑克可以用模拟器... 推荐一款!!微扑克可以用模拟器,白金岛自创房有外 挂怎么破,微扑克教程(有挂规律)1、白金岛自创房有...
六分钟辅助挂!蜀山四川麻将输赢... 六分钟辅助挂!蜀山四川麻将输赢规律技巧,欢乐龙城3欢乐斗牛都是真的有挂,必赢方法(有挂辅助)暗藏猫腻...
3分钟技巧!邳州友友麻将有假吗... 3分钟技巧!邳州友友麻将有假吗,微信闽南漳浦麻将有挂吗(其实总是有挂)该软件可以轻松地帮助玩家将微信...
专业讨论!!wpk微扑克最新辅... 专业讨论!!wpk微扑克最新辅助,悠闲麻将川南版有假吗,可靠技巧(有挂工具)1、超多福利:超高返利,...