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