如何将映像保存到localStorage并将其显示在下一页上?

2020/11/02 07:42 · javascript ·  · 0评论

因此,基本上,我需要上传单个图像,将其保存到localStorage,然后在下一页上显示。

目前,我已经上传了HTML文件:

<input type='file' id="uploadBannerImage" onchange="readURL(this);" />

使用该功能在页面上显示图像

function readURL(input) 
{
    document.getElementById("bannerImg").style.display = "block";

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            document.getElementById('bannerImg').src =  e.target.result;
        }

        reader.readAsDataURL(input.files[0]);
    }
}

图像立即显示在页面上,供用户查看。然后要求他们填写表格的其余部分。这部分工作正常。

填写完表格后,他们将按“保存”按钮。按下此按钮后,我将所有表单输入另存为localStorage字符串。我需要一种将图像另存为localStorage项目的方法。

保存按钮还会将它们定向到新页面。新页面将在表格中显示用户数据,图像在顶部。

如此简单明了,localStorage一旦按下“保存”按钮,我需要保存图像,然后将图像借出到下一页localStorage

在moz:// a HACKS上找到了一些解决方法,例如这种小提琴本文

尽管我仍然对如何工作感到非常困惑,但我只需要一个简单的解决方案。基本上,我只需要通过getElementByID按“保存”按钮找到图像,然后处理并保存图像。

对于也需要解决此问题的人:

首先,我使用获取图像getElementByID,并将其另存为Base64。然后,我将Base64字符串保存为我的localStorage值。

bannerImage = document.getElementById('bannerImg');
imgData = getBase64Image(bannerImage);
localStorage.setItem("imgData", imgData);

这是将图像转换为Base64字符串的函数:

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,/, "");
}

然后,在我的下一页上,我创建了一个带有空白的图像,src如下所示:

<img src="" id="tableBanner" />

直接在页面加载时,我使用下面的三行从中获取Base64字符串localStorage,并将其应用于具有src我创建的空白的图像

var dataImage = localStorage.getItem('imgData');
bannerImg = document.getElementById('tableBanner');
bannerImg.src = "data:image/png;base64," + dataImage;

在许多不同的浏览器和版本中对其进行了测试,并且看起来运行良好。

我在localStorage JQueryImageCaching
用法中
编写了一个小的2,2kb的图像保存库

<img data-src="path/to/image">
<script>
    $('img').imageCaching();
</script>

您可以将图像序列化为数据URI。这篇博客文章中有一个教程这将产生一个可以存储在本地存储中的字符串。然后在下一页上,使用数据uri作为图像源。

document.getElementById('file').addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onloadend = () => {
    // convert file to base64 String
    const base64String = reader.result.replace('data:', '').replace(/^.+,/, '');
    // store file
    localStorage.setItem('wallpaper', base64String);
    // display image
    document.body.style.background = `url(data:image/png;base64,${base64String})`;
  };
  reader.readAsDataURL(file);
});

示例代码笔

如果您的图像不断被裁剪,请使用以下代码在保存到本地存储之前获取图像文件的尺寸。

首先,我将创建一些隐藏的输入框来保存宽度和高度值

<input id="file-h" hidden type="text"/>
<input id="file-w" hidden type="text"/>

然后在输入框中输入文件的尺寸

var _URL = window.URL || window.webkitURL;
$("#file-input").change(function(e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function() {
            $("#file-h").val(this.height);
            $("#file-w").val(this.width);
        };
        img.onerror = function() {
            alert( "not a valid file: " + file.type);
        };
        img.src = _URL.createObjectURL(file);
    }
});

最后,通过指向您的输入框值来更改在getBase64Image()函数中使用的宽度和高度对象

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = $("#file-w").val();
    canvas.height = $("#file-h").val();

另外,所有文件的大小都必须保持在300kb左右。关于stackoverflow的文章涵盖了使用Javascript进行文件大小验证。

“请注意,您需要首先完全加载图像(否则最终将获得空图像),因此在某些情况下,您需要将处理包装到:bannerImage.addEventListener(“ load”,function(){}); – yuga 17年11月1日下午13:04”

这是非常重要的。我今天下午正在探索的选项之一是使用javascript回调方法而不是addEventListeners,因为这似乎也无法正确绑定。在没有页面刷新的情况下,在页面加载之前准备好所有元素非常关键。

如果有人可以对此进行扩展,请这样做-例如,您是否使用settimeout,wait,回调或addEventListener方法来获得所需的结果。哪一个,为什么?

我提出了相同的问题,而不是存储图像,最终导致本地存储溢出,您只需存储图像的路径即可。就像是:

let imagen = ev.target.getAttribute('src');
arrayImagenes.push(imagen);
本文地址:http://javascript.askforanswer.com/ruhejiangyingxiangbaocundaolocalstoragebingjiangqixianshizaixiayiyeshang.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!