Уменьшенные изображения в fabricjs пикселированы

Question

Когда я загружаю изображение, подобное тому, которое я включил, чтобы сказать, что оно достигает 400 dpi, оно становится очень пиксельным. Я огляделся и ничего не работает. У меня есть коллекция изображений, которые пользователь мог бы наложить на холст, и изображения меняются в зависимости от масштаба, поэтому я не могу переразмерять их раньше времени.

Любая помощь была бы принята с благодарностью.

Благодаря Джоди

http://rockofagescanada.com/test33_6287.png

Answer 1

В версии 1.4.13 FabricJs поддерживают изображение размер фильтров.

Изменение размеров фильтр может быть использован в 2 способами:

-Static размер от нагрузки с фиксированной шкалой

-Dynamic изменения размера на масштабирование изображения объекта с помощью кода с помощью мыши уплотнительное тащит.

Есть 4 фильтров реализованы как сейчас:

-SliceHack, на самом деле не фильтр но взломать, чтобы получить более плавное изменение размера путем изменения размера 0.5 изображение несколько раз.

-Hermite фильтр

-Bilinear фильтрации

-Lanczos изменение размеров с помощью параметра лепестков

Здесь следуют несколько примеров:

1. Статическое изменение размеров при нагрузке с фильтром Эрмита, фиксированная шкала

   var theImage = new fabric.Image(imag, { 
       top: 0, 
       left: 0 
   }); 
   theImage.filters.push(
          new fabric.Image.filters.Resize({ 
            resizeType: 'hermite', 
            scaleX: 0.1, 
            scaleY: 0.1 
            }) 
           ); 
   theImage.applyFilters(); 
   canvas.add(theImage); 
   

2. Динамическое изменение размера с Ланцоша фильтром, 2 лепестка

   var theImage = new fabric.Image(imag, { 
       top: 0, 
       left: 0 
   }); 
   theImage.resizeFilters.push(new fabric.Image.filters.Resize({ 
       resizeType: 'lanczos', // typo fixed 
       lanczosLobes: 2 // typo fixed 
   })); 
   canvas.add(theImage); 
   

Answer 2

Если вы хотите, чтобы установить ширину до 1500, то ниже код может быть использован для rezise. Это сработало для меня. Изображение выглядит нормально.

var scale = 1500/oImg.getWidth(); 

var newWidth = oImg.getWidth() * scale; 
var newHeight = oImg.getHeight() * scale; 

oImg.set({width : newWidth, height : newHeight});