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

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.

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}

#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ří.

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.';
}

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.

muzet = ucet :)