1. casa
  2. Domanda e risposta
  3. la tela è stata macchiata da dati di origine incrociata intorno allo

la tela è stata macchiata da dati di origine incrociata intorno allo

2013-08-27 12 views
9

im scrivendo uno script (o modificando e hackerando le cose insieme) per modificare l'aspetto delle immagini su una pagina. Conosco le basi di javascript ma questa è la prima volta che guardo la tela. in modo da portare con mela tela è stata macchiata da dati di origine incrociata intorno allo

sto ottenendo questo errore:

Impossibile ottenere dati di immagine dalla tela, perché la tela è stata contaminata da dati cross-origine.

così heres il mio frammento di codice gettando l'errore:

var canvas = document.createElement('canvas'), 
      context = canvas.getContext('2d'), 
      height = img.naturalHeight || img.offsetHeight || img.height, 
      width = img.naturalWidth || img.offsetWidth || img.width, 
      imgData; 


     canvas.height = height; 
     canvas.width = width; 
     context.drawImage(img, 0, 0); 

     console.log(context); 
     try { 
      imgData = context.getImageData(0, 0, width, height); 
     } catch(e) {}

Ora ho trovato questo post:

http://bolsterweb.com/2012/06/grabbing-image-data-external-source-canvas-element/

ma non ho idea di come renderla adatta alle mie esigenze ..

So che è tutto merito della sicurezza e tutto il resto, ma c'è un lavoro da fare per far sì che tutto accada?

Grazie

EDIT

Oh aspetta .. l'errore è perché non si può getImageData .. quindi è lì via per rendere più 'locale'

fonte

2013-08-27 Dustin Silk

+0

No, non è possibile aggirare la sicurezza. Forse dare un'occhiata a [modi per aggirare il SOP] (http: // StackOverflow.it/questions/3076414/way-to-circum-the-same-origin-policy) – Bergi

+0

Ho trovato questo .. http://www.maxnov.com/getimagedata/ Cercherò di capirlo - sembra essere nella giusta direzione. –

+0

@ Ken-AbdiasSoftware: No, non puoi. Quella demo usa anche CORS. – Bergi

risposta

23

Per soddisfare CORS, è può ospitare le tue immagini su un sito CORS amichevole come dropbox.com

Quindi l'errore di sicurezza non verrà attivato se si speify image.crossOrigin = "anonymous":

var image=new Image(); 
    image.onload=function(){ 
    } 
    image.crossOrigin="anonymous"; 
    image.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png";

Ecco codice e un violino: http://jsfiddle.net/m1erickson/4djSr/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    #canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    var image=new Image(); 
    image.onload=function(){ 
     ctx.drawImage(image,0,0); 

     // desaturation colors 
     var imgData=ctx.getImageData(0,0,canvas.width,canvas.height); 
     var data=imgData.data; 

     for(var i = 0; i < data.length; i += 4) { 
      var grayscale= 0.33*data[i]+0.5*data[i+1]+0.15*data[i+2]; 
      data[i]=grayscale; 
      data[i+1]=grayscale; 
      data[i+2]=grayscale; 
     } 

     // write the modified image data 
     ctx.putImageData(imgData,0,0); 

    } 
    image.crossOrigin="anonymous"; 
    image.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png"; 



}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=140 height=140></canvas> 
</body> 
</html>

fonte

2013-08-27 21:11:17 markE

+0

fantastico grazie. Mi ci rimetterò dentro per prima cosa al mattino per vedere se questo farà il trucco. –

0

Abilitazione CORS sul lato server è una via d'uscita, ma questo è se si ha accesso al lato server. In questo modo il server serve immagini abilitate CORS.

fonte

2015-03-07 22:04:45 chuqdennis

4

Non ho abbastanza reputazione per aggiungere effettivamente un commento (ma ho abbastanza per rispondere alla domanda, eh ??), volevo solo aggiungere alla risposta di markE che dovevo capitalizzare Anonymous.

image.crossOrigin = "Anonymous"

fonte

2015-04-01 00:21:27

2

Prova ad aggiungere crossorigin="anonymous" all'elemento immagine. Ad esempio

<img src="http://example.com/foo.jpg" crossorigin="anonymous"/>

fonte

2017-03-11 07:45:23 mmla

Problemi correlati

 Problemi correlati