分享一个cocoscreator 2.x web截屏组件

const { ccclass, property, executionOrder } = cc._decorator;
/**

  • 截图组件
    */
    @ccclass
    export default class CaptureWeb extends cc.Component {

    onLoad(){
    }

    onEnable(){
    this.captureAndLongPress();
    }

    onDisable(){
    this.removeLongPress();
    }

    //截图
    capture () {
    let texture = new cc.RenderTexture();
    texture.initWithSize(this.node.width, this.node.height);

     let width = this.node.width;
     let height = this.node.height;
    
     let camera =  this.node.addComponent(cc.Camera);
     camera.targetTexture = texture;
     let canvas = document.createElement('canvas');
     let ctx = canvas.getContext('2d');
     canvas.width = width;
     canvas.height = height;
     camera.render(this.node);
     let data = texture.readPixels();
     this.node.removeComponent(camera)
     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);
     }
    
     var dataURL = canvas.toDataURL("image/jpeg");
     var img = document.createElement("img");
     img.src = dataURL;
     return img;
    

    }

    //test 主要做测试
    captureAndShow () {
    var img = this.capture();
    let texture = new cc.Texture2D();
    texture.initWithElement(img);
    let spriteFrame = new cc.SpriteFrame();
    spriteFrame.setTexture(texture);
    let node = new cc.Node();
    let sprite = node.addComponent(cc.Sprite);
    sprite.spriteFrame = spriteFrame;
    node.zIndex = cc.macro.MAX_ZINDEX;
    cc.director.getScene().addChild(node)
    node.x = cc.view.getVisibleSize().width/2;
    node.y = (cc.view.getVisibleSize().height)/2;
    node.on(cc.Node.EventType.TOUCH_START, () => {
    node.removeFromParent();
    });
    }

    captureAndLongPress(){
    let img = this.capture();
    this.addLongPress(img)
    }

    //添加到长按保存
    addLongPress(bigImg){//添加图片
    var gameDiv = document.getElementById(‘Cocos2dGameContainer’);
    bigImg.id = ‘QRCode’;
    bigImg.alt = ‘bigImg’;

     let scaleX =   parseInt(gameDiv.style.width.replace(/px/, '')) /750;
     let scaleY =  parseInt(gameDiv.style.height.replace(/px/, ''))/1334
     bigImg.width =  this.node.width * scaleX//parseInt(gameDiv.style.width.replace(/px/, '')) * 0.6;
     bigImg.height = this.node.height * scaleY//parseInt(gameDiv.style.height.replace(/px/, '')) * 0.6;
     bigImg.style.position = 'absolute';
     bigImg.style.top = parseInt(gameDiv.style.height.replace(/px/, '')) * 0.2+"px";//y坐标
     bigImg.style.left = parseInt(gameDiv.style.width.replace(/px/, '')) / 2 - bigImg.width / 2 + "px";//设置图片居中显示
     gameDiv.appendChild(bigImg);
    

    }

    removeLongPress(){
    let gameDiv = document.getElementById(‘Cocos2dGameContainer’);
    let qrCode = document.getElementById(‘QRCode’);
    if(qrCode){
    gameDiv.removeChild(qrCode)
    }

    }

}

4赞

mark.

另辟蹊径,也算是不错了:grin:

mark…

mark…

Android 截图 是全黑的 有遇到吗

原生 要用 visit

mark

mark

mark