LayaAir 截屏分享

6 篇文章 1 订阅
3 篇文章 0 订阅
var Loader = laya.net.Loader;
var Handler = laya.utils.Handler; 
//程序入口
Laya.init(600, 400,Laya.WebGL);
Laya.Stat.show();
Laya.stage.bgColor = "#ffcccc"; 
//激活资源版本控制
Laya.ResourceVersion.enable("version.json", Handler.create(null, beginLoad), Laya.ResourceVersion.FILENAME_VERSION);

function beginLoad(){
    Laya.loader.load("res/atlas/comp.atlas", Handler.create(null, onLoaded));
}

function onLoaded()
{     
    //随意绘制显示对象
    var sp = new Laya.Sprite();
    sp.loadImage("comp/image.png");
    sp.pos(100,50); 
    Laya.stage.addChild(sp); 

    var sp1 = new Laya.Sprite();
    sp1.right = 0;
    sp1.pos(300,50)
    sp1.loadImage("comp/image.png");
    Laya.stage.addChild(sp1);
 
    var btn = new Laya.Button()
    btn.skin = "comp/button.png"
    btn.width = 150;
    btn.height =  66;
    btn.sizeGrid = "4,4,4,4";
    btn.label = " 截 图 ";
    Laya.stage.addChild(btn)
    btn.bottom = 20;

    //设置舞台CLICK,该CLICK作为截屏的开关,点击舞台,对舞台对应的canvas区域进行截屏
    btn.on(Laya.Event.CLICK,this,onClick,[btn]);
} 

function downLoadImage(canvas,name) {
  var a = document.createElement("a");
  a.href = canvas.toDataURL();
  a.download = name;
  a.click();
}

 //画出node的区域来
function RED_Range (parent, node) {
    var sp = new Laya.Sprite();
    sp.graphics.drawLine(0, 0, node.width, 0, "#ff0000", 3);
    sp.graphics.drawLine(0, 0, 0, node.height, "#ff0000", 3);
    sp.graphics.drawLine(node.width, node.height, 0, node.height, "#ff0000", 3);
    sp.graphics.drawLine(node.width, node.height, node.width, 0, "#ff0000", 3);
    sp.zOrder = 10100; 
    parent.isTagNode = sp;
    parent.addChild(sp);
};


 
//点击截图回调
function onClick(screenshotBtn){ 
    // 隐藏截图按钮
    screenshotBtn.visible = false;

    //HTMLCanvas 是 Html Canvas 的代理类,封装了 Canvas 的属性和方法。。请不要直接使用 new HTMLCanvas!
    //此处将canvas指定区域进行截屏
    var htmlC =Laya.stage.drawToCanvas(Laya.stage.width,Laya.stage.height,0,0);  
    var canvas = htmlC.getCanvas()

    //发送服务器存储为远程图片  用于分享
    //var data = canvas.toDataURL("image/png")
    //console.log(data) 

    //pc 保存图
    // var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url  
    // window.location.href= imgUri; // 下载图片   
    //downLoadImage(canvas,"hah")

    //获取截屏区域的texture
    var _texture = new laya.resource.Texture(htmlC);  
    var bg = new Laya.Image()
    bg.scale(0.8,0.8)
    bg.centerX = 0.5;
    bg.centerY = 0.5;
    bg.skin = "comp/bg.png"
    bg.size(Laya.stage.width,Laya.stage.height)
    Laya.stage.addChild(bg)

    //将截屏的texture进行draw绘制并显示到舞台
    var sp2 = new Laya.Sprite();
    //阻止事件传递
    sp2.on(Laya.Event.MOUSE_DOWN, sp2, function (e) {
        e.stopPropagation();
    });
 
    var btn = new Laya.Button()
    btn.skin = "comp/button.png"
    btn.width = 150;
    btn.bottom = 10;
    btn.zOrder = 100
    btn.centerX = 0.5
    btn.height =  66;
    btn.sizeGrid = "4,4,4,4";
    btn.label = " 删除截图 ";
    Laya.stage.addChild(btn)
    btn.bottom = 20; 
    bg.addChild(btn);  
    btn.on(Laya.Event.CLICK, this , function (bg) {
         screenshotBtn.visible = true;
         bg.removeSelf()
    },[bg]);

    sp2.on(Laya.Event.CLICK, sp2, function (e) {
        e.stopPropagation();
    });

    sp2.size(Laya.stage.width,Laya.stage.height)
    sp2.graphics.drawTexture(_texture,0,0,Laya.stage.width,Laya.stage.height);
    bg.addChild(sp2); 
    RED_Range(sp2,sp2);
}

附带一个demo地址:链接:https://pan.baidu.com/s/1n2yCKKdUee2HfGqshIsOlg 密码:30al
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值