代码之家  ›  专栏  ›  技术社区  ›  alex88

织物js渲染的大图像提供像素化的结果

  •  1
  • alex88  · 技术社区  · 6 年前

    我必须把一个大的图像(8000x6500)放入800x650的画布 当我尝试使用 canvas.add() 当图像以100%的比例渲染时,得到的图像比原始图像像素化/模糊得多。

    这是我正在使用的代码(只有图像稍微小了一点,但您仍然可以看到问题):

    const canvas = new fabric.Canvas('c', { imageSmoothingEnabled: false });
    fabric.Image.fromURL('http://cms.web.cern.ch/sites/cms.web.cern.ch/files/styles/large/public/field/image/LHC_and_mountains-0503019-1-nice.jpg', (image) => {
        image.left = -3000;
      image.top = -3500;
        canvas.add(image);
    });
    

    here

    作为比较, this 你是怎么看待konva的

    1 回复  |  直到 6 年前
        1
  •  1
  •   melchiar    6 年前

    禁用 objectCaching 对象缓存 默认情况下,这意味着您的巨大图像将绘制在一个巨大的屏幕外画布上,该画布与图像本身一样大,可能会达到浏览器的最大画布大小。

    有关fabric对象缓存的更多信息,请参见: http://fabricjs.com/fabric-object-caching

    https://jsfiddle.net/melchiar/edjguh3L/