FileReader API a uložení dat – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

FileReader API a uložení dat – JavaScript, AJAX, jQuery – Fórum – Programujte.comFileReader API a uložení dat – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Nefaritus
~ Redaktor
+2
Posthunter
22. 4. 2013   #1
-
0
-

Ahoj,

potřeboval bych postrčit s jedním problémem. Nevíte někdo o způsobu, jak uložit výstup FileReaderu do lokální/globální proměnné? Jelikož pracuje FileReader asynchronně, je to poněkud oříšek.

CanvasState.prototype.addImage = function(inputFile) {
	var file = inputFile;
	var reader = new FileReader();
	reader.onload = this.loadImageData;
	reader.readAsDataURL(file);
}

CanvasState.prototype.loadImageData = function(e) {
	this.hasImage = true;
	this.imageData = e.target.result;
}

Uvnitř metody loadImageData se ty lokální proměnné nastaví, ale každá jiná metoda už ten obsah nedostane. Nejde to nějak obejít? Díky.

Nahlásit jako SPAM
IP: 194.228.11.–
peter
~ Anonymní uživatel
4007 příspěvků
23. 4. 2013   #2
-
0
-

Jestli to funguje jako u ajaxu, tak

reader.onload = this.loadImageData;

Priradis funkci, ktera se ma vykonat po ukonceni prenosu dat. V te funkci muzes udelat vse, co potrebujes.

a(); b(); prenos(null); c(); d(); // prikazy, ktere se maji vykonat po prenosu

a(); b(); prenos(function(){ c(); d(); }) // callback funkce obsahujici prikazy po prenosu

Kdybys to chtel tak, jak je to v privnim pripade, musel bys mit spusteny casovac a odchytavat casovou funkci (setTimeout, setInterval) ukonceni prenosu. Ale proc? Kdyz to za tebe dela callback funkce a bez casovace. Priklad takoveho nespravneho postupu je s promennou a, window.a

var a;

CanvasState.prototype.loadImageData = function(e) {
this.hasImage = true;
this.imageData = e.target.result;
a = 5;
window.a = 5;
alert(123); // predani promenne do alertualert(reader);  // mozna ti to zobrazi reader
alert(this); // to by mel byt tez objekt reader
alert(this.toSource()) // ve FF by ti to melo zobrazit objekt, jeho source code}
Nahlásit jako SPAM
IP: 193.84.207.–
Nefaritus
~ Redaktor
+2
Posthunter
23. 4. 2013   #3
-
0
-

#2 peter
Díky za odpověď. Mně zkrátka jde jen o způsob, jak dostat hodnotu e.target.result (která obsahuje base64 hash obrázku) do lokální proměnné this.imageData. To se mi stále nedaří.

Nahlásit jako SPAM
IP: 212.4.138.–
Nefaritus
~ Redaktor
+2
Posthunter
25. 4. 2013   #4
-
0
-

Vypadá to, že to možné není, tak se alespoň jako řešení pošlu upload obrázku s resizem na straně uživatele (prohlížeče), pak ho můžete číst ze serveru.

JS:

var addImage = function(inputFile) {
	var file = inputFile;
	var reader = new FileReader();
	
	reader.onload = function(e) {
		var tempImg = new Image();
		tempImg.src = e.target.result;
		tempImg.onload = function() {
			
		var MAX_WIDTH = rWidth;
		var MAX_HEIGHT = rHeight;
			
		var tempW = tempImg.width;
		var tempH = tempImg.height;
			
		if (tempW > tempH) {
	            if (tempW > MAX_WIDTH) {
	            	tempH *= MAX_WIDTH / tempW;
	            	tempW = MAX_WIDTH;
	            }
	        } else {
	            if (tempH > MAX_HEIGHT) {
	            	tempW *= MAX_HEIGHT / tempH;
	            	tempH = MAX_HEIGHT;
	            }
	        }
	 
	        var canvas = document.createElement('canvas');
	        canvas.width = tempW;
	        canvas.height = tempH;
	        var ctx = canvas.getContext('2d');
	        ctx.drawImage(this, 0, 0, tempW, tempH);
	        var dataURL = canvas.toDataURL('image/png');
	        
	        var xhr = new XMLHttpRequest();
	 
	        xhr.open('POST', 'uploadimage.php', true);
	        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
	        var data = 'image=' + dataURL;
	        xhr.send(data);
	        
		}
	}
	
	reader.readAsDataURL(file);
}

PHP:

if ($_POST) {
    $img = $_POST['image'];
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = 'image.png';
    $success = file_put_contents($file, $data);
    print $success ? $file : 'Unable to save the file.';
}
Nahlásit jako SPAM
IP: 194.228.11.–
peter
~ Anonymní uživatel
4007 příspěvků
26. 4. 2013   #5
-
0
-

Nevim, nepouzivam. Na canvas mam takovouto ukazku

http://axpsu.fpf.slu.cz/…al-pokus.htm

do modreho policka si muzes pretahnou obrazek z plochy, z webu nebo odkud ses. po kliknuti na oraznove se ulozi.

Reader mozna pouziva webnode.com. Kdyz si zalozis muzet, zalozit v nem stranku, kliknes administrovat a ve strance das pridat galerii, tak to umi nahrat samo obrazky ve FF jenom oznacenim vsech v opendialogu pomoci shift nebo ctrl. Mozna by se to dalo z tama obslohnout.

Vic ti s tim asi neporadim, musel bych to zkouset a zatim to nepotrebuju.

Nahlásit jako SPAM
IP: 193.84.207.–
peter
~ Anonymní uživatel
4007 příspěvků
26. 4. 2013   #6
-
0
-

muzet = ucet :)

Nahlásit jako SPAM
IP: 193.84.207.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 3 hosté

Podobná vlákna

Uložení dat — založil crAzY^

Uložení dat do souboru — založil Atheo

Uložení dat do souboru — založil neOph

Uložení dat programu. — založil Luckaa

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý