調用 toDataUrl() 時如何禁用 Fabric.js 中的圖像平滑？

Question

當我使用toDataUrl()導出畫布時，是否可以禁用 Fabric.js 畫布內的圖像平滑？ 我使用的是 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

我必須做什么才能准確地獲得畫布中顯示的內容？

這是一個小提琴。 這是report ，因為我認為這是一個錯誤。

Answer 1

它並不能完全解決您的問題，但您可以使用Resize 過濾器以某種方式使其不那么明顯：

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);

這是一個工作小提琴。

Answer 2

一種解決方法似乎是使用以下方法覆蓋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;
};