javascript 将文件图像保存到 localstorage HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31850732/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Save a File Image to localstorage HTML
提问by
I am trying to save a image to localstorage and fetch the same back when is required,am confused on how to save a image as i have referred question related to my same question but they are complicated, Finally i got some thing which looks perfect to me but i am confused how to use the code to save the image on local storage
Hear is the code in JSFIDDEL
我正在尝试将图像保存到 localstorage 并在需要时取回相同的图像，我对如何保存图像感到困惑，因为我已经提到了与我的同一问题相关的问题，但它们很复杂，最后我得到了一些看起来很完美的东西我，但我很困惑如何使用代码将图像保存在本地存储上
听说是 JSFIDDEL 中的代码
Html:
网址：
<input type="file" id="bannerImg" />
<img src="" id="tableBanner" />
JS:
JS：
bannerImage = document.getElementById('bannerImg');
imgData = getBase64Image(bannerImage);
localStorage.setItem("imgData", imgData);
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
function fetchimage ()
{
var dataImage = localStorage.getItem('imgData');
var bannerImg = document.getElementById('tableBanner');
bannerImg.src = "data:image/png;base64," + dataImage;
}
采纳答案by fuyushimoya
You just lack a FileReaderto read the input file to dataURL. Jsfiddle
您只是缺少FileReader将输入文件读取到 dataURL 的方法。提琴手
Html:
网址：
<input type="file" id="bannerImg" />
<img src="" id="tableBanner" />
<!-- for result output -->
<div id="res"></div>
javascript:
javascript:
// Get all variables
var bannerImage = document.getElementById('bannerImg');
var result = document.getElementById('res');
var img = document.getElementById('tableBanner');
// Add a change listener to the file input to inspect the uploaded file.
bannerImage.addEventListener('change', function() {
var file = this.files[0];
// Basic type checking.
if (file.type.indexOf('image') < 0) {
res.innerHTML = 'invalid type';
return;
}
// Create a file reader
var fReader = new FileReader();
// Add complete behavior
fReader.onload = function() {
// Show the uploaded image to banner.
img.src = fReader.result;
// Save it when data complete.
// Use your function will ensure the format is png.
localStorage.setItem("imgData", getBase64Image(img));
// You can just use as its already a string.
// localStorage.setItem("imgData", fReader.result);
};
// Read the file to DataURL format.
fReader.readAsDataURL(file);
});
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
function fetchimage () {
var dataImage = localStorage.getItem('imgData');
img.src = "data:image/png;base64," + dataImage;
// If you don't process the url with getBase64Image, you can just use
// img.src = dataImage;
}
// Call fetch to get image from localStorage.
// So each time you reload the page, the image in localstorage will be
// put on tableBanner
fetchimage();
Not that the jsfiddle execute this script onload, so you may wrap them in window.onload in your own site.
并不是 jsfiddle 执行此脚本onload，因此您可以将它们包装在您自己站点的 window.onload 中。
回答by Kaiido
Because of the limited storage quotayou've got with localStorage, you may need to check the size of the uploaded image.
由于localStorage 的存储配额有限，您可能需要检查上传图像的大小。
Here is one way, based on @fuyushimoya's answer, if you don't need to convert every type of image to png. Otherwise, you're kind of screwed since it's one of the heaviest image type.
这是一种基于@fuyushimoya 的回答的方法，如果您不需要将每种类型的图像转换为 png。否则，你会被搞砸，因为它是最重的图像类型之一。
This solution may not be the best but it seems to handle a few cases :
这个解决方案可能不是最好的，但它似乎可以处理一些情况：
JS
JS
// Get all variables
var bannerImage = document.getElementById('bannerImg');
var result = document.getElementById('res');
var img = document.getElementById('tableBanner');
bannerImage.addEventListener('change', function() {
var file = this.files[0];
// declare a maxSize (3Mb)
var maxSize = 3000000;
if (file.type.indexOf('image') < 0) {
res.innerHTML = 'invalid type';
return;
}
var fReader = new FileReader();
fReader.onload = function() {
img.onload = function() {
// if localStorage fails, it should throw an exception
try {
// pass the ratio of the file size/maxSize to your toB64 func in case we're already out of scope
localStorage.setItem("imgData", getBase64Image(img, (file.size / maxSize), file.type));
} catch (e) {
var msg = e.message.toLowerCase();
// We exceeded the localStorage quota
if (msg.indexOf('storage') > -1 || msg.indexOf('quota') > -1) {
// we're dealing with a jpeg image : try to reduce the quality
if (file.type.match(/jpe?g/)) {
console.log('reducing jpeg quality');
localStorage.setItem("imgData", getBase64Image(img, (file.size / maxSize), file.type, 0.7));
}
// we're dealing with a png image : try to reduce the size
else {
console.log('reducing png size');
// maxSize is a total approximation I got from some tests with a random pixel generated img
var maxPxSize = 750000,
imgSize = (img.width * img.height);
localStorage.setItem("imgData", getBase64Image(img, (imgSize / maxPxSize), file.type));
}
}
}
}
img.src = fReader.result;
};
fReader.readAsDataURL(file);
});
function getBase64Image(img, sizeRatio, type, quality) {
// if we've got an svg, don't convert it, svg will certainly be lighter than any pixel image
if (type.indexOf('svg+xml') > 0) return img.src;
// if we've got a jpeg
if (type.match(/jpe?g/)) {
// and the sizeRatio is okay, don't convert it
if (sizeRatio <= 1) return img.src;
}
// if we've got some other image type
else type = 'image/png';
if (!quality) quality = 1;
var canvas = document.createElement("canvas");
// if our image file is too large, then reduce its size
canvas.width = (sizeRatio > 1) ? (img.width / sizeRatio) : img.width;
canvas.height = (sizeRatio > 1) ? (img.height / sizeRatio) : img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// if we already tried to reduce its size but it's still failing, then reduce the jpeg quality
var dataURL = canvas.toDataURL(type, quality);
return dataURL;
}
function fetchimage() {
var dataImage = localStorage.getItem('imgData');
img.src = dataImage;
}
// Call fetch to get image from localStorage.
fetchimage();
HTML
HTML
<input type="file" id="bannerImg" />
<img src="" id="tableBanner" />
<div id="res"></div>
回答by Jose Manuel Sánchez
Usa esta directiva:
美国政府指令：
directives.directive('baseSixtyFourInput', ['$window', function($window) {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elem, attrs, ngModel) {
var fileObject = {};
scope.readerOnload = function(e) {
var base64 = _arrayBufferToBase64(e.target.result);
fileObject.base64 = base64;
scope.$apply(function() {
ngModel.$setViewValue(angular.copy(fileObject));
});
};
var reader = new FileReader();
reader.onload = scope.readerOnload;
elem.on('change', function() {
var file = elem[0].files[0];
fileObject.filetype = file.type;
fileObject.filename = file.name;
fileObject.filesize = file.size;
reader.readAsArrayBuffer(file);
});
//http://stackoverflow.com/questions/9267899/arraybuffer-to-base64-encoded-string
function _arrayBufferToBase64(buffer) {
var binary = '';
var bytes = new Uint8Array(buffer);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return $window.btoa(binary);
}
}
};
}]);
}]);
