Canvas.toDataURL () neden bir güvenlik istisnası atıyor?

Yeterince uyumadım mı ne? Bu aşağıdaki kod

var frame=document.getElementById("viewer");
frame.width=100;
frame.height=100;

var ctx=frame.getContext("2d");
var img=new Image();
img.src="http://www.ansearch.com/images/interface/item/small/image.png"

img.onload=function() {
    // draw image
    ctx.drawImage(img, 0, 0)

    // Here's where the error happens:
    window.open(frame.toDataURL("image/png"));
}

bu hatayı atıyor:

SECURITY_ERR: DOM Exception 18

Bunun işe yaramamasına imkan yok! Biri bunu açıklayabilir mi lütfen?

Gelen özellikleri şöyle der:

Origin-clean bayrağı false olarak ayarlanmış bir tuval öğesinin toDataURL () yöntemi her çağrıldığında, yöntemin bir SECURITY_ERR istisnası oluşturması gerekir.

Görüntü başka bir sunucudan geliyorsa, toDataURL () kullanabileceğinizi sanmıyorum

Benim için çalıştı görüntü nesnelerinde çapraz başlangıç ​​niteliği ayarlama (fabricjs kullanıyordum)

    var c = document.createElement("img");
    c.onload=function(){
        // add the image to canvas or whatnot
        c=c.onload=null
    };
    c.setAttribute('crossOrigin','anonymous');
    c.src='http://google.com/cat.png';

Fabricjs kullananlar için Image.fromUrl'ye nasıl yama yapacağınız aşağıda açıklanmıştır.

// patch fabric for cross domain image jazz
fabric.Image.fromURL=function(d,f,e){
    var c=fabric.document.createElement("img");
    c.onload=function(){
        if(f){f(new fabric.Image(c,e))}
        c=c.onload=null
    };
    c.setAttribute('crossOrigin','anonymous');
    c.src=d;
};

Görüntü Erişim-Kontrol-İzin Verme veya Erişim-Kontrol-İzin Verme-Kimlik Bilgilerini ayarlayan bir ana bilgisayarda barındırılıyorsa, Çapraz Kaynak Paylaşımı'nı (CORS) kullanabilirsiniz. Daha fazla ayrıntı için buraya bakın (crossorigin niteliği).

Diğer seçeneğiniz, sunucunuzun bir görüntüyü getiren ve sunan bir uç noktaya sahip olmasıdır. (ör. http: // your_host / endpoint? url = URL ) Bu yaklaşımın dezavantajı gecikme ve teorik olarak gereksiz getirmedir.

Daha alternatif çözümler varsa, bunları duymak isterim.

Görünüşe göre, görüntü barındırma, görüntü kaynakları için aşağıdaki HTTP başlıklarını sağlayabiliyorsa ve tarayıcı CORS'u desteklediğinde bunu engellemenin bir yolu var gibi görünüyor:

erişim denetimi izin ver: *
erişim denetimi izin verme kimlik bilgileri: doğru

Burada belirtilmiştir: http://www.w3.org/TR/cors/#use-cases

Sonunda çözümü buldum. Sadece eklemek gerek crossOriginüçüncü param olarak fromURLfonk

fabric.Image.fromURL(imageUrl, function (image) {
            //your logic
    }, { crossOrigin: "Anonymous" });

Aynı sorunu yaşadım ve tüm resimler aynı etki alanında barındırılıyor ... Yani, biri aynı sorunu yaşıyorsa, işte böyle çözdüm:

İki düğmem vardı: biri tuvali oluşturmak için, diğeri ise tuvalden görüntü oluşturmak için. Sadece benim için çalıştı ve ilk düğmedeki tüm kodu yazdığımda nedenini bilmediğim için üzgünüm. Yani tıkladığımda tuvali ve resmi aynı anda oluştur ...

Kodlar farklı işlevlerdeyken her zaman bu güvenlik sorununu yaşarım ... = /

Bunu kullanarak çalışmasını sağlayabildim:

Bunu .htaccesskaynak sunucunuzun ilk satırına yazın

Header add Access-Control-Allow-Origin "*"

Daha sonra bir <img>eleman oluştururken aşağıdaki gibi yapın:

// jQuery
var img = $('<img src="http://your_server/img.png" crossOrigin="anonymous">')[0]

// or pure
var img = document.createElement('img');
img.src='http://your_server/img.png';
img.setAttribute('crossOrigin','anonymous');

Kimliğinize boşluk koyamazsınız

Güncelleme

Tahminimce bu görüntü, komut dosyasını çalıştırdığınız yerden farklı bir sunucuda. Kendi sayfamda çalıştırırken hatanızı tekrarlayabildim, ancak aynı etki alanında barındırılan bir resmi kullandığım anda sorunsuz çalıştı. Yani güvenlikle ilgili - resmi sitenize yerleştirin. Bunun neden böyle olduğunu bilen var mı?

Bir tuval üzerine basitçe bazı resimler çiziyorsanız, resimleri aynı etki alanından yüklediğinizden emin olun.

www.example.com , example.com'dan farklıdır

Bu nedenle, resimlerinizin ve adres çubuğunuzdaki url'nin aynı, www olup olmadığından emin olun.

Fabric.js kullanıyorum ve bunu toDataURL yerine toDatalessJSON kullanarak çözebilirim:

canvas.toDatalessJSON({ format: 'jpeg' }).objects[0].src

Düzenleme: Nevermind. Bu, arka plan görüntüsünün üstte çizim olmadan JPG'ye dışa aktarılmasına neden olur, bu nedenle sonuçta tamamen kullanışlı olmadı.