[]getimagedata直接调用无法获取有效像素问题

更新: 在 现在有没有办法把一个display.sprite转存成图片 无意间找到了 答案
getimagedata无法直接使用
1 需要先 c= Laya.stage.drawToCanvas(720,1280, 0,0)
2 然后 调用 t = new Trxture(c); t.getPixels(0,0, 720,1280)
希望官方对这种比较晦涩的的东西做一些说明,不然找来找去太麻烦了
分割线 ------直接调用getimagedata 是永远得不到有效数据的(像素数据都是0),看起来像是程序设计问题。
而在调用了 texture的 getpixels 得到有效数据。
__proto.getPixels=function(x,y,width,height){
if (Render.isWebGL){
return RunDriver.getTexturePixels(this,x,y,width,height);
}else {
Browser.canvas.size(width,height);
Browser.canvas.clear();
Browser.context.drawTexture(this,-x,-y,this.width,this.height,0,0);
var info=Browser.context.getImageData(0,0,width,height);
}
return info.data;
}
上面是 getpixels 的实现,
问题1: 为什么直接调用 Browser.context.getImageData 得不到有效的 像素数据
问题2:为什么 要重新Browser.context.drawTexture 一次  才能得到数据
问题3: 那如果一个sprite没有 texture 那像素数据如何获取?
问题4: 如果 是一个例子发射器 发射出的图形, 我想要对那个 sp 做像素操作该怎么办
(function()
{
    var Sprite  = Laya.Sprite;
    var Stage   = Laya.Stage;
    var Texture = Laya.Texture;
    var Browser = Laya.Browser;
    var Handler = Laya.Handler;
    var WebGL   = Laya.WebGL;
 
    (function()
    {
        // 不支持WebGL时自动切换至Canvas
        Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL);
 
        Laya.stage.alignV = Stage.ALIGN_MIDDLE;
        Laya.stage.alignH = Stage.ALIGN_CENTER;
 
        Laya.stage.scaleMode = "showall";
        Laya.stage.bgColor = "#232628";
 
        showApe();
    })();
 
    function showApe()
    {
        // 方法1:使用loadImage
        var ape = new Sprite();
        Laya.stage.addChild(ape);
        ape.loadImage("../../res/apes/monkey3.png");
 
        // 方法2:使用drawTexture
        Laya.loader.load("../../res/apes/monkey2.png", Handler.create(this, function()
        {
            var t = Laya.loader.getRes("../../res/apes/monkey2.png");
            var ape = new Sprite();
            ape.graphics.drawTexture(t, 0, 0);
            Laya.stage.addChild(ape);
            ape.pos(200, 0);
            x = t.getPixels(0,0,400,400)
            console.log(x)
            for (let i of x) {
                if (i > 0) {
                    console.log(i)
                }
            }
            console.log(' ----- 到这里为止 只有上面的 有 !!!有效的像素数据')
            a= Browser.context.getImageData(0,0, 400,400)
            console.log(a)
            for (let i of a.data) {
                if (i > 0) {
                    console.log(i)
                }
            }
        }));
    }
})();












上面的代码 贴进 https://layaair.ldc.layabox.com/demo/?2d&Sprite&DisplayImage 打开F12可以看到打印信息
或者要像下面这样才能获得到一定的像素信息
这里和上面的区别是,取消了webgl
(function()
{
    var Sprite  = Laya.Sprite;
    var Stage   = Laya.Stage;
    var Texture = Laya.Texture;
    var Browser = Laya.Browser;
    var Handler = Laya.Handler;
    var WebGL   = Laya.WebGL;
 
    (function()
    {
        // 不支持WebGL时自动切换至Canvas
        Laya.init(Browser.clientWidth, Browser.clientHeight);
 
        Laya.stage.alignV = Stage.ALIGN_MIDDLE;
        Laya.stage.alignH = Stage.ALIGN_CENTER;
 
        Laya.stage.scaleMode = "showall";
        Laya.stage.bgColor = "#232628";
 
        showApe();
    })();
 
    function showApe()
    {
        // 方法1:使用loadImage
        var ape = new Sprite();
        Laya.stage.addChild(ape);
        ape.loadImage("../../res/apes/monkey3.png");
 
        // 方法2:使用drawTexture
        Laya.loader.load("../../res/apes/monkey2.png", Handler.create(this, function()
        {
            var t = Laya.loader.getRes("../../res/apes/monkey2.png");
            var ape = new Sprite();
            ape.graphics.drawTexture(t, 0, 0);
            Laya.stage.addChild(ape);
            ape.pos(200, 0);
            x = t.getPixels(0,0,400,400)
            console.log(x)
            // for (let i of x) {
            //     if (i > 0) {
            //         console.log(i)
            //     }
            // }
            console.log(' ----- 到这里为止 只有上面的 有像素数据')
            canvas = document.getElementById('layaCanvas')
            // ctx = canvas.getContext('2d')
            ctx = Browser.context
            a= ctx.getImageData(0,0, 400,400)
            console.log(a)
            for (let i of a.data) {
                if (i > 0) {
                    console.log(i)
                }
            }
        }));
    }
})();
已邀请:

Monica - 知识达人

赞同来自:

LayaAir引擎中已经提供了截屏的接口,这里有个完整的示例:https://ask.layabox.com/question/4150
context我们不推荐使用,因为它是全局画布上绘图的环境,并非主画布。(WebGL下目前也不支持该接口)
相比之下使用LayaAir现有的接口会更加的灵活一下,它可以截取某个显示对象上的内容,如果想截取全屏的话直接传stage即可。

要回复问题请先

商务合作
商务合作