Yritän tehdä systeemiä, joka hakee kuvan netistä ja tallentaa ne HTML5:llä localSorageen. Tämä siksi, että sivua ladataan usein heikon nettiyhteyden yli ja haluan vähentää datan käyttöä.
En kutenkaan ole saanut luettua kuvan sisältöä binaryksi.
Tässä on jotain testiä mitä olen viritellyt:
<!DOCTYPE HTML>
<html>
<head>
<script>
function getImage() {
if (localStorage.getItem('image')) {
var data = localStorage.getItem('image');
document.getElementById("kuva").src='data:image/jpg;base64,' + data;
}
else {
document.getElementById('kuva').src='http://www.jpeg.org/images/blue_01.jpg';
var data = getImageBinary('kuva');
//localStorage.setItem('image',data);
}
}
function getImageBinary(source) {
//var canvas = document.createElement("canvas");
var canvas = document.getElementById("myCanvas");
var img = document.getElementById(source);
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL();
//alert(dataURL);
return dataURL;
}
function load() {
getImage();
}
function clearCache() {
localStorage.removeItem('image');
alert("Välimuisti tyjennetty");
}
</script>
</head>
<body onload="load();">
<img id="kuva" src=""><br>
<input type="button" value="clear cache" onclick="clearCache()"><br>
<canvas id="myCanvas" style="border:1px solid #d3d3d3;">
</body>
</html>Ongelma on tuossa getImageBinary():ssä, joka ei lue tuota canvas-elementin sisältöä. Osaisiko joku sanoa mistä kiikastaa? (Tuossa on canvas-elementti esillä, mutta lopullisessa jutussa sitä ei ole, kts. pois kommentoitu createElement)
Kuulostaa minusta aika heikosti ajatellulta viritelmältä, vaikken olekaan perehtynyt html5-sovellusten optimointiin. Selaimissa on kuitenkin välimuistit, joihin kuvat tallennetaan, joten olisi minusta parempi pitäytyä niissä, eikä alkaa keksiä pyörää uudelleen. Riippuu tietysti käyttötarkoituksesta; joskus voi olla ihan päteväkin syy tallentaa kuvia kantaan.
Aihe on jo aika vanha, joten et voi enää vastata siihen.