Voglio salvare la mia tela su un img. Ho questa funzione:

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

Mi dà errore:

Uncaught SecurityError: Impossibile eseguire "toDataURL" su "HTMLCanvasElement": non è possibile esportare i canvas contaminati.

Cosa dovrei fare?

Per motivi di sicurezza, l'unità locale viene dichiarata "altro dominio" e contaminerà l'area di disegno.

(Questo perché le tue informazioni più sensibili sono probabilmente sul tuo disco locale!).

Durante il test prova queste soluzioni alternative:

• Inserisci tutti i file relativi alla pagina (.html, .jpg, .js, .css, ecc.) Sul desktop (non in sottocartelle).

• Pubblica le tue immagini su un sito che supporta la condivisione tra domini (come dropbox.com). Assicurati di mettere le tue immagini nella cartella pubblica di Dropbox e di impostare anche il flag di origine incrociata durante il download dell'immagine (var img = new Image (); img.crossOrigin = "anonymous" ...)

• Installa un server web sul tuo computer di sviluppo (entrambi i server Web IIS e PHP hanno edizioni gratuite che funzionano bene su un computer locale).

Nel tag img impostare crossorigin su Anonimo.

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

Se qualcuno visualizza la mia risposta, forse sei in questa condizione:

1. Cercare di ottenere uno screenshot della mappa nell'area di disegno usando openlayer (versione> = 3)
2. E visualizzato l'esempio dell'esportazione della mappa
3. Usare ol.source.XYZ per eseguire il rendering del livello della mappa

Bingo!

Usando ol.source.XYZ.crossOrigin = 'Anonimo' per risolvere il tuo confuso. O come il seguente codice:

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

Se si utilizza la ctx.drawImage()funzione, è possibile effettuare le seguenti operazioni:

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 nel tuo callback ora puoi usarlo ctx.drawImageed esportarlo usandotoDataURL

Nel mio caso stavo disegnando su un tag di tela da un video. Per risolvere l'errore di tela contaminato ho dovuto fare due cose:

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

• Assicurati che l'intestazione Access-Control-Allow-Origin sia impostata nella risposta della sorgente video (impostazione corretta di crossdomain.example.com)
• Imposta il tag video per avere crossorigin = "anonimo"

Sembra che tu stia utilizzando un'immagine da un URL che non ha impostato l'intestazione Access-Control-Allow-Origin corretta e quindi il problema. Puoi recuperare quell'immagine dal tuo server e ottenerla dal tuo server per evitare problemi CORS.

Ho risolto il problema utilizzando l' useCORS: trueopzione

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

Guarda [Immagine abilitata CORS] [1] da MDN. Fondamentalmente è necessario disporre di un server che ospita immagini con l'intestazione Access-Control-Allow-Origin appropriata.

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

Sarai in grado di salvare quelle immagini su DOM Storage come se fossero state pubblicate dal tuo dominio, altrimenti potresti riscontrare problemi di sicurezza.

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

Proprio come una risposta alla risposta di @ markE, se si desidera creare un server locale. Non avrai questo errore su un server locale.

Se hai PHP installato sul tuo computer:

1. Apri il tuo terminale / cmd
2. Passare alla cartella in cui si trovano i file del sito Web
3. Mentre sei in questa cartella, esegui il comando php -S localhost:3000← Nota la "S" maiuscola
4. Apri il browser e nella barra degli URL vai su localhost: 3000 . Il tuo sito web dovrebbe essere in esecuzione lì.

o

Se hai Node.js installato sul tuo computer:

1. Apri il tuo terminale / cmd
2. Passare alla cartella in cui si trovano i file del sito Web
3. In questa cartella, esegui il comando npm init -y
4. Esegui npm install live-server -go sudo npm install live-server -gsu un mac
5. Esegui live-servere dovrebbe aprire automaticamente una nuova scheda nel browser con il tuo sito Web aperto.

Nota: ricorda di avere un file index.html nella cartella principale della cartella, altrimenti potresti avere dei problemi.

Ho anche risolto questo errore aggiungendo il useCORS : true,mio codice come -

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