[]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 得到有效数据。
问题1: 为什么直接调用 Browser.context.getImageData 得不到有效的 像素数据
问题2:为什么 要重新Browser.context.drawTexture 一次 才能得到数据
问题3: 那如果一个sprite没有 texture 那像素数据如何获取?
问题4: 如果 是一个例子发射器 发射出的图形, 我想要对那个 sp 做像素操作该怎么办
或者要像下面这样才能获得到一定的像素信息
这里和上面的区别是,取消了webgl
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){上面是 getpixels 的实现,
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;
}
问题1: 为什么直接调用 Browser.context.getImageData 得不到有效的 像素数据
问题2:为什么 要重新Browser.context.drawTexture 一次 才能得到数据
问题3: 那如果一个sprite没有 texture 那像素数据如何获取?
问题4: 如果 是一个例子发射器 发射出的图形, 我想要对那个 sp 做像素操作该怎么办
(function()上面的代码 贴进 https://layaair.ldc.layabox.com/demo/?2d&Sprite&DisplayImage 打开F12可以看到打印信息
{
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)
}
}
}));
}
})();
或者要像下面这样才能获得到一定的像素信息
这里和上面的区别是,取消了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)
}
}
}));
}
})();
没有找到相关结果
已邀请:
要回复问题请先登录
1 个回复
Monica - 知识达人
赞同来自:
context我们不推荐使用,因为它是全局画布上绘图的环境,并非主画布。(WebGL下目前也不支持该接口)
相比之下使用LayaAir现有的接口会更加的灵活一下,它可以截取某个显示对象上的内容,如果想截取全屏的话直接传stage即可。