javascript - Why does this SVG-holding `blob:` URL taint the canvas in Chrome? - Stack Overflow

admin管理员组

文章数量:1391989

I'm doing to following:

1. Generate an SVG document as a string
2. Capture it in a blob: URL with new Blob and createObjectURL
3. Create a fabric.Image object from it using fromURL
4. In the fromURL callback, call canvas.add to add the new Image to the canvas

This is my code:

var svg = '<svg xmlns="" width="200" height = "200"><foreignObject width="100%" height="100%"><text xmlns = "" style = "font-size: 40px; color: #FFFFFF">Example</text></foreignObject></svg>';
var svgBlob = new Blob([svg], {type: 'image/svg+xml'});
var svgURL = window.URL.createObjectURL(svgBlob);
 fabric.Image.fromURL(svgURL,function(oIMG) {
   oIMG.crossOrigin = 'Anonymous';
   canvas.add(oIMG);
 });

Then I try getImageData:

var dataImage = context.getImageData(0,0,canvas.width,canvas.height).data;

In Chrome, this gives me the error:

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

This is strange because I don't ever use any cross-origin URLs, only blob: URLs.

In Firefox it works perfectly. The problem appears to be specific to Chrome.

I'm doing to following:

1. Generate an SVG document as a string
2. Capture it in a blob: URL with new Blob and createObjectURL
3. Create a fabric.Image object from it using fromURL
4. In the fromURL callback, call canvas.add to add the new Image to the canvas

This is my code:

var svg = '<svg xmlns="http://www.w3/2000/svg" width="200" height = "200"><foreignObject width="100%" height="100%"><text xmlns = "http://www.w3/1999/xhtml" style = "font-size: 40px; color: #FFFFFF">Example</text></foreignObject></svg>';
var svgBlob = new Blob([svg], {type: 'image/svg+xml'});
var svgURL = window.URL.createObjectURL(svgBlob);
 fabric.Image.fromURL(svgURL,function(oIMG) {
   oIMG.crossOrigin = 'Anonymous';
   canvas.add(oIMG);
 });

Then I try getImageData:

var dataImage = context.getImageData(0,0,canvas.width,canvas.height).data;

In Chrome, this gives me the error:

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

This is strange because I don't ever use any cross-origin URLs, only blob: URLs.

In Firefox it works perfectly. The problem appears to be specific to Chrome.

• javascript
• google-chrome
• fabricjs

Share Improve this question Follow edited Jun 14, 2018 at 12:27 apsillers 116k1818 gold badges247247 silver badges247247 bronze badges asked Jun 12, 2018 at 18:55 IlFiltsinIlFiltsin 10388 bronze badges 10

• 1 Is the image hosted on a CORS friendly site? Also try changing Anonymous to anonymous. – gantoine Commented Jun 12, 2018 at 19:10
• I used anonymous and empty value, not working. What do you mean about CORS friendly? – IlFiltsin Commented Jun 12, 2018 at 19:15
• 1 Possible duplicate of How to fix getImageData() error The canvas has been tainted by cross-origin data? – user47589 Commented Jun 13, 2018 at 18:30
• What is oIMG? If it's an Image object (i.e., an <img> DOM object), what is its src property? – apsillers Commented Jun 13, 2018 at 19:08
• @apsillers fabric.Image loads image from my url (generated by blob), and oIMG is new object after download image – IlFiltsin Commented Jun 13, 2018 at 19:17

 |  Show 5 more ments

1 Answer 1

Sorted by: Reset to default 9

This is a known bug in Chrome: Canvas is tainted after drawing SVG including <foreignObject>. The current workaround is noted in that thread:

It seems that in the meantime the canvas is not tainted if the same picture has been loaded from a data URI.

This provides for a workaround.

You can turn your blob into a data: URL via FileReader like so:

var svg = '...';
var svgBlob = new Blob([svg], {type: 'image/svg+xml'});

var reader = new FileReader();
reader.readAsDataURL(svgBlob);

reader.onload = function(e) {
    var svgDataURL = e.target.result;
    fabric.Image.fromURL(svgDataURL, function(oIMG) {
        canvas.add(oIMG);
    });
}

本文标签： javascriptWhy does this SVGholding blob URL taint the canvas in ChromeStack Overflow