1. Dom
  2. Pytanie i odpowiedź
  3. Płaszczyzna została skażona danymi pochodzącymi z różnych źródeł, pracując około

Płaszczyzna została skażona danymi pochodzącymi z różnych źródeł, pracując około

2013-08-27 7 views
9

w pisaniu skryptu (lub edytowaniu i hakowaniu razem), aby edytować wygląd obrazów na stronie. Znam podstawy javascript, ale to mój pierwszy raz, gdy patrzę na płótno. więc pokrywa się ze mnąPłaszczyzna została skażona danymi pochodzącymi z różnych źródeł, pracując około

dostaję ten błąd:

Nie można uzyskać dane obrazu z płótna, ponieważ płótno zostało skażone przez dane przekroju pochodzenia.

więc heres mój urywek kodu rzuca błąd:

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) {}

teraz znalazłem ten post:

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

ale nie mam pojęcia jak to zrobić pasuje do moich potrzeb ..

Wiem, że wszystko dzięki bezpieczeństwu i temu wszystkiemu - ale czy jest jakieś dzieło, żeby to się stało?

Dzięki

EDIT

Oh wait .. jest błąd, ponieważ nie można getImageData .. więc jest tam z dala, aby to 'lokalne'

Źródło

2013-08-27 Dustin Silk

+0

Nie, nie można obejść zabezpieczeń. Może spojrzeć na [sposoby obejścia SPO] (http: // stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy) – Bergi

+0

Znalazłem to .. http://www.maxnov.com/getimagedata/ Postaram się wymyślić to - wydaje się być we właściwym kierunku. –

+0

@ Ken-AbdiasSoftware: Nie, nie możesz. To demo również używa CORS. – Bergi

Odpowiedz

23

Aby zaspokoić CORS, ty można przechowywać obrazy na stronie przyjaznej dla CORS, np. dropbox.com

W takim przypadku błąd bezpieczeństwa nie zostanie wywołany, jeśli zdefiniujesz image.crossOrigin = "anonymous":

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

Oto kod i Fiddle: 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>

Źródło

2013-08-27 21:11:17 markE

+0

niesamowite dzięki. Wezmę to pierwszy raz rano, żeby sprawdzić, czy to wystarczy. –

0

Włączenie CORS po stronie serwera jest wyjście, ale to, czy masz dostęp do strony serwera. W ten sposób serwer obsługuje obrazy włączone do CORS.

Źródło

2015-03-07 22:04:45 chuqdennis

4

Nie mam dość reputacji, aby dodać komentarz (ale mam wystarczająco dużo, aby odpowiedzieć na pytanie, hę?), Chciałem tylko dodać do odpowiedzi markE, że musiałem skapitalizować Anonim.

image.crossOrigin = "Anonymous"

Źródło

2015-04-01 00:21:27

2

Spróbuj dodać crossorigin="anonymous" do elementu obrazu. Na przykład:

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

Źródło

2017-03-11 07:45:23 mmla

Powiązane problemy

 Powiązane problemy