在新选项卡中打开特定图像

Question

我必须做一个图像编辑器。 到目前为止，我有这个：2x HTML 页面，第一页用于上传图像和预览 slider 中的图像，第二页是包含基本图像编辑器功能的编辑器； 每个 HTML 页面的 2x CSS 样式； 每个 HTML 页面的 2 个 javascript。

上传图片，预览图片，点击图片打开第二个HTML页面（编辑器），编辑照片，点击保存按钮（关闭编辑器页面）并显示编辑后的图片。

我的问题是当我点击图片时，他会打开编辑器并上传第一张图片。 如果我要上传另一张图片，他仍然会用第一张图片打开一个编辑器。

到目前为止我尝试的是：

1. 每次上传图片时，我都会获取img.src并将其存储在 localStorage 中。 之后，在第二页（编辑器）上，只需从 localStorage 创建一个带有 src 的 img。 它正在工作，但他只会打开最后添加的图像。

2. 每次单击图像并存储在localStorage中时，我都尝试获取img.src 。 它正在工作，但他只会打开添加的第一张图片。

我想要什么：添加 image1 单击在编辑器 image1 中打开的 image1。 关闭编辑器，添加 image2 和 image 3，点击 image3 在编辑器中打开 image3。

这是我尝试过的代码。

这是当我点击图像打开编辑器时。html

$(document).on("click", "img", function() {
    var imgSrc = $("img").attr("src");
    console.log(imgSrc);
    localStorage.setItem("imgSource", imgSrc);
    window.open("editor.html", "_blank");
  });

这是在编辑器上，创建 img 并从 localStorage 获取 src。

 var imgPreview = $("#image-preview");
  createImage()
  function createImage() {
    var editImage = $("<div></div>").addClass("edit-image");
    imgPreview.append(editImage);
    var imageSource = localStorage["imgSource"];
    var img = document.createElement("img");
    img.src = imageSource;
    editImage.append(img);
  }

我只需要一些想法/文档。

对不起，我的英语不好：）

Answer 1

我必须做一个图像编辑器。 到目前为止，我有这个：2x HTML 页面，第一页用于上传图像和预览 slider 中的图像，第二页是包含基本图像编辑器功能的编辑器； 每个 HTML 页面的 2x CSS 样式； 每个 HTML 页面的 2 个 javascript。

上传图片，预览图片，点击图片打开第二个HTML页面（编辑器），编辑照片，点击保存按钮（关闭编辑器页面）并显示编辑后的图片。

我的问题是当我点击图片时，他会打开编辑器并上传第一张图片。 如果我要上传另一张图片，他仍然会用第一张图片打开一个编辑器。

到目前为止我尝试的是：

1. 每次上传图片时，我都会获取img.src并将其存储在 localStorage 中。 之后，在第二页（编辑器）上，只需从 localStorage 创建一个带有 src 的 img。 它正在工作，但他只会打开最后添加的图像。

2. 每次单击图像并存储在localStorage中时，我都尝试获取img.src 。 它正在工作，但他只会打开添加的第一张图片。

我想要什么：添加 image1 单击在编辑器 image1 中打开的 image1。 关闭编辑器，添加 image2 和 image 3，点击 image3 在编辑器中打开 image3。

这是我尝试过的代码。

这是当我点击图像打开编辑器时。html

$(document).on("click", "img", function() {
    var imgSrc = $("img").attr("src");
    console.log(imgSrc);
    localStorage.setItem("imgSource", imgSrc);
    window.open("editor.html", "_blank");
  });

这是在编辑器上，创建 img 并从 localStorage 获取 src。

 var imgPreview = $("#image-preview");
  createImage()
  function createImage() {
    var editImage = $("<div></div>").addClass("edit-image");
    imgPreview.append(editImage);
    var imageSource = localStorage["imgSource"];
    var img = document.createElement("img");
    img.src = imageSource;
    editImage.append(img);
  }

我只需要一些想法/文档。

对不起，我的英语不好：）