有没有办法让编辑后的图片可以下载到 javascript

Question

Hi I am making a web app that takes a normal image and helps you to edit it.

> > This is the function for applying the filters on the user image.
function applyFilter() {
  var computedFilters = "";
  controls.forEach(function (item) {
    computedFilters +=
      item.getAttribute("data-filter") +
      "(" +
      item.value +
      item.getAttribute("data-scale") +
      ") ";
  });
  image.style.filter = computedFilters;
  downloadableImage.style.filter = computedFilters;
}

> > > Here I am adding the eventListener for showing the live editing image to the user.
userFile.addEventListener("change", function () {
  const reader = new FileReader();

  reader.addEventListener("load", () => {
    localStorage.setItem("userImage", reader.result);
    image.setAttribute("src", localStorage.getItem("userImage"));
    downloadableImage.setAttribute("src", reader.result);
    downloadLink.setAttribute("href", localStorage.getItem("userImage"));
  });
  reader.readAsDataURL(this.files[0]);
});

I want to make the image that is downloadable to be edited according to the user.

Answer 1

只是为了下载图片，只需要在下载中添加一个download属性即可link.
在你的情况下，做 downloadLink.setAttribute("download", "download")
编辑：
好吧，我不太确定在您的情况下该怎么做，但 this link 可能会有所帮助。它解释了 blob 和对象 URLS，你会是：

为图像创建 blob 和对象 URL
将下载属性赋予downloadLink
将 href 属性指定为 blob URL
而且有效！

重要您还应该阅读 this mdn doc 以获得有关 ObjectURLS 的更多信息。请记住，一旦进行了编辑，您必须删除（撤销）每个 URL 并创建一个新对象URL:

Blobs are objects that are used to represent raw immutable data. Blob objects store information about the type and size of data they contain, making them very useful for storing and working file contents on the browser.

它们没有改变（原始的、不可变的数据），因此当您不再需要它们时应该删除它们：

Browsers will release object URLs automatically when the document is unloaded; however, for optimal performance and memory usage, if there are safe times when you can explicitly unload them, you should do so

有关详细信息，请参阅 here and here

有没有办法让编辑后的图片可以下载到 javascript

Is there any way to make the edited image downloadable in javascript

javascript

image

download

web