Question

所以我试图从PIXI.js画布中提取像素，然后我检查了它们，当屏幕上的画布上有一个图像时，提取的像素是完全黑色的......

然后我投资了，这就是我找到的（我需要帮助）

背景资料：

设置：

this.canvas = $('#canvas');
this.canvasDOM = this.canvas[0];

this.renderer = PIXI.autoDetectRenderer(0, 0, {
  view: this.canvasDOM,
  resolution: 1
});

获取图片：

chooseImage(src) {
  const self = this;

  const image = new Image();
  image.src = src;

  image.onload = function() {
    const base = new PIXI.BaseTexture(image);
    const texture = new PIXI.Texture(base);
    const sprite = new PIXI.Sprite(texture);

    sprite.position.set(0, 0);
    self.currentImage = sprite;

    self.render();
  };
}

渲染图片：

render() {
  if (this.currentImage) {
    this.updateDimensions();

    const stage = new PIXI.Container();
    stage.addChild(this.currentImage);
    stage.filters = this.gatherFilters();

    const { width, height } = this.currentImage;
    stage.filterArea = new PIXI.Rectangle(0, 0, width, height);

    this.renderer.render(stage);
  }
}

好的，所以你可以忽略渲染函数之前的代码，但特别是渲染函数的第三行是：

this.renderer.render(stage);

现在，这完全没问题！图像弹出，画布上是一个明亮的水母，但有一个小问题：

如果我将它添加到render（）函数的末尾：

render() {
  if (this.currentImage) {
    this.updateDimensions();

    const stage = new PIXI.Container();
    stage.addChild(this.currentImage);
    stage.filters = this.gatherFilters();

    const { width, height } = this.currentImage;
    stage.filterArea = new PIXI.Rectangle(0, 0, width, height);

    this.renderer.render(stage);

    const actualCanvas = this.renderer.extract.canvas; // the actual canvas on the screen

    console.log(actualCanvas.toDataURL());
  }
}

它返回一个长字符串，如果替换

console.log(actualCanvas.toDataURL());

with :(下载lib）

download(actualCanvas.toDataURL('image/png'), 'image.png', 'image/png');

下载水母图像！

现在，在另一个函数中，我打算将图像下载为png或jpg（可能的下载类型数组在另一个类中并动态决定，所以我不能简单地缓存像素渲染后）

向我展示我的问题，我将以上代码更改为：

setTimeout(() => download(actualCanvas.toDataURL('image/png'), 'image.png', 'image/png'), 1 /* One second delay */);

现在图像是空白的;黑色。，不像以前那样工作

唯一改变的是我添加的延迟。

我进一步检查了这一点，我意识到如果我做了

setTimeout(() => console.log(this.renderer.extract.pixels()), 1); // extract the pixels after some delay for testing

然后他们都是黑人，但如果我删除了延迟，它再次起作用

再次，在我的情况下，我不能仅仅出于自己的原因缓存图像（不要问）

所以如果有一个解决方法，我会徘徊，以便在我提取它们之后的一些延迟或稍后的像素不仅仅是黑色并且像没有延迟那样工作。

非常感谢任何帮助！

Answer 1

在我看来，这是对浏览器的一种保护。可能是非事件驱动的代码保护访问了某些资源，或者可能是非https webapps保护（即使没有证书，您是否也通过https尝试了您的应用？），或者甚至可能是某种跨域保护（我对此表示怀疑，但是始终显示在待检查清单中）。也许您可以部署小提琴或类似工具进行测试。希望对您有帮助！

由于某种原因，PIXI js画布像素保存为黑色

1 个答案: