hjälp med local storage

swingman · 2012-08-01, 12:57

det här med local storage är nytt för mig. jag har en sida med en canvas där det ritas en cirkel när man klickar på canvasen. det finns även en knapp (clear) som rensar canvasen.
Nu vill jag kunna spara med hjälp av local storage, - om jag ritat en cirkel eller flera och utan att klicka på clear knappen, jag uppdaterar sidan och då ska jag kunna få tillbaka sidan med dem eller den cirkel som jag fanns innan jag uppdaterade sidan. Hoppas att ni förstår vad jag menar...för det är ju meningen med localstorage väl.
Jag har försökt med följande kod vid window.onload
var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function() {
canvas.width = this.width;
cavans.height = this.height;
ctx.drawImage(this, 0, 0);
var base64jpeg = canvas.toDataURL("image/jpeg");
}
img.src = "/images/myjpeg.jpg";

men det har inte funkat. Jag behöver helt enkelt hjälp med detta!
Här är min kod i html5 och javascript
HTML5

Kod:

<!DOCTYPE html>
<html>
	<head>
		<title>localstorage  </title>
		<script type="text/javascript" src="./localstor.js"></script>
		
		<meta charset="utf-8" />
	</head>
	<body > 
<section>		
	<div class="ritytor" >
	<button id="clear" type="button" >Clear</button> 
	
    <canvas id="myCanvas" width="500" height="400" style="border:1px solid #c3c3c3;" onclick="UpdateInfo (event);">
    Your browser dosen't support the HTML5 canvas.</canvas><br />
	</div>	
	<div >	
	
	Color <select id="colorSelector" name="color" onchange="chosenColor();">	
	<option selected="selected" value="#000000">Black</option>
	<option value="#0000FF">Blue</option>
	<option value="#FF0000">Red</option>	
	<option value="#FFA500">Orange</option>
	<option value="#FFFF00">Yellow</option>
	<option value="#FFC0CB">Pink</option>
	<option value="#808080">Gray</option>
	<option value="#008000">Green</option>
	</select>
	Size <select id="sizeSelector" name="color" onchange="chosenSize();">	
	<option value="100">10</option>
	<option value="90">9</option>
	<option value="80">8</option>
	<option value="70">7</option>
	<option value="60">6</option>
	<option value="50">5</option>
	<option value="40">4</option>
	<option value="30">3</option>
	<option selected="selected" value="20">2</option>
	<option value="10">1</option>
	</select>
	
	<p> Please click in the canvas below to draw a circle of your chosen color and size</p>
	</div>
	
	</section>
	</body>
</html>

Javascript

Kod:

"use strict";
	window.onload = function() {	
	canvasText();		
	}
	//draw circle at the cordinates of the mouse
function UpdateInfo (event) {
            var pageX = event.pageX;
            var pageY = event.pageY-75;								
			var si=document.getElementById("sizeSelector");
			var strSize = si.options[si.selectedIndex].value;
			drawCircle(pageX,pageY,strSize);			
        }
//draw circle function		
function drawCircle(x,y,si){
si=chosenSize();
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(x, y);
ctx.beginPath();
ctx.arc(x,y,si,0,Math.PI*2,false);
ctx.closePath();
ctx.strokeStyle = chosenColor();
ctx.fillStyle= chosenColor();
ctx.stroke();
ctx.fill();
//clear the canvas by clicking clear
document.getElementById('clear').onclick = function() {
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, c.width, c.height);
ctx.restore();
}
}
//choose  drawing color function
function chosenColor(){
var co=document.getElementById("colorSelector");
var strColor = co.options[co.selectedIndex].value;
return strColor;
}
//choose  drawing size function
function chosenSize(){
var si=document.getElementById("sizeSelector");
var strSize = si.options[si.selectedIndex].value;
return strSize;
}
//canvas text b4 drawing
function canvasText(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="18px sans-serif";
ctx.fillText("Please click to draw a circle or circles", 60, 200);
}

voigtann1 · 2012-08-01, 16:25

du få spara ner canvas.toDataURL() till en plats i localstorage och vid onload så få du vid onload på bilden sätta dess src path till den variablen ifrån localstorage

det du behöver (indentera din kod snälla) är en spara metod:

Kod:

window.localStorage[storageName] = canvas.toDataURL()

där storageName är en sträng som säger var canvas ( som är referens till din <canvas> element) var datan skall sparas ner till

sen en metod som skall köras vid onload:

Kod:

var loadCanvas = function(){
    var img = new Image(),
         ctx = canvas.getContext('2d')
    img.src = window.localStorage[storageName];
    img.onload = function(){
        ctx.drawImage(img, 0, 0);
    };
}

där canvas är samma referens som den andra canvas elementet.

swingman · 2012-08-01, 20:44

voigtann1: Ursäkta att jag hade ostrukturerad kod...ska göra bättre nästa gång. Det är kanske självklart var eller hur jag ska anropa metoden men jag har inte lyckats med ditt förslag. Skulle du kunna även avslöja hur dina fina kod ska anropas. Är det vid body onload i html eller var i javascripten. Hade gärna haft något som heter onupdate in javascript men vad jag vet finns det inte.

voigtann1 · 2012-08-01, 21:00

Om du har något i din localstorage så vill du ju ladda in den när onload körs, metoden loadCanvas skall köras vid en onload (men variablen canvas måste finnas annars kör document.getElementById igen), sen vill du ju bara uppdatera localstorage med canvas datan.

Du ha en hel del variabler som du glömmer sätta var på och då hamnar dom också på window objektet, normalt vill du nog inte ha för mycket i window objektet (då det är enkelt att skriva över dom av vem som helst).

Lite andra tips är:

Kod:

  ctx.strokeStyle = chosenColor();
  ctx.fillStyle = chosenColor();

varför köra samma funktion två gånger, båda gångerna kommer ge dig exakt samma värde + måste leta i DOM-trädet för att hitta samma element två gånger. spara undan det i en variabel och kör med variablen istället spara lite på resurser.

swingman · 2012-08-02, 13:37

Hej Voigtann1, Jag är en nybörjare i det här programmering så det är därför det är ganska dålig kod. Jag ska tänka på dina tips och jag är glad att jag få hjälp att utvecklas på detta forum. Jag har provat att anropa din kod på lite olika sätt men jag lyckas inte få det att fungera. När jag uppdaterar sidan så får jag inte den cirkeln som jag har ritat på sidan. Skulle du kunna fixa en sådan där jsfiddle och visa hur du anropa koden. När jag ahr läst på så verkar det som man ska ha en setItem och getItem på localstorage. detta ingår inte i din kod förslag. ska det funka ändå?

Till ex.
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

voigtann1 · 2012-08-02, 13:54

exemplet finns ju redan:

Kod:

window.localStorage[storageName] = canvas.toDataURL()

för att sätta men om du vill att det skall heta testObject sätt variablen storageName till 'testObject':

Kod:

var storageName = 'testObject';

eller bara:

Kod:

window.localStorage.testObject = canvas.toDataURL();

Jag har skrivit allt du behöver för att lösa din uppgift(spara bilden och ladda in den) till din uppgift.

ovan exempel med setItem är samma sak som koden i mitt exempel (du vill inte spara undan datan som JSON då det inte är ett JSON).

Vad har du försökt med min kod? Lägg du upp en jsfiddle/jsbin exempel istället för att man bara ge dig svar på en uppgift du borde lösa med hjälp av matrialet din lärare har tilldelat dig.

swingman · 2012-08-02, 22:55

Hej!
Jag förstår att det är en lätt grej att fixa men jag har lite problem. Det är en ganska stor uppgift som jag har nästan löst klart och det här med localStorage är bara en av kraven. Tack för den hjälp du har gett mig. Jag har gjort en jsFiddle om du har lust kan du titta på hur jag försöker anropa localStorage. jsfiddle:http://jsfiddle.net/ENy85/

voigtann1 · 2012-08-03, 06:51

läs mitt senaste inlägg, om du kollar i din fellogg så få du:

Citat:

ReferenceError: storageName is not defined
img.src = window.localStorage[storageName];

Kod:

function drawCircle(x,y,si){
  var x,y;
  var si=chosenSize();
....

är också fel, du har redan x,y och si är ju redan deklarerad(mitt fel att ha gett dålig info)

jag hade hellre kört:

Kod:

function drawCircle(x,y){
  var si=chosenSize();
....

då du ändå alltid hämta "si" varje gång, varför skall jag hämta chosenSize() både inne i drawCircle och i UpdateInfo när du ändå skriver över si varje gång med exakt samma metod?

sen behöver du ju inte ha onchange event på dina dropdown då du inte använder det ändå förrän vid onclick

du saknar också att du spara ner datan i din localstorage.

swingman · 2012-08-15, 12:42

Äntligen fick jag till det med localStorage. Behövde tänka till lite... inte så svårt men har just fått ett litet barn hem som inte tillåter mig lägga ner så mycket tid på att studera. Tack för hjälpen.

2012-08-01, 16:25	Markerad som löst av swingman #2
voigtann1 Forumvärd Registrerad: 2001-06-14 Ort: Helsingborg Inlägg: 8 495 Lösningar: 535	du få spara ner canvas.toDataURL() till en plats i localstorage och vid onload så få du vid onload på bilden sätta dess src path till den variablen ifrån localstorage det du behöver (indentera din kod snälla) är en spara metod: Kod: window.localStorage[storageName] = canvas.toDataURL() där storageName är en sträng som säger var canvas ( som är referens till din <canvas> element) var datan skall sparas ner till sen en metod som skall köras vid onload: Kod: var loadCanvas = function(){ var img = new Image(), ctx = canvas.getContext('2d') img.src = window.localStorage[storageName]; img.onload = function(){ ctx.drawImage(img, 0, 0); }; } där canvas är samma referens som den andra canvas elementet. __________________ "det går inte att lära en gammal norrlänning byta namn på irc" - gammalt kinesiskt uttryck

2012-08-01, 21:00	#4
voigtann1 Forumvärd Registrerad: 2001-06-14 Ort: Helsingborg Inlägg: 8 495 Lösningar: 535	Om du har något i din localstorage så vill du ju ladda in den när onload körs, metoden loadCanvas skall köras vid en onload (men variablen canvas måste finnas annars kör document.getElementById igen), sen vill du ju bara uppdatera localstorage med canvas datan. Du ha en hel del variabler som du glömmer sätta var på och då hamnar dom också på window objektet, normalt vill du nog inte ha för mycket i window objektet (då det är enkelt att skriva över dom av vem som helst). Lite andra tips är: Kod: ctx.strokeStyle = chosenColor(); ctx.fillStyle = chosenColor(); varför köra samma funktion två gånger, båda gångerna kommer ge dig exakt samma värde + måste leta i DOM-trädet för att hitta samma element två gånger. spara undan det i en variabel och kör med variablen istället spara lite på resurser. __________________ "det går inte att lära en gammal norrlänning byta namn på irc" - gammalt kinesiskt uttryck

2012-08-02, 13:54	#6
voigtann1 Forumvärd Registrerad: 2001-06-14 Ort: Helsingborg Inlägg: 8 495 Lösningar: 535	exemplet finns ju redan: Kod: window.localStorage[storageName] = canvas.toDataURL() för att sätta men om du vill att det skall heta testObject sätt variablen storageName till 'testObject': Kod: var storageName = 'testObject'; eller bara: Kod: window.localStorage.testObject = canvas.toDataURL(); Jag har skrivit allt du behöver för att lösa din uppgift(spara bilden och ladda in den) till din uppgift. ovan exempel med setItem är samma sak som koden i mitt exempel (du vill inte spara undan datan som JSON då det inte är ett JSON). Vad har du försökt med min kod? Lägg du upp en jsfiddle/jsbin exempel istället för att man bara ge dig svar på en uppgift du borde lösa med hjälp av matrialet din lärare har tilldelat dig. __________________ "det går inte att lära en gammal norrlänning byta namn på irc" - gammalt kinesiskt uttryck

Trådverktyg
Visa utskriftsvänlig version E-posta den här sidan
Visningsalternativ
Växla till linjär visning Hybrid-visning Växla till trådad visning

2012-08-01, 20:44	#3
swingman Medlem Registrerad: 2006-01-15 Inlägg: 86 Lösningar: 0	voigtann1: Ursäkta att jag hade ostrukturerad kod...ska göra bättre nästa gång. Det är kanske självklart var eller hur jag ska anropa metoden men jag har inte lyckats med ditt förslag. Skulle du kunna även avslöja hur dina fina kod ska anropas. Är det vid body onload i html eller var i javascripten. Hade gärna haft något som heter onupdate in javascript men vad jag vet finns det inte.

2012-08-02, 13:37	#5
swingman Medlem Registrerad: 2006-01-15 Inlägg: 86 Lösningar: 0	Hej Voigtann1, Jag är en nybörjare i det här programmering så det är därför det är ganska dålig kod. Jag ska tänka på dina tips och jag är glad att jag få hjälp att utvecklas på detta forum. Jag har provat att anropa din kod på lite olika sätt men jag lyckas inte få det att fungera. När jag uppdaterar sidan så får jag inte den cirkeln som jag har ritat på sidan. Skulle du kunna fixa en sådan där jsfiddle och visa hur du anropa koden. När jag ahr läst på så verkar det som man ska ha en setItem och getItem på localstorage. detta ingår inte i din kod förslag. ska det funka ändå? Till ex. // Put the object into storage localStorage.setItem('testObject', JSON.stringify(testObject)); // Retrieve the object from storage var retrievedObject = localStorage.getItem('testObject');

2012-08-02, 22:55	#7
swingman Medlem Registrerad: 2006-01-15 Inlägg: 86 Lösningar: 0	Hej! Jag förstår att det är en lätt grej att fixa men jag har lite problem. Det är en ganska stor uppgift som jag har nästan löst klart och det här med localStorage är bara en av kraven. Tack för den hjälp du har gett mig. Jag har gjort en jsFiddle om du har lust kan du titta på hur jag försöker anropa localStorage. jsfiddle:http://jsfiddle.net/ENy85/

2012-08-15, 12:42	#9
swingman Medlem Registrerad: 2006-01-15 Inlägg: 86 Lösningar: 0	Äntligen fick jag till det med localStorage. Behövde tänka till lite... inte så svårt men har just fått ett litet barn hem som inte tillåter mig lägga ner så mycket tid på att studera. Tack för hjälpen.