Ткань рендеринга большого изображения дает точечные результаты - PullRequest
Новая
       10

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

0 голосов
/ 14 октября 2018

Мне нужно разместить большое изображение (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 Ответ

0 голосов
/ 14 октября 2018

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

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

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

...