Speicher Ein Bild in localstorage
So kann man Bilder im localstorage speichern. In diesem Beispiel geht der Link aber nur, wenn ihr Bilder zur gleichen Domain nimmt
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basti1012 Save Image to localStorage</title>
<style>
body {
font: 12px "Helvetica Neue", "Helvetica", sans-serif;
background: #ccc;
}
h1 {
margin-top: 0;
}
img {
padding: 10px;
box-shadow: 0 0 10px 2px #ccc;
margin-bottom: 5px;
}
figcaption {
font-style: italic;
}
.container {
width: 900px;
background: #fff;
border-radius: 10px;
margin: 0 auto;
padding: 30px;
}
header {
margin-bottom: 20px;
border-bottom: 1px solid #000;
}
.main-content {
overflow: hidden;
}
.additional-content {
float: right;
width: 300px;
height: 400px;
padding: 10px;
background: #ccc;
border-radius: 5px
}
.page-footer {
border-top: 1px solid #000;
margin-top: 30px;
padding-top: 10px;
}
h3{
text-align:center;
display:inline-block;
}
label{
font-size:19px;
width:250px;
text-align:center;
display:inline-block;
}
label,p{
font-size:19px;
text-align:center;
display:inline-block;
}
hr{
width:100;
border:2px solid black;
}
</style>
</head>
<body>
<div class="container">
<header class="header" role="banner">
<h1>Speicher Ein Bild in localstorage()</h1>
</header>
<div class="main">
<article class="main-content" role="main">
<h2>Gebe eine Url ein die zu einen Bild führt auf den gleichen domain.Danach gebe einen Namen ein wo drunter
das Javascript dein Bild wieder findet</h2>
<label>Url des Bildes:</label>
<input type="text" id="bild" value="https://basti1012.bplaced.net/siteimage/info-box-css.jpg">
<br><label>Speichername:r</label>
<input type="text" id="localname" value="bild1">
<input type="button" id="save" value="Save To Localstorage">
<hr>
<h2>Nach erfolgreichen Speichern wird hier das Bild aus den Localstorage angezeigt</h2>
<figure>
<div id="rhino"></div>
<figcaption>Hier erscheint gleich dein Bild </figcaption>
</figure>
</article>
</div>
<hr>
<div id="rein"></div>
<div style="display:flex;flex-direction:column;">
<h2>Nach einen Reload der Seite erscheint bei erfolgreicher Seicherung dein Bild aus den Localstorge</h2>
<p>Es wird keine Url gespeichert ,sondern das Bild als data:image,und ist somit auf den Rechner vorhanden
Hier ist der Code zum einfügen des LocalStorage Bildes</p>
<div>
<textarea id="co" style="width:700px;height:100px;">
<div id="YOURDIVID"></div>
<script>document.getElementById('YOURDIVID').innerHTML='<img src="'+localStorage.getItem('${name}')+'">';
</script>
</textarea>
</div>
<div id="rein"></div>
</div>
<script>
hh=document.getElementById('save');
hh.addEventListener('click',function(){
bild=document.getElementById('bild').value;
name=document.getElementById('localname').value;
document.getElementById('co').value=""+document.getElementById('co').value+"";
var rhinoStorage = localStorage.getItem(name),
rhino = document.getElementById("rhino");
if (rhinoStorage) {
rhino.innerHTML='<img src="'+rhinoStorage+'" alt="Noch leer">';
// rhino.setAttribute("src", rhinoStorage);
}else {
var xhr = new XMLHttpRequest(),
blob,
fileReader = new FileReader();
xhr.open("GET", bild, true);
xhr.responseType = "arraybuffer";
xhr.addEventListener("load", function () {
if (xhr.status === 200) {
blob = new Blob([xhr.response], {type: "image/png"});
fileReader.onload = function (evt) {
var result = evt.target.result;
rhino.setAttribute("src", result);
try {
localStorage.setItem(name, result);
}catch (e) {
console.log("Storage failed: " + e);
}
};
fileReader.readAsDataURL(blob);
}
}, false);
xhr.send();
}
document.getElementById('rein').innerHTML='<img src="'+localStorage.getItem(name)+'">';
});
</script>
</body>
</html>