Question

问题

大家好，我对pixiJS库生成的画布有问题。我需要创建一个工具，该工具允许用户自定义和改善图像的明亮度，对比度，锐度等。问题是我处理的是大图片（7000x3500px），并且放置效果后图片失真。在我的公司中，我遇到的只是MAC问题。在其他设备中，效果很好。

简单代码示例

var canvas2 = document.createElement( "canvas" );
canvas2.width   = 7000;
canvas2.height  = 3500;

var image2 = new Image();
image2.src = "img2.jpg";

var ctx2 = canvas2.getContext( "2d" );

image2.addEventListener( "load", function() {
    ctx2.drawImage( image2, 0, 0 );

    var app         = new PIXI.Application();
    var texture     = new PIXI.Texture.fromCanvas( canvas2 );
    var sprite      = new PIXI.Sprite( texture );
    app.stage.addChild( sprite );

    var color = new PIXI.filters.AdjustmentFilter();
    sprite.filters = [color];
    color.red = 1.5;
    var exp = app.renderer.plugins.extract.canvas( sprite )

    console.log( exp.toDataURL( "image/jpeg" ) );
} );

结果

我改变了宽度和高度。

首先（800pc / 400px）：良好的图像。

第二（7000px / 3500px）：图片失真

Answer 1

很快，是的。

PIXI是帮助您通过绘制，渲染等方式管理HTMLCanvas的唯一库。很快，PIXI与画布大小本身无关。

最近，我使用html canvas测试了图像过滤，并注意到当图像很大时出现问题，但在我的情况下约为15.000 x 5000。您可能对What is the max size of html canvas感兴趣，并且可以在此处找到一些信息。请记住，这些信息可能已过时。

Chrome浏览器：

最大高度/宽度：32,767像素最大面积：268,435,456像素   （例如16,384 x 16,384）

Firefox：

最大高度/宽度：32,767像素最大面积：472,907,776像素   （例如22,528 x 20,992）

[...]

首先尚无一个普遍的答案，因为它是由设备和浏览器定义的。移动设备将比台式机浏览器具有更大的限制-在这种情况下，您将无法信任用户，并且需要通过限制大小或其他方式过滤图像来找到解决问题的适当方法。

第二-在PIXI中使用过滤器这一事实会使所有事情变得复杂。首先，筛选器仅在WebGL上下文中起作用，这意味着您必须确保它受支持。接下来，您必须将图像作为纹理加载到内存-PIXI通过PIXI.Texture.fromCanvas( canvas2 );为您（在您的情况下）执行此操作，并且这样做也受到限制。纹理大小受GPU免费内存的限制，据我所知，这无法通过浏览器在webGL中检测到。 （此外，如果您加载更多图像，则需要等待第一张图像成为GC或手动进行操作） 我尝试说的是，即使您适合画布的最大尺寸，也可能发生移动设备内存不足而GPU崩溃的情况。 （台式机也一样，但难度更大）

最后的事情是（我需要找到一个源）我记得webGL实例还有更多限制。例如，在firefox中，您总共可以拥有（所有卡）16个实例，如果创建的实例更多，则旧实例将被丢弃。我可能是错的，但是一个安装实例的大小（桌面）是1024，但它可能取决于设备。在这种情况下，如果您的画布有1100 x 1100，则使用其中的4个。我认为这是一个出现问题的机会很小，但我要注意一下，因此您知道这一点。

pixiJS画布大小是否有限制

1 个答案: