Quero salvar minha tela em um img. Eu tenho esta função:

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

Isso me dá erro:

Não detectado SecurityError: falha ao executar 'toDataURL' em 'HTMLCanvasElement': telas contaminadas não podem ser exportadas.

O que devo fazer?

Por motivos de segurança, sua unidade local é declarada como "outro domínio" e manchará a tela.

(Isso ocorre porque suas informações mais sensíveis provavelmente estão em sua unidade local!).

Durante o teste, tente estas soluções alternativas:

• Coloque todos os arquivos relacionados à página (.html, .jpg, .js, .css, etc) na área de trabalho (não nas subpastas).

• Publique suas imagens em um site compatível com compartilhamento entre domínios (como dropbox.com). Coloque suas imagens na pasta pública do dropbox e também defina o sinalizador de origem cruzada ao baixar a imagem (var img = nova imagem (); img.crossOrigin = "anônimo" ...)

• Instale um servidor da web no seu computador de desenvolvimento (os servidores da Web IIS e PHP possuem edições gratuitas que funcionam bem em um computador local).

Na tag img, configure crossorigin para Anonymous.

<img crossorigin="anonymous"></img>

Se alguém visualizar minha resposta, talvez você esteja nesta condição:

1. Tentando obter uma captura de tela do mapa na tela usando openlayers (versão> = 3)
2. E visualizou o exemplo da exportação de mapa
3. Usando ol.source.XYZ para renderizar a camada do mapa

Bingo!

Usando ol.source.XYZ.crossOrigin = 'Anônimo' para resolver seu confuso. Ou como o seguinte código:

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

Se você estiver usando a ctx.drawImage()função, poderá fazer o seguinte:

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;
}

E no seu retorno de chamada, agora você pode usá ctx.drawImage-lo e exportá-lo usandotoDataURL

No meu caso, eu estava desenhando uma tag de tela de um vídeo. Para resolver o erro de tela contaminada, tive que fazer duas coisas:

<video id="video_source" crossorigin="anonymous">
    <source src="http://crossdomain.example.com/myfile.mp4">
</video>

• Verifique se o cabeçalho Access-Control-Allow-Origin está definido na resposta da fonte de vídeo (configuração adequada de crossdomain.example.com)
• Defina a tag de vídeo como crossorigin = "anonymous"

Parece que você está usando uma imagem de um URL que não definiu o cabeçalho correto de Controle de acesso-permissão de origem e, portanto, o problema. Você pode buscar essa imagem no servidor e obtê-la no servidor para evitar problemas de CORS.

Resolvi o problema usando a useCORS: trueopção

 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();
    });

Confira [imagem ativada para CORS] [1] no MDN. Basicamente, você deve ter um servidor que hospeda imagens com o cabeçalho apropriado Access Control Control Allow Allow Origin.

<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>

Você poderá salvar essas imagens no armazenamento DOM como se elas fossem veiculadas em seu domínio, caso contrário, você terá um problema de segurança.

var img = new Image,
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    src = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"; // 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;
}

Assim como a resposta da @ markE - se você deseja criar um servidor local. Você não terá esse erro em um servidor local.

Se você possui o PHP instalado no seu computador:

1. Abra seu terminal / cmd
2. Navegue até a pasta onde estão os arquivos do site
3. Enquanto estiver nesta pasta, execute o comando php -S localhost:3000 ← Observe o 'S' maiúsculo
4. Abra o navegador e, na barra de URL, vá para localhost: 3000 . Seu site deve estar sendo executado lá.

ou

Se você tiver o Node.js instalado no seu computador:

1. Abra seu terminal / cmd
2. Navegue até a pasta onde estão os arquivos do site
3. Enquanto estiver nesta pasta, execute o comando npm init -y
4. Executar npm install live-server -gousudo npm install live-server -g em um mac
5. Execute live-servere ele deve abrir automaticamente uma nova guia no navegador com o site aberto.

Nota: lembre-se de ter um arquivo index.html na raiz da sua pasta; caso contrário, você pode ter alguns problemas.

Eu também resolvi esse erro adicionando useCORS : true,no meu código como -

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