用图片选择替换点击图片答案

【问题标题】：Replace image on click with image select用图片选择替换点击图片
【发布时间】：2017-04-16 17:48:30
【问题描述】：

我已经设置了一个带有基本标题的小模板。我正在尝试制作类似于拖放网站建设的东西，但在这种情况下，布局将是相同的，只是内容发生了变化。

正如我所说，我创建了一个标题元素并给它一个背景图片

header {
  width: 100%;
  height: 200px;
  background: url(https://pearsonified.com/theme/neoclassical/wp-content/themes/neoclassical/headers/header_2.jpg) center center no-repeat;
  background-size: cover;
}

要让图片在点击时发生变化，我可以这样做

$(function() {
    $('#header').click(function() {
     $(this).css('background', 'url(https://pearsonified.com/theme/neoclassical/wp-content/themes/neoclassical/headers/header_1.jpg)');
    });
});

我已经建立了一个例子JSFiddle。尽管这与我想要做的类似，但我不想更改为硬编码图像，而是希望允许用户从他们的计算机中选择图像。所以有点像图片上传选择选项，但在这种情况下，我没有上传任何东西。我的目标是有一个保存按钮，它将为这些更新生成 HTML/CSS 文件。

所以我想知道如何让用户选择他们想要用什么图像替换默认图像？

谢谢

【问题讨论】：

你在说什么样的“更新”？您是否希望所有访问您网站的人都能看到新图像？如果是这样，您认为如果不以一种或另一种方式将图像上传到网络服务器，它会如何工作？
所以基本上是用户选择文件时的图像预览。像这样的jsfiddle.net/danialfarid/maqbzv15/1118？
不希望为访问该站点的每个人进行更新，仅针对该站点上的人。所以这将位于舞台服务器上。然后我访问它，单击图像并将其更改为我自己的图像。然后我将有一个保存按钮，用于下载更新的源。下一位访问的人将看到原件。

标签： javascript jquery html image

【解决方案1】：

你想做的事情很棘手。这是一个可能的解决方案。

正如this question 所引用的，您可以让客户端“上传”他们的图像以便在 Javascript 中进行操作：

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

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

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

And the HTML:

        <input type='file' id="imgInp" onchange="readURL(this);" />
        <img id="blah" src="#" alt="your image" />

然后可能使用 base64 编码的图像并将其运行到您的背景 url 参数中：

background:url(data:base64;image/jpg,IMAGINE_BASE64_JIBBERISH_HERE)

我会假设 reader.result 在开头包含 data:base64;image/(type), 内容，但您必须自己尝试一下。

这里有一些阅读材料：

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
http://jsfiddle.net/0GiS0/Yvgc2/（工作中的 FileReader 示例，可能有用）
http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api

【讨论】：