Toile teintée de données d’origine croisée

Vous ne pouvez pas réinitialiser le drapeau crossOrigin une fois qu’il est corrompu, mais si vous savez au préalable quelle est l’image, vous pouvez la convertir en une URL de données. Pour plus d’informations, reportez-vous à la section Dessin d’une image à partir d’une URL de données.

Mais non, vous ne pouvez et ne devriez pas utiliser getImageData () à partir de sources externes qui ne prennent pas en charge CORS.

Bien que la question soit très ancienne, le problème persiste et il n’ya que peu d’internet pour le résoudre. Je suis venu avec une solution que je veux partager:

Vous pouvez utiliser l’image (ou la vidéo) sans l’atsortingbut crossorigin défini au préalable et vérifier si vous pouvez obtenir une demande HEAD via la même ressource via AJAX. Si cela échoue, vous ne pouvez pas utiliser la ressource. s’il réussit, vous pouvez append l’atsortingbut et redéfinir la source de l’image / vidéo avec un horodatage attaché qui le rechargera.

Cette solution de contournement vous permet d’afficher votre ressource à l’utilisateur et de simplement masquer certaines fonctions si CORS n’est pas pris en charge.

HTML:

JavaScript:

 var target = $("#testImage")[0]; currentSrcUrl = target.src.split("_t=").join("_t=1"); // add a leading 1 to the ts $.ajax({ url: currentSrcUrl, type:'HEAD', withCredentials: true }) .done(function() { // things worked out, we can add the CORS atsortingbute and reset the source target.crossOrigin = "anonymous"; target.src = currentSrcUrl; console.warn("Download enabled - CORS Headers present or not required"); /* show make-image-out-of-canvas-functions here */ }) .fail(function() { console.warn("Download disabled - CORS Headers missing"); /* ... or hide make-image-out-of-canvas-functions here */ }); 

Testé et fonctionnant dans IE10 + 11 et les versions actuelles de Chrome 31, FF25 et Safari 6 (Desktop). Dans IE10 et FF, vous pouvez rencontrer un problème si et seulement si vous essayez d’accéder à des fichiers http à partir d’un script https. Je ne sais pas encore de solution de rechange pour cela.

MISE À JOUR Jan 2014:

Les en-têtes CORS requirejs pour cela devraient être les suivants (syntaxe de configuration Apache):

 Header set Access-Control-Allow-Origin "*" Header set Access-Control-Allow-Headers "referer, range, accept-encoding, x-requested-with" 

l’en-tête x est requirejs pour la demande ajax uniquement. Il n’est pas utilisé par tous mais par la plupart des navigateurs, autant que je sache.

Il convient également de noter que le CORS s’appliquera si vous travaillez localement, que la ressource soit dans le même répertoire que le fichier index.html vous travaillez. Pour moi, cela signifie que les problèmes de CORS ont disparu lorsque je les ai téléchargés sur mon serveur, car ils ont un domaine.

Vous pouvez utiliser base64 de l’image sur le canevas. Lors de la conversion en base64, vous pouvez utiliser une URL de proxy ( https://cors-anywhere.herokuapp.com/ ) avant le chemin de l’image pour éviter les problèmes d’origine croisée.

vérifier tous les détails ici

https://stackoverflow.com/a/44199382/5172571

 var getDataUri = function (targetUrl, callback) { var xhr = new XMLHttpRequest(); xhr.onload = function () { var reader = new FileReader(); reader.onloadend = function () { callback(reader.result); }; reader.readAsDataURL(xhr.response); }; var proxyUrl = 'https://cors-anywhere.herokuapp.com/'; xhr.open('GET', proxyUrl + targetUrl); xhr.responseType = 'blob'; xhr.send(); }; getDataUri(path, function (base64) { // base64 availlable here })