In un'applicazione JS standalone lato client, sto cercando di renderlo così posso chiamare aDataURL() su una tela su cui ho disegnato alcune immagini specificate da un URL. Cioè posso inserire in una casella di testo l'url di qualsiasi immagine (ospitata su, diciamo, imgur) che voglio disegnare sulla tela, fare clic su un pulsante "disegna" e disegnerà sulla tela. L'utente finale dovrebbe essere in grado di salvare il rendering finale come una singola immagine, per questo sto usando toDataURL().Disegnare immagini su tela con img.crossOrigin = "Anonimo" non funziona
In ogni caso, fino a quando non risolvono il problema fastidioso "l'operazione non è sicura" (accidenti, stai per dire all'utente finale che cosa possono e non possono fare con i propri dati?) Ho seguito una soluzione che diceva per aggiungere l'immagine al DOM e impostarne la proprietà crossOrigin su "Anonmyous" e quindi disegnarla sull'area di disegno.
Ecco una versione completa di lavoro semplificata del mio codice (ma in realtà ci saranno molte altre caratteristiche):
<!DOCTYPE html5>
<html>
<head>
<style>
#canvas {border:10px solid green;background-color:black;}
#imgbox {border:2px solid black;}
</style>
</head>
<body>
<canvas id="canvas" width=336 height=336></canvas>
<br><br>
<input size=60 id="imgbox">
<input type="submit" value="Draw" onclick=draw()>
<script>
function draw() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var img = new Image();
img.src = document.getElementById("imgbox").value;
img.crossOrigin = "Anonymous";
context.drawImage(img, 40, 40);
}
</script>
</body>
</html>
senza la linea img.crossOrigin = "Anonymous";, potrei ingresso http://i.imgur.com/c2wRzfD.jpg nella casella di testo e fare clic su disegnare e sarebbe lavoro. Tuttavia, non appena ho aggiunto quella linea, l'intera faccenda si è spezzata e non verrà nemmeno disegnata per niente sulla tela.
Cosa devo modificare per risolvere questo problema? Ho davvero bisogno di essere in grado di implementare la funzionalità per l'utente finale per salvare la loro immagine finale ed è estremamente fastidioso che le persone che hanno scritto la specifica html5 abbiano appositamente introdotto questo bug.
Sì! Questo ha fatto il trucco. Grazie! – Joey
Aspetta, ora funziona solo con alcune immagini. Le immagini di imgur funzionano ma alcune immagini casuali di ricerca di immagini di Google non verranno ancora disegnate sulla tela. Ad esempio, http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png non verrà disegnato affatto. Qualche idea del perché? – Joey
@Si può solo * richiedere * l'utilizzo CORS, il server può rifiutare la richiesta che renderà il caricamento dell'immagine fallire. È necessario verificare quali server consentono e quali no. Per coloro che non consentono l'uso di CORS, basta rimuovere la richiesta (riga crossOrigin). Per le immagini che non è possibile caricare utilizzando la richiesta CORS, è necessario copiarle sul proprio server (come nella pagina) o spostarle su un altro server che consenta l'uso cors. (spero che abbia senso) – K3N