298

I want to save my canvas to a img. I have this function:

function save() {
    document.getElementById("canvasimg").style.border = "2px solid";
    var dataURL = canvas.toDataURL();
    document.getElementById("canvasimg").src = dataURL;
    document.getElementById("canvasimg").style.display = "inline";
}

It gives me error:

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

What should I do?

4

15 Answers 15

271

For security reasons, your local drive is declared to be "other-domain" and will taint the canvas.

(That's because your most sensitive info is likely on your local drive!).

While testing try these workarounds:

  • Put all page related files (.html, .jpg, .js, .css, etc) on your desktop (not in sub-folders).

  • Post your images to a site that supports cross-domain sharing (like dropbox.com or GitHub). Be sure you put your images in dropbox's public folder and also set the cross origin flag when downloading the image (var img=new Image(); img.crossOrigin="anonymous" ...)

  • Install a webserver on your development computer (IIS and PHP web servers both have free editions that work nicely on a local computer).

10
  • 36
    Thanks, setting the img.crossOrigin property helped me!
    – zumek
    Dec 1, 2014 at 9:48
  • 6
    @markE - I loaded image data from localStorage instead of loading from file or any url, then did some manipulation to it like adding a text. Then tried to sotre back it to localStorage using toDataURL(). But it shows "Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported". In this case I am not using any exteranl file or url to get a cross domain issue. Then why it is resulting in this error?
    – Sajith
    Feb 25, 2015 at 5:19
  • 2
    @Saijth - You may want to verify the path used for the images. I had this problem as well because I was testing directly accesing my local virtual server thru its IP (127.0.x.x/) but some of the images were linked thru the domain (localhost/). Once I used the localhost instead it worked out. So make sure you arent running into something like that.
    – Victor D.
    May 25, 2015 at 21:16
  • 2
    (1) View it from xampp webserver, localhost/file instead of c:/localdisk/file; then chrome won't complain about Security Error. (2) Or use this flag when starting chrome: --allow-file-access-from-files
    – mosh
    Aug 22, 2016 at 7:48
  • 1
    Just adding another possible problem: if you're trying to export a canvas that contains a svg with a ForeignObject, some browsers will mark it as tainted.
    – HairyFotr
    Oct 7, 2018 at 11:03
192

In the img tag set crossorigin to Anonymous.

<img crossorigin="anonymous" />
7
  • 92
    But what to do in the case of html5 canvas , not img elements Oct 4, 2016 at 6:57
  • 17
    In the case of a canvas element, the source of the problem is always with some image (or images) that you're drawing onto it. So you just need to track down the image and set its crossOrigin attribute as indicated, before loading it. Aug 16, 2017 at 11:53
  • <img crossorigin="Anonymous"> works well with html2canvas(element.nativeElement, {useCORS: true}) .then(canvas => { const dataUrl = canvas.toDataURL('image/png'); })
    – Rob
    Oct 13, 2018 at 20:54
  • 5
    It's worth noting that setting image.crossOrigin = 'Anonymous' won't help once the image has been loaded. But if a reload is an option you can go for something like: document.querySelectorAll('img').forEach(image => { image.crossOrigin = 'Anonymous'; image.src += ' '; }). See also this article on MDN for reference. Sep 10, 2019 at 10:03
  • 2
    This didn't work for me as all lowercase, but crossOrigin worked.
    – Ryan
    Mar 14, 2020 at 19:52
41

If you're using ctx.drawImage() function, you can do the following:

var img = loadImage('../yourimage.png', callback);

function loadImage(src, callback) {
    var img = new Image();

    img.onload = callback;
    img.setAttribute('crossorigin', 'anonymous'); // works for me

    img.src = src;

    return img;
}

And in your callback you can now use ctx.drawImage and export it using toDataURL

5
  • 12
    This did not work for me. Still getting the Tainted canvases may not be exported. error message.
    – Sam Sverko
    Sep 19, 2019 at 20:07
  • 4
    it works for me. thanks. @SamSverko make sure set the attribute before img.src.
    – aijogja
    May 25, 2020 at 23:03
  • Doesn't work. Says blocked by CORS policy
    – Aquaphor
    Sep 16, 2021 at 1:14
  • as been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. The FetchEvent for "img.
    – CS QGB
    Jan 2, 2022 at 7:29
  • img.setAttribute('crossorigin', 'anonymous'); ✅ work well img.crossorigin = 'anonymous'; ❌ not work
    – xgqfrms
    Nov 23, 2022 at 14:57
40

If someone views on my answer, you maybe in this condition:

1. Trying to get a map screenshot in canvas using openlayers (version >= 3)
2. And viewed the example of exporting map
3. Using ol.source.XYZ to render map layer

Bingo!

Using ol.source.XYZ.crossOrigin = 'Anonymous' to solve your confuse. Or like following code:

 var baseLayer = new ol.layer.Tile({
     name: 'basic',
     source: new ol.source.XYZ({
         url: options.baseMap.basic,
         crossOrigin: "Anonymous"
     })
 });

In OpenLayers6, something is changed with ES6. However, the code is similar.

import { XYZ } from 'ol/source'
import { Tile as TileLayer } from 'ol/layer'
const baseLayer = new TileLayer({
    name : 'basic',
    source: new XYZ({
      url: 'example.tile.com/x/y/z', // your tile url
      crossOrigin: 'Anonymous',
      // remove this function config if the tile's src is nothing to decorate. It's usually to debug the src
      tileLoadFunction: function(tile, src) {
        tile.getImage().src = src
      }
    })
  })

What's more, don't forget to set the access-control-allow-origin: * or access-control-allow-origin: [your whitelist origins] in the response header if the tiles are requested in your own server.
Like this: enter image description here More details, and this one

5
  • 2
    fantastic. Useful for all sources, like TileImage and such as well.
    – Phil
    Oct 18, 2018 at 22:41
  • 1
    Fatastic! Exactly what I was looking for myself, easy fix for an OpenLayers demo Im doing.
    – Marc
    Dec 17, 2019 at 22:37
  • I'm using vector tile layers and after add this propery to source but it is not working too! Apr 29, 2020 at 12:59
  • I'm using ol6. but its not working , No change after adding this line
    – Adithya
    Oct 6, 2020 at 9:05
  • @JayCummins, I add the OL6 code. It maybe helps you.
    – sknight
    Apr 1, 2021 at 10:56
28

In my case I was drawing onto a canvas tag from a video with something like canvas.drawImage(video, 0, 0). To address the tainted canvas error I had to do two things:

<video id="video_source" crossorigin="anonymous">
    <source src="http://crossdomain.example.com/myfile.mp4">
</video>
  • Ensure Access-Control-Allow-Origin header is set in the video source response (proper setup of crossdomain.example.com)
  • Set the video tag to have crossorigin="anonymous"
14

I resolved the problem using useCORS: true option

 html2canvas(document.getElementsByClassName("droppable-area")[0], { useCORS:true}).then(function (canvas){
        var imgBase64 = canvas.toDataURL();
        // console.log("imgBase64:", imgBase64);
        var imgURL = "data:image/" + imgBase64;
        var triggerDownload = $("<a>").attr("href", imgURL).attr("download", "layout_"+new Date().getTime()+".jpeg").appendTo("body");
        triggerDownload[0].click();
        triggerDownload.remove();
    });
2
  • only solution here that works for me!
    – lefrost
    Jun 6, 2022 at 21:19
  • How is html2canvas library related to OP's question? =D
    – Klesun
    Mar 22 at 18:28
11

Seems like you are using an image from a URL that has not set correct Access-Control-Allow-Origin header and hence the issue.. You can fetch that image from your server and get it from your server to avoid CORS issues..

5
  • 1
    Could you possible be more precise about your answer, because im not really know all that concept . How do i fetch that image from my server? Mar 28, 2014 at 12:53
  • from where are you fetching that image, is it from your server or some other one? Mar 28, 2014 at 12:57
  • It goes like this : loadImage("example.jpg", 0, 0, 500, 300); I can put random image url or image on the same folder in my computer, its still the same Mar 28, 2014 at 12:59
  • yes, but i just created image on paint and it still is the same Mar 28, 2014 at 13:38
  • 2
    I gave Access-Control-Allow-Origin:* for the file, but still it is showing the error Jul 12, 2016 at 11:13
5

Check out CORS enabled image from MDN. Basically you must have a server hosting images with the appropriate Access-Control-Allow-Origin header.

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>

You will be able to save those images to DOM Storage as if they were served from your domain otherwise you will run into security issue.

var img = new Image,
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    src = "http://example.com/image"; // insert image url here

img.crossOrigin = "Anonymous";

img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage( img, 0, 0 );
    localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
}
img.src = src;
// make sure the load event fires for cached images too
if ( img.complete || img.complete === undefined ) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
}

2
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review Nov 24, 2017 at 7:59
  • Thanks for the notice. I just add the content from the MDN link:)
    – BerlinaLi
    Nov 27, 2017 at 2:15
4

This one can work smoothly in laravel.

First of all, you need to convert tainted canvas to blob. after that, you can upload a blob to serve and save it as an image. Return image URL in ajax call.

Here is an ajax call to upload canvas blob.

$("#downloadCollage").click(function(){
  canvas.toBlob(function(blob){

    var formDataToUpload = new FormData();
    formDataToUpload.append("_token", "{{ csrf_token() }}");
    formDataToUpload.append("image",  blob);

    $.ajax({
        url:"{{ route('selfie_collage_upload') }}",
        data: formDataToUpload,
        type:"POST",
        contentType:false,
        processData:false,
        cache:false,
        dataType:"json",
        error:function(err){
            console.error(err);
        },
        success:function(data){
            window.location.href= data.url;
        },
        complete:function(){
        }
    });
  },'image/png');
  link.click();
});
2
  • Im getting an error "canvas is not defined" and I cant figure out how to solve it
    – user17693898
    Jul 15, 2022 at 18:49
  • 1
    @LaurențiuCozma here into my code, the canvas is a variable. for example canvas = document.getElementById('my-canvas'); Jul 21, 2022 at 9:44
4

Just as a build on @markE's answer. You can serve your website via a local server. You won't have this error on a local server.

If you have PHP installed on your computer (some older MacOS versions has it preinstalled):

  1. Open up your terminal/cmd
  2. Navigate into the folder where your website files are
  3. While in this folder, run the command php -S localhost:3000
  4. Open up your browser and in the URL bar go to localhost:3000. Your website should be running there.

or


If you have Node.js installed on your computer:

  1. Open up your terminal/cmd
  2. Navigate into the folder where your website files are
  3. While in this folder, run the command npm init -y
  4. Run npm install live-server -g or sudo npm install live-server -g on a mac
  5. Run live-server and it should automatically open up a new tab in the browser with your website open.

Note: remember to have an index.html file in the root of your folder or else you might have some issues.

6
  • Mac OS does NOT have php pre-installed. I have macos and it has nothing about PHP. If you have php, you or someone else installed it. Dec 21, 2021 at 8:27
  • That's not true @LukasLiesis. A simple Google search will show you that it is: google.com/…. All the Macs I've ever worked on had it preinstalled. If you have Big Sur installed as the default (not as an update), you might need to activate it (although I didn't have to): google.com/….
    – Ludolfyn
    Dec 21, 2021 at 18:30
  • In the terminal you can run php --version to see what version you have installed.
    – Ludolfyn
    Dec 21, 2021 at 18:30
  • Go get new mac, run your apache daemon script which is referenced in the article and you will see PHP is not part of mac. Unless you run some old version of OS, which is never a good idea, at least on mac. The line about Apache's php module is not even in httpd.conf, but seems like it was there on older OSes. There is a line with comment: #PHP was deprecated in macOS 11 and removed from macOS 12 Both of your linked articles are just wrong. php --version says command not found, while php is not part of mac :) Dec 22, 2021 at 1:25
  • As a matter of fact I have a brand new macbook that I bought a month ago and it still has PHP preinstalled and activated. PHP worked right off the bat. The only thing I can note is that I chose an intel chip and not the M1 chip (for compatibility with some of the software I'm using). No one said it's part of mac. I said it comes preinstalled, which it does :) Although when you check the version of PHP in the terminal it does print a warning saying—and I quote: "Future versions of macOS will not include PHP." Here's a screenshot: imgur.com/a/ZZL1SwN
    – Ludolfyn
    Dec 30, 2021 at 1:05
3

tl;dr

This issue made me crazy and solved it by loading image with crossOrigin="anonymous" before rendering canvas.

Detailed and too-specific solution

For those who uses React + canvg + Amazon S3 and want to export svg as png via canvas, this could be useful.

First, create a React hook to detect preloading cross-origin images:

// useLoadCrossOriginImage.tsx

import { useReducer, useMemo } from 'react'

export function useLoadCrossOriginImage(imageUrls: string[]) {
  const [count, increase] = useReducer((count) => count + 1, 0)

  const render = () =>
    imageUrls.map((url) => (
      <img
        src={url}
        crossOrigin="anonymous"
        onLoad={increase}
        className="hidden"
      />
    ))

  const loaded = useMemo(() => count === imageUrls.length, [count, imageUrls])

  return {
    render,
    loaded,
  }
}

Then, render svg lazily after loading images:

// ImagePreview.tsx

import { useLoadCrossOriginImage } from './useLoadCrossOriginImage'

// This is usually state from parent component
const imageUrls = [
  'https://s3-ap-northeast-1.amazonaws.com/bucket/xxxxxxx.png',
  'https://s3-ap-northeast-1.amazonaws.com/bucket/yyyyyyy.png',
]

export const ImagePreview = () => {
  const { loaded, render } = useLoadCrossOriginImage(imageUrls)

  return (
    <div className="border border-slate-300" onClick={onClick}>
      {render()}
      {loaded && (
        <svg xmlns="http://www.w3.org/2000/svg">
          {imageUrls.map((imageUrl) => (
            <image key={el.id} href={imageUrl} />
          ))}
        </svg>
      )}
      <canvas className="hidden" />
    </div>
  )
}

Finally, you can convert the canvas element into png:

const canvas = document.querySelector('canvas')!
const ctx = canvas.getContext('2d')!
const svg = document.querySelector('svg')!
const v = Canvg.fromString(ctx, svg.outerHTML, { anonymousCrossOrigin: true })

Finally, the S3 cors policy should be like this:

{
  "CORSRules": [
    {
      "ID": "s3-cors-policy",
      "AllowedHeaders": ["*"],
      "AllowedMethods": ["GET", "HEAD"],
      "AllowedOrigins": ["*"],
      "ExposeHeaders": []
    }
  ]
}

Please leave "MaxAgeSeconds" empty.

1

I also solved this error by adding useCORS : true, in my code like -

html2canvas($("#chart-section")[0], {
        useCORS : true,
        allowTaint : true,
        scale : 0.98,
        dpi : 500,
        width: 1400, height: 900
    }).then();
1

In my case I was testing it from my desktop, having CORS error even after saving image locally to sub-folder.

Solution:

Moved the folder to local server WAMP in my case. Worked perfect from local server.

Note: Works only when you have saved image locally.

0

For anyone who still encountering the same issue from S3 even after applying the server cross-origin settings, it probably a browser caching issue. So you need to make sure to disable the caching and test again, you can do that from the browser dev-tools -> network tab -> click on disable cash option -> try again:

chrome dev-tools caching option

0

Here is how I solved this issue. The issue is because you cannot have an external image URL inside of your canvas. You must fetch the image and create a local copy of it. Then you can add the image and its url.

fetch("https://i.imgur.com/fHyEMsl.jpg")
  .then(result => result.blob())
  .then(blob => {
      const url = URL.createObjectURL(blob);
      // set image url
   });

Not the answer you're looking for? Browse other questions tagged or ask your own question.