Canvas toDataURL SecurityError – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Mam programem na miniatury (viz url).
Kdyz pretahnete obrazek z plochy , vyrobi to miniaturu do canvas1 (napravo) a kliknete SaveX, tak se otevre nove okno se zmenseninou.
Kdyz obrazek pretahnete z jine webove stranky, ukazuje v canvas1 zmenseninu, ale po kliknuti na SaveX skonci v konzoli s chybou pro funkci toDataURL (viz kousek kodu dole):

SecurityError: The operation is insecure.

Co s tim? Zkousel jsem googlovat, tam je neco jako document.domain nebo img.crossOrigin, ale neumim to asi pouzit. Kdyz si dam alerty, tak deaulft je oboji null nebo undefined, na img, canvasu, coz by podle dokumentace melo znamenat nastaveni anonymous. Zkusil jsem tam vnutit anonymous, ale pak kupodivu neslo pretahnout ani obrazek do programu
Potreboval bych udelat to, ze ze stareho webu si pretahnu mysi obrazek sem a hnedka z canvas1 ho pretahuji na novy web do vizualniho editoru. Zatim mi to teda tak nefunguje, jen po kliknuti na saveX mi to zobrazi data obrazku v base64.
 

http://mlich.zam.slu.cz/js-imager/image-peter-b.htm

MM.func.saveX = function(event)
    {
//    document.domain = ???
    var canvas1;
    canvas1 = MM.imager.obj.canvas1;
//canvas1.crossOrigin = "anonymous" // ??? null
    window.open(canvas1.toDataURL("image/png"));
    event.preventDefault();
    }

Nebude tam problém cross origin?
Predpokladám, že tá knižnica, ktorú používaš si ten potiahnutý obrázok z iného webu načítava pomocou ajaxu a tým by sa to vysvetlovalo. Vyskúšaj potiahnuť obrázok, ktorý je uložený na tej istej doméne ako tvoja aplikácia tj. http://mlich.zam.slu.cz/.

Otevres si ten muj program (ja to mel file:///...), otevres si idnes.cz. Najedes tam na obrazek, zmacknes leve na obrazku, drzis, tahas do druheho okna, polozis. On ti ho pretahne do img a naklonuje do canvas0. A zkopiruje vyrez do canvas1.
Co nejde, je to ulozeni. Coz nedava smysl, kdyz uz to mam v canvas a muzu s tam cmarat, co chci, ze jo. Do canvasu preci zadne viry davat nemuze, ne? Tam je uz jenom pixel grafika.

Jako, samozrejme, ze prvni mne napadlo to zabezpeceni, proto jsem taky googloval, jak to obejit. Bohuzel teda vsechna reseni, co jsem nasel, nebyla uspesna.

Casem to zkusim, ale ted zrovna resim jine veci a nechce se mi premyslet :)

Jo, nevim, zda sis tu stranku otevrel, ale neni tam zadny dalsi kod. Proste pracuji s canvas, event.dataTransfer, FileReader kdyz je to z plochy NEBO img.src=ulr_z_event.dataTransfer. Funkce MM.imager.func.canvas0OnDrop. Takze, mozna, ze to tam bude treba zapsat nejak jinak. Zkusim to zkoumat, az mne prestane bavit kontrolovat novy web, zda mi tam dali vsechno :)

Pri náčítaní stránky mi vyhodí: 

Připojen obrázek.

Po potiahnutí obrázku mi vyhodí ešte aj toto:

Připojen obrázek.

Mozna to souvisi s tim, ze pouzivas mene hodnotny prohlizec :) Ale, nezminil jsem, ze to mam pro Firefox.

objekt.toSource() pouziva firefox, umi prevest na string objekty {a:1,b:2} -> '{a:1,b:2}'

725, ta je toto
url = data.getData('text/html').match(/src\s*=\s*"(.+?)"/)[1]; // img tag
kdyz nepretahujes soubory, ale objekty ze stranky, tak by se to melo pretahovat jako '<img scr="...">', to by melo prave udelat to data.getData('text/html'). A matchem z toho jen dostanes url adresu. Match vyrobi pole, kde je ['<img src="http...">','http://'] (2 prvky v poli) nebo ['<cokoliv bezscr>'] (1 prvek). Takze, pokud tohle selze, tak alert(data.getData('text/html')) musi byt nejspis prazdny.

Testnul jsem to ted primo z toho odkazu, co jsem poslal a ve FF mi to normalne natahlo obrazek, jak z plochy, tak z webove stranky, konkretne z https://testweb.slu.cz/…cnistruktura, to schematko

http://mlich.zam.slu.cz/js-imager/image-peter-b.htm

Udelal jsem maly pokrok, mozna. Ono, ted mi to dokaze nacist obrazek z url. Ale neumi udelat export do base64, tlacitko Save. Ale, kdyz se v tom druhem canvas klikne pravym tlacitkem a ulozit obrazek jako, dokaze to asi exportovat do souboru. No, jenze pro web to chci kodovat na base64 do html kodu :)

Kdyz se prehatne obrazek z jine stranky, tak to vypise pri save v konzoly zase problem se zabezpecenim. Konkretne mam v jednom okne url 
https://www.zive.cz/…umbnail.aspx?…
A pretahuji drag drop obrazek do prvniho canvas.

Fiha, zajimave je, ze v IE to projde a zobrazi base64 obrazku :) Tam to ale miri jinou cestou, pres alert 'file'. Ve FF to miri cestou pres url.

Je v dnešní době něco překvapivého na tom, že skript nemůže k obsahu, ke kterému nemá povolení?

Jo, pokud to v Edge jede a lze to obejit pres file_get_content.

Hele, ale on se ten script k tomu dostane, zobrazi ten obrazek do obou canvasu. A pravym tlacitkem si ho muzes ulozit. Takze, jediny

Jo, pokud to v Edge jede a lze to obejit pres file_get_content.

Hele, ale on se ten script k tomu dostane, zobrazi ten obrazek do obou canvasu. A pravym tlacitkem si ho muzes ulozit. Takze, jediny problem je, ze ho nedovoli pomoci js ulozit. Takze, bud je neco hrozne spatne v zabezpeceni FF a nebo je to nesmysl.
si ten program zkus, presun si obrazek drag and drop z okna do toho prvniho ramecku. V pohode ho tam zobrazi, zadne CORS neresi. V pohode ho dostanu i do toho druheho. (Ikdyz si ten nejsem jisty, zda nepouziji jen url kvuli cors, uz jsem dlouho ten script neresil :) ). A v pohode pravym tlacitkem v tom druhem je v menu ulozit jako. A neresi to CORS, normalne to ulozi. Nevidim jedinej duvod, proc by to nemohl zkonvertovat na base64 rovnou.

problem je, ze ho nedovoli pomoci js ulozit. Takze, bud je neco hrozne spatne v zabezpeceni FF a nebo je to nesmysl.
si ten program zkus, presun si obrazek drag and drop z okna do toho prvniho ramecku. V pohode ho tam zobrazi, zadne CORS neresi. V pohode ho dostanu i do toho druheho. (Ikdyz si ten nejsem jisty, zda nepouziji jen url kvuli cors, uz jsem dlouho ten script neresil :) ). A v pohode pravym tlacitkem v tom druhem je v menu ulozit jako. A neresi to CORS, normalne to ulozi. Nevidim jedinej duvod, proc by to nemohl zkonvertovat na base64 rovnou.