GetImageData () hatası nasıl düzeltilir Kanvas, çapraz kaynak verileriyle lekelenmiş?

Kodum localhost'umda çok iyi çalışıyor ancak sitede çalışmıyor.

Bu hatayı konsoldan aldım, bu satır için .getImageData(x,y,1,1).data:

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 

kodumun bir parçası:

jQuery.Event.prototype.rgb=function(){
        var x =  this.offsetX || (this.pageX - $(this.target).offset().left),y =  this.offsetY || (this.pageY - $(this.target).offset().top);
        if (this.target.nodeName!=="CANVAS")return null;
        return this.target.getContext('2d').getImageData(x,y,1,1).data;
    }

Not: resim url'm (src) bir alt etki alanı url'sinden

Başkalarının da söylediği gibi, çapraz bir alandan yükleyerek tuvali "lekeliyorsunuz".

https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

Ancak, bunu basitçe ayarlayarak önleyebilirsiniz:

img.crossOrigin = "Anonymous";

Bu yalnızca uzak sunucu aşağıdaki üstbilgiyi uygun şekilde ayarlarsa çalışır:

Access-Control-Allow-Origin "*"

Dropbox dosya seçici "doğrudan bağlantı" seçeneğini kullanarak bu büyük bir örnektir. Bunu oddprints.com'da , uzak dropbox resim url'sindeki resimleri tuvalime taşımak için kullanıyorum ve ardından resim verilerini sunucuma geri gönderiyorum . Hepsi javascript'te

Üstbilginin .setAttribute('crossOrigin', '')bulunmadığı bir 304 yanıtından kaçınmak için URL'nin sorgu dizesine bir zaman damgası eklemem gerektiğini ve buna bir zaman damgası eklemem gerektiğini fark ettim Access-Control-Allow-Origin.

Bu bana verir

var url = 'http://lorempixel.com/g/400/200/';
var imgObj = new Image();
imgObj.src = url + '?' + new Date().getTime();
imgObj.setAttribute('crossOrigin', '');

Görüntüleri doğrudan başka bir sunucudan bir tuvale çizip sonra kullanamazsınız getImageData. Bu bir güvenlik sorunu ve tuval "kirli" olarak kabul edilecek.

Görüntünün bir kopyasını PHP kullanarak sunucunuza kaydetmeniz ve ardından yeni görüntüyü yüklemeniz işe yarar mı? Örneğin, URL'yi PHP betiğine gönderebilir ve sunucunuza kaydedebilir, ardından yeni dosya adını şu şekilde javascript'inize döndürebilirsiniz:

<?php //The name of this file in this example is imgdata.php

  $url=$_GET['url'];

  // prevent hackers from uploading PHP scripts and pwning your system
  if(!@is_array(getimagesize($url))){
    echo "path/to/placeholderImage.png";
    exit("wrong file type.");
  }

  $img = file_get_contents($url);

  $fn = substr(strrchr($url, "/"), 1);
  file_put_contents($fn,$img);
  echo $fn;

?>

PHP betiğini aşağıdaki gibi bir ajax javascript ile kullanırsınız:

xi=new XMLHttpRequest();
xi.open("GET","imgdata.php?url="+yourImageURL,true);
xi.send();

xi.onreadystatechange=function() {
  if(xi.readyState==4 && xi.status==200) {
    img=new Image;
    img.onload=function(){ 
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    }
    img.src=xi.responseText;
  }
}

Bundan getImageDatasonra tuval üzerinde kullanırsanız , iyi çalışır.

Alternatif olarak, görüntünün tamamını kaydetmek istemiyorsanız, x & y koordinatlarını PHP betiğinize aktarabilir ve pikselin o taraftaki rgba değerini hesaplayabilirsiniz. PHP'de bu tür görüntü işlemeyi yapmak için iyi kitaplıklar olduğunu düşünüyorum.

Bu yaklaşımı kullanmak istiyorsanız, uygulama konusunda yardıma ihtiyacınız olursa bana bildirin.

edit-1: peeps php betiğinin açığa çıktığını ve internetin potansiyel olarak kötü niyetli kullanmasına izin verdiğini belirtti. bunun üstesinden gelmenin milyonlarca yolu var, en basitlerinden biri bir çeşit URL gizlemedir ... güvenli php uygulamalarının ayrı bir google'ı hak ettiğini düşünüyorum; P

edit-2: popüler talep üzerine, bir php betiği değil de bir resim olduğundan emin olmak için bir kontrol ekledim (kaynak: PHP, dosyanın bir resim olup olmadığını kontrol et ).

ChromeKodumu yerel olarak test ederken bu hatayı görüyordum . GeçtimFirefox ve artık hatayı görmüyorum. Belki başka bir tarayıcıya geçmek hızlı bir çözümdür.

İlk cevapta verilen çözümü kullanıyorsanız, değişkeni img.crossOrigin = "Anonymous";tanımladıktan hemen sonra eklediğinizden emin olun img(örneğin var img = new Image();).

Sizin sorununuz, başka bir etki alanından harici bir görüntü yüklemenizdir. Bu, tuval içeriğinizin herhangi bir verisine erişmeye çalıştığınızda bir güvenlik hatasına neden olur.

Çapraz bir etki alanından yükleyerek tuvali "lekeliyorsunuz". Şu MDN makalesine göz atın:

https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

Yerel üzerinde çalışırken bir sunucu ekleyin

Yerelde çalışırken benzer bir sorun yaşadım. URL'niz yerel dosyanın yolu olacaktır, örneğin file: ///Users/PeterP/Desktop/folder/index.html.

Lütfen bir MAC üzerinde olduğumu unutmayın.

Global olarak http-server kurarak bunu aştım. https://www.npmjs.com/package/http-server

Adımlar:

1. Global kurulum: npm install http-server -g
2. Sunucuyu çalıştır: http-server ~/Desktop/folder/

Not: Düğümün kurulu olduğunu varsayıyorum, aksi takdirde npm komutlarını çok fazla çalıştırmayacaksınız.

Matt Burns'ün cevabında dediği gibi , sorunlu görüntülerin barındırıldığı sunucuda CORS'u etkinleştirmeniz gerekebilir.

Sunucu Apache ise, bu, aşağıdaki parçacığı ( buradan ) VirtualHost yapılandırmanıza veya bir .htaccessdosyaya ekleyerek yapılabilir :

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

... bir VirtualHost'a ekliyorsanız, muhtemelen Apache'nin yapılandırmasını da yeniden yüklemeniz gerekecektir (örn. sudo service apache2 reload , Apache bir Linux sunucusunda çalışıyorsa)

Sorunum o kadar karışıktı ki, CORS sorunu olamayacağından emin olmak için görüntüyü sadece base64 kodladım.

Bugün aynı problemle karşılaşıyorum ve aşağıdaki kod ile çözüyorum.

HTML Kodu:

<div style='display: none'>
  <img id='img' src='img/iak.png' width='600' height='400' />
</div>
<canvas id='iak'>broswer don't support canvas</canvas>

js kodu:

var canvas = document.getElementById('iak')
var iakImg = document.getElementById('img')
var ctx = canvas.getContext('2d')
var image = new Image()
image.src=iakImg.src
image.onload = function () {
   ctx.drawImage(image,0,0)
   var data = ctx.getImageData(0,0,600,400)
}

yukarıdaki gibi kod ve alanlar arası sorun yoktur.

Aynı sorunu yaşıyordum ve benim için basitçe birleştirerek işe yaradı https:${image.getAttribute('src')}