Как отключить сглаживание изображений в Fabri c. js при вызове toDataUrl ()? - PullRequest
Новая
       58

Как отключить сглаживание изображений в Fabri c. js при вызове toDataUrl ()?

1 голос
/ 02 марта 2020

Можно ли отключить сглаживание изображений внутри холста Fabri c. js, когда я экспортирую холст с помощью toDataUrl () ? Я использую версию 3.6.2.

Я создал холст с этим кодом: 

const canvas = new fabric.Canvas('canvas-1', {
    imageSmoothingEnabled: false
});

imageSmoothingEnabled отключает сглаживание на холсте. Однако, когда я вызываю toDataUrl() с множителем и показываю результат в img, сглаживание все еще там, и оно также умножается. 

const dataUrl = canvas.toDataURL({format: 'png', multiplier: 3});
$imgageElement.attr('src', dataUrl); //jQuery

Что мне нужно сделать, чтобы я получил что именно отображается на холсте?

Вот скрипка . И вот отчет , так как я думаю, что это ошибка.

Ответы [ 2 ]

1 голос
/ 04 марта 2020

Один обходной путь, кажется, переопределяет toCanvasElement с: 

const canvas = new fabric.Canvas('canvas-1', {
    imageSmoothingEnabled: false
});

canvas.toCanvasElement = function (multiplier, cropping) {
    multiplier               = multiplier || 1;
    cropping                 = cropping || {};
    var scaledWidth          = (cropping.width || this.width) * multiplier,
        scaledHeight         = (cropping.height || this.height) * multiplier,
        zoom                 = this.getZoom(),
        originalWidth        = this.width,
        originalHeight       = this.height,
        newZoom              = zoom * multiplier,
        vp                   = this.viewportTransform,
        translateX           = (vp[4] - (cropping.left || 0)) * multiplier,
        translateY           = (vp[5] - (cropping.top || 0)) * multiplier,
        originalInteractive  = this.interactive,
        newVp                = [newZoom, 0, 0, newZoom, translateX, translateY],
        originalRetina       = this.enableRetinaScaling,
        canvasEl             = fabric.util.createCanvasElement(),
        originalContextTop   = this.contextTop;
    canvasEl.width           = scaledWidth;
    canvasEl.height          = scaledHeight;
    this.contextTop          = null;
    this.enableRetinaScaling = false;
    this.interactive         = false;
    this.viewportTransform   = newVp;
    this.width               = scaledWidth;
    this.height              = scaledHeight;
    this.calcViewportBoundaries();
    var ctx                   = canvasEl.getContext('2d');    // replaced
    ctx.imageSmoothingEnabled = false;                        // this.renderCanvas(canvasEl.getContext('2d'), this._objects);
    this.renderCanvas(ctx, this._objects);                    // with these 3 lines
    this.viewportTransform = vp;
    this.width             = originalWidth;
    this.height            = originalHeight;
    this.calcViewportBoundaries();
    this.interactive         = originalInteractive;
    this.enableRetinaScaling = originalRetina;
    this.contextTop          = originalContextTop;
    return canvasEl;
};
1 голос
/ 03 марта 2020

Это не полностью решает вашу проблему, но вы можете как-то сделать ее менее заметной, используя Фильтр изменения размера : 

var img = new fabric.Image(img, {
  left: 10,
  top: 10,
  angle: 5,
  zoom: 3,
  objectCaching: false
});
img.filters.push(new fabric.Image.filters.Resize({
    resizeType: 'sliceHack',
    scaleX: 4,
    scaleY: 4
  }));
  img.applyFilters();

img.scale(4);

canvas.add(img);

Вот рабочая скрипка .

...