Force anonymous cross origin on every load?

[shokimble]

I'm getting sick of having to specify {"crossOrigin", "anonymous"} for every web resource.

I also have a problem where setting a pattern on a shape is fine until you save it to json and then decide to try restore it. Which doesn't let you specify via an attribute or just luck the crossOrigin attribute.

Is there a way of setting it on the prototype or can someone help work out how to get it working on loadFromJSON when a shape or font has a pattern? As I'm always ending up with a dirty canvas.

[shokimble]

Eg when serialised to json

                let activeObj = canvas.getActiveObject();
                fabric.util.loadImage(imgURL, function(image) {
                    console.log("Pattern loaded");
                    loadingResource(false);
                    activeObj.set("fill", new fabric.Pattern({
                        source: image,
                        repeat: "no-repeat",

                    }));

               activeObj.fill.set("crossOrigin", "anonymous");

                }, null, { crossOrigin: 'anonymous'});

When restoring from json with or without setting crossOrigin the canvas becomes tainted. No problems on initial load just restoring. No problems with images that were also loaded with crossOrigin set just the fill images loaded from fabric.util.loadImage.

Fabric 2.0.0 rc2

Any ideas?

[asturur]

is a missing piece.

I would say it needs a fix if it wasn't i would like to make patterns like group of objects instead of the current way ( image link, function, something else )

[asturur]

a fix is needed for sure, probably everything will be offloaded to fabric.Image when i will try to rework patterns.

[shokimble]

Any work arounds for now?

I've tried setting crossOrigin = "anonymous" property of fabric.Pattern and fabric.Image prototypes and intercepting with a reviver and none work. Reviver seems to operate after the image has loaded which is a bit annoying as I thought it operated as an intercept not a post-operation function.

I've also looked at dynamic patterns which look cool as they give you a lot more flexibility but as they're functions it looks like a mine field for trying to rehydrate from JSON. The examples do not work at all with saving and loading as JSON.

[asturur]

no workaround i can think of.
apart having images on same domain.

needs a fix in the code.

[shokimble]

Yeah I can see fabric.util.loadImage has nothing to do with Fabric.Image class and crossOrigin is baked into the params so yeah code change :( I don't want to be forking for minor fixes like this and it sounds like there's no motivation to fix it in the core until patterns are revisited.

I do have other issues with patterns too like a lack of scale. I'm not so much trying to apply a repeating pattern but a background to text and paths elements.

Any ideas on how to serialise a dynamic pattern to JSON? Might be better off as a stackoverflow question.

[asturur]

i will fix this problem, as i said, needs a fix.

The reason i will revisit patterns is that dynamic patterns are not serializable if not with a function or a giant dataurl.

both of the approaches have problem, security and dependency from global vars for the function and size for the dataurl. that is why in the future the pattern will be more like a group of standard objects. but that is a breaking change, so it will not happen immediately.

[shokimble]

OK thanks! Understand your previous comment now 🥇

[shokimble]

I just spent the whole of this morning getting a functional (un)serializable dynamic pattern working so now very much appreciate the need for an overhaul.

My two cents in terms of what patterns need are - the ability to use SVG as well as images, working opacity and alpha (support images with both but also be able to apply alpha to those that don't eg jpegs), different options for scaling/repeating - eg repeat, repeat-x, repeat-y, cover, fit, contain etc and being able to set scale relative to parent - eg to achieve centered 50%. Also positioning.

[asturur]

well patterns are patterns.
repeat types will not be changed.

You can already use svg as patterns.
what is really missing is the ability to use fabric objects as patterns, like svg do.

patterns already support a generic transform that allow you to scale and rotate.

[asturur]

Opened PR to fix this

[shokimble]

Thanks for the update. I'll test it shortly.

You mentioned:

patterns already support a generic transform that allow you to scale and rotate.

I'm not seeing how this works in the code or in trying different things. If I apply scaleX/Y nothing happens. I can do it through a dynamic pattern but I'm just not having luck with making them scale properly either.

I found a branch patternparsing that I have managed to almost get dynamic patterns scaling but it's full of bugs.

I literally just want an image fill for a shape that fills the whole shape (scaling up to fill if need be and scaling down to maintain the same view of the image) and scales with it. Both dynamic patterns and normal ones have fixed scale so you make a tiny shape and it fills with the top left of the pattern image. Drag its edges to scale up the shape and you just get a larger version of that tiny corner. I've tried all types of hacks to get it working like dynamically sizing after scale etc etc but none of it works.

[KudMath]

@asturur Hi. I'm getting a similar pb with canvas.add(object) (seems to call loadImage) where the ref in object is requested without crossOrigin. Is there a way to specify that param?

[asturur]

Where do you the object from? what kind of image it has? in a pattern, in an image object?