Ткань js render большого изображения дает пиксельные результаты

Мне нужно подогнать большое изображение (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);
});

вы можете увидеть пример jsfiddle здесь

Для сравнения, это то , как вы видите это с конвой

Всего 1 ответ


Отключение objectCaching на вашем изображении objectCaching проблему пикселизации. Fabric позволяет objectCaching изображения по умолчанию, а это означает, что ваше огромное изображение рисуется на массивном зазеркальном холсте размером с изображение и, вероятно, попадает в максимальный размер холста в браузере.

Подробнее о кэшировании объектов на ткани здесь: http://fabricjs.com/fabric-object-caching

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