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

Question

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

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

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

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

这是背景图像和过滤器的小提琴：

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

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

标签： javascriptimagefabricjsimagefilter

Answer 1

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

图片将绘制在 2048x2048 大小的图块上，较大的图片不适合。设置为 2408 的 fabric.textureSize 是一个安全限制。大多数硬件将支持 4096，因此 4096x4096 是一个可能会起作用的限制，并且可以减少您的麻烦。请记住，画布也有最大尺寸。如果你支持像 IE11 这样的浏览器，无论你的 webgl 硬件有什么能力，你可能会遇到尺寸大于 5000 的画布的问题。

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

fabric.textureSize = 4096

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

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