Save a File Image to localstorage HTML

问题:

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

Html:

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

回答1:

You just lack a FileReader to read the input file to dataURL. Jsfiddle

Html:

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') 

Not that the jsfiddle execute this script onload, so you may wrap them in window.onload in your own site.

回答2:

Because of the limited storage quota you've got with localStorage, you may need to check the size of the uploaded image.

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.

This solution may not be the best but it seems to handle a few cases :

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')  -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) ? (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

回答3:

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 

}]);

文章来源: Save a File Image to localstorage HTML