如何在 FabricJS 中调整图像大小？

Question

我正在尝试调整图像的大小，然后用户将导出并保存该图像。我尝试了以下方法，但它们都不适合我。

第一种方法是设置scaleX和scaleY。这确实会导致图像在页面内调整大小，但似乎并没有真正调整图像的大小。换句话说，它以正确的尺寸显示，但图像数据没有改变。

img.set({
    scaleX: newWidth/currentWidth,
    scaleY: newHeight/currentHeight
    });

我尝试的另一种方法是使用调整大小过滤器。不幸的是，这似乎没有任何作用。我使用的其他过滤器工作正常。

var canvas = new fabric.Canvas('c');
img.filters.push(new fabric.Image.filters.Resize({
    resizeType: 'hermite',
    scaleX: newWidth/currentWidth,
    scaleY: newHeight/currentHeight
}));
img.applyFilters();
canvas.requestRenderAll();

如果有人有任何建议，我将不胜感激。

Answer 1

问题是我需要从 image._element.toDataURL() 而不是调用 image.toDataURL() 来获取调整大小的图像。

如何在 FabricJS 中调整图像大小？

How can I resize an image in FabricJS?

fabricjs