Javascript - 将网站上的图像更改为本地文件

Question

我有一个脚本，我希望最终用户能够指定一个图像（使用文件选择器）来更改网站的背景。但我不希望他们实际将文件上传到服务器，因为这不仅是多余的（因为他们会在背景发生变化时重新下载它）而且因为它是用户脚本也是不可能的。相反，我只是希望后台 src 更改为本地文件路径。

如何最好地做到这一点？出于某种原因，文件选择器表单元素仅允许 javascript 访问文件名而不是完整路径。只要用户不必手动输入文件路径，我就可以使用不同的 HTML 元素。

Answer 1

您可以使用FileReader API 将图像编码为data: URL，并将其保存在浏览器的LocalStorage 中。但是，如果用户清除浏览器历史记录，背景也会丢失。

我已经编写了一些示例代码来帮助您入门：

HTML

<input id="image-input" type="file">

JavaScript

var input = document.getElementById('image-input'),
    tag = document.getElementsByTagName('html')[0];

input.addEventListener('change', function() {

    var file = input.files[0],
        reader = new FileReader();

    if( !file ) {
        return;
    }

    reader.addEventListener('load', function( evt ) {

        localStorage['background-image'] = reader.result;

        tag.style.backgroundImage = 'url(' + reader.result + ')';

    });

    reader.readAsDataURL(file);

});

if( localStorage['background-image'] ) {
    tag.style.backgroundImage = 'url(' + localStorage['background-image'] + ')';
}

有一个 JSFiddle 可用 here（请注意，我已经注释掉了 localstorage 代码，因为它在 JSFiddle 中是不允许的）。