带有过滤器的背景图像未拉伸到画布的全宽 - fabric.js

Question

我正在使用fabric.js。 我正在将背景图像加载到画布中，并且图像没有拉伸。 如果我只上传图像，一切都很好，当我向背景图像添加过滤器时，背景图像不会拉伸到画布的全宽。

我尝试在加载图像后添加过滤器。 还尝试删除背景并再次加载，一切都会到同一个地方......图像没有拉伸。

这是一个只有背景图片的小提琴：

`https://jsfiddle.net/Music/6mcf4kj0/2/`

这是一个带有背景图像和过滤器的小提琴：

`https://jsfiddle.net/Music/q30cfwL7/1/`

我希望图像是画布的全宽和全高。

Answer 1

您的图像是 3000x3000，对于默认的 fabric.js 设置来说太大了。 从过滤器文档：

图片将绘制在 2048x2048 大小的瓷砖上，较大的图片将不适合。 fabric.textureSize 设置为 2408 是一个安全限制。 大多数硬件将支持 4096，因此 4096x4096 是一个限制，它可能会起作用并且不会让您头疼。 请记住，画布也有最大尺寸。 如果您支持像 IE11 这样的浏览器，那么无论您的 webgl 硬件能够做什么，尺寸大于 5000 的画布都可能会出现问题。

在应用过滤器之前试试这个：

fabric.textureSize = 4096

您还可以检查是否支持 Webgl 然后应用

if (fabric.isWebglSupported()) fabric.textureSize = 65536;