toSVG there is no crossOrigin Anonymous

[gzai]

Hi,

I add image with crossOrigin: 'Anonymous'

					fabric.Image.fromURL( photo_src , function(img) {
					  	img.set({
						    top: 0,
						    left: 0,
							selectable: false,
							evented: false,
							zindex: 0,
						});
						img.lockMovementX = true;
						img.lockMovementY = true;
						master_canvas.centerObject(img);
					  	master_canvas.add(img);
					}, { crossOrigin: 'Anonymous' });

convert to JSON ( with JSON.stringify )
"crossOrigin":"Anonymous" exist in image array

convert to SVG ( with toSVG )
crossOrigin Anonymous not exist in svg tag

so how to add crossOrigin Anonymous in fabric.loadSVGFromString ?

[asturur]

is crossOrigin a property supported by image tag in svg?

[butch2k]

Afaik the answer is no. It has been proposed a while ago but it's not in the standard.  https://lists.w3.org/Archives/Public/www-svg/2015Mar/0139.html On Tue, Dec 27, 2016 at 11:34 AM +0100, "Andrea Bogazzi" <[email protected]> wrote: is crossOrigin a property supported by image tag in svg? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[gzai]

So, we can't add crossOrigin Anonymous in fabric.loadSVGfromString ?

[asturur]

not sure. we should do it to enable people to load svgs on canvas since canvas is the target of our loading.
Still most of real svg will not have a crossOrigin property there since does not exist.
The change should be really small to be honest.

[AlexanderIstomin]

faced with that issue too.
i'm exported canvas with image from s3 (crossOrigin set to anonymous) to svg then tried to load svg on another canvas with loadSVGFromString then tried to export that canvas with toDataURL - got tained canvas error.

[AlexanderIstomin]

as a dirty hack - set image's sources to datauri before exporting canvas to svg

[niyotaa]

hi! i have the same issue. is there a work around to this problem?

[magbicaleman]

I'm on v 1.7.11, and through chrome I get some random results. At times I have no problem loading and svg using fabric.loadSVGFromURL, other times I get No 'Access-Control-Allow-Origin' header is present on the requested resource. This is from AWS S3.

The cors rule on the bucket are as follows

<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>

I added the { crossOrigin: 'anonymous'} to my options so the it looks like.

fabric.loadSVGFromURL(uri, func, null, options);

I'm not really sure what the issue is, so it's very had to debug what's causing this, for me. Any help would be appreciated. Thank you.

Edit

I've noticed, if the images are cached they get the No 'Access-Control-Allow-Origin' header is present on the requested resource., once I disable cache and refresh the image will work, then when I re-enable the cache the image will work again.

[JomaKar]

https://stackoverflow.com/questions/49766529/cross-origin-requests-on-local

[KudMath]

@magbicaleman hey there. I'm having the exact same pb (2 years later ^^). did you find a solution?

[ahmadsyahrizar]

me is having the same issue too.

[ab-etemadi]

Hi @asturur
I'm encountering the same issue. I tried adding a simple SVG along with { crossOrigin: 'anonymous' } to its options. Interestingly, fabric.Image.fromURL works fine with { crossOrigin: 'anonymous' }, but fabric.loadSVGFromURL is inconsistent - sometimes it works, sometimes it doesn't.

here is my code

fabric.loadSVGFromURL(
        svgURL,
        function (objects, options) {
          const obj = fabric.util.groupSVGElements(objects, options);
          const canvasWidth = canvas?.clipPath.width;
          const canvasHeight = canvas?.clipPath.height;
          const targetWidth = canvasWidth / 5;
          const targetHeight = canvasHeight / 5;
          const scale = Math.min(targetWidth / obj.width, targetHeight / obj.height);
          obj.scale(scale);
          obj.set({
            left: canvasWidth / 2,
            top: canvasHeight / 2,
            originX: 'center',
            originY: 'center',
            name: GRAPHIC_SVG_GROUP_NAME,
          });

          canvas.add(obj).renderAll();
          canvas.setActiveObject(obj);
        },
        null,
        { crossOrigin: 'anonymous' },
      );

[asturur]

Which is the URL that is failing the crossOrigin check? the svgURL or the url of some image inside the svg?

I see the { crossOrigin: 'anonymous' }, is name ad imageLoadingOptions so is not affecting loading the svg itself.
That could be a bug or a feature since the svg and the image contained could come from different domains and have different cors rules.

Do you mind sharing the svg?

(i agree an option for the svg itself should be there and that by default we should always set crossOrigin: 'anonymous' where possible )