Javascript，如何保存由javascript更改的图像

Question

我正在制作一些网络照片库，我决定制作一些用于自定义图像的基本内容，例如更改其宽度、高度，在其周围制作一些边框和其他东西。现在，我有非常简单的 JavaScript 方法来更改图像的宽度和高度，如下所示:

function smaller() {
  var image = document.getElementById('forchange');

  var width = image.clientWidth;
  var height = image.clientHeight;

  image.height = height - 50;
  image.width = width - 50;
}

function bigger() {
  var image = document.getElementById('forchange');

  var width = image.clientWidth;
  var height = image.clientHeight;

  image.height = height + 50;
  image.width = width + 50;
}

HTML

{block content}
{snippet changePhoto}
<img src="{$photo}" id="forchange">
{/snippet}
<label>Velkosť </label>

<button type="submit"  onclick="bigger()" value="{$photo}" name="bigger">+</button>
<button type="submit"  onclick="smaller()" value="{$photo}" name="smaller">-</button>
<form action="{link Gallery:change $photo}" method="post" >
<input type = "submit" value="ulozit" name="save">
</form>

它正在工作，图像根据我按下的按钮而变小或变大，但是刷新页面后，图像的宽度和高度与原来相同(逻辑上)。

如何保存或重写磁盘上保存的当前图像文件，以便刷新页面后我可以看到我根据需要自定义的新图像？可以做这样的事情吗？

我在网上搜索了很多，我发现了一些关于 Canvas 的东西和很多东西，但这些似乎都不是我需要的。非常感谢大家的每一个回答。

Answer 1

您在互联网上找到的 Canvas 内容是您可以实现的两种解决方案之一。另一种解决方案是在后端缩小图像。

当您按照自己的方式更改图像宽度和高度时，实际发生的情况是您仍然拥有巨大的大图片，您只是告诉浏览器以较小的宽度和高度渲染它。我们无法访问浏览器渲染的较小图像版本，如果您尝试保存图像，它将保存图像的较大版本。

解决办法

a) 您要求服务器向您发送图像的较小版本。您可以直接使用 PHP 执行此操作，或者更容易，大多数服务器允许您使用 Image Magick 来执行此操作.

b) 您可以在前端压缩和缩小图像。 Here是前端压缩图片的一个例子。要添加缩小尺寸的功能，请将以下代码添加到 compressCanvas 函数中。

canvas.width = width;
canvas.height = height;