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

【问题标题】：How can I resize an image in FabricJS?如何在 FabricJS 中调整图像的大小？
【发布时间】：2020-11-01 02:56:33
【问题描述】：

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

第一种方法是设置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();

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

【问题讨论】：

但是你是怎么导出的呢？调整大小过滤器确实在调整图像大小。
我使用 toDataURL()。出口似乎不是问题。我在执行 applyFilters() 之前和之后查看 img.width 和 img.height 属性，它们没有改变。
它们甚至不会改变，但是如果你查看滤镜前后的 Image._element.width 和 image._element.height ，你会发现它们发生了变化。如果您只想导出图像，请执行 image._element.toDataUrl()，您将获得表示调整大小图像的画布的画布数据。还要考虑如果你没有禁用 webgl，你实际上是在使用 lanzcos。
好的，是的，我看到了新尺寸的 image._element.width 和 image._element.height。什么是 image.width 和 image.height？这只是它显示的大小吗？ image._element、image._filteredEl、image.originalElement有什么区别？
很长的一个评论，但缓存的不同阶段。通常你只有 _element 和 _originalElement，除非你一起添加过滤器和调整过滤器。

标签： fabricjs

【解决方案1】：

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

【讨论】：