CODEWITHSUNDEEP
fabricjsfabricjs2
Glen Elkins
Glen Elkins

Reputation: 917

FabricJS Can't Apply Filters To Large Image Due To "Max Texture Size"

I could do with some help to understand what fabric means by: Max Texture Size: 16,384 - 16,384 what? The image i used is 5MP (2560 x 1920) and trying to apply a filter to the image like this:

object.filters.push(new fabric.Image.filters.Sepia());
object.applyFilters();

The image object disappears and the message above appears in the console. I can only seem to apply filters to the image if it's < 2MP which isn't ideal at all. I really don't know what it means by a max texture size.

So what does this mean and how can i make it allow the filters on bigger sized images?

Upvotes: 3

Views: 3054

Answers (2)

Fateme Amere
Fateme Amere

Reputation: 11

i had this problem by using blend color filter of fabric js and i figured out it caused by way i gave photo to canvas ,check it out maybe it works for you too. (notice: as i tried this filter doesn't worked with svg format ... i used it for png and jpg , code is based on javascript)

    fabric.Image.fromURL(require("../../assets/mockup/100.png"), (img) => {
  canvas.add(img);
  img.scaleToWidth(canvas.getWidth());
  img.scaleToHeight(canvas.getHeight());
  img.filters.push(filter);
  img.applyFilters();
  canvas.renderAll();
});

Upvotes: 0

Neil VanLandingham
Neil VanLandingham

Reputation: 1086

You can set Fabric's alotted textureSize based on the max textureSize detected for a user's machine by running:

 if (fabric.isWebglSupported()) {
            fabric.textureSize = fabric.maxTextureSize;
 }

Note that running fabric.isWebglSupported() seems to be necessary to compute fabric.maxTextureSize. Otherwise, it will return undefined.

Upvotes: 2

Related Questions