javascript - 将图像大小调整为缩略图版本

Question

我有一系列标准照片，我希望用户能够选择它们作为背景照片。我不确定如何调整这些照片的大小。我需要纵横比保持不变，宽度为 400px。我想在文件名末尾添加 -缩略图 重新保存它们。

来自 Controller 的图像

$scope.standardPhotos = [
  "/images/app-directory-images/default1.png",
  "/images/app-directory-images/default2.png",
  "/images/app-directory-images/default3.png",
  "/images/app-directory-images/default4.png",
  "/images/app-directory-images/default5.png"
];

Answer 1

您可以使用 Canvas ，尽管它使用了非常糟糕的算法来进行下采样。我去使用麻省理工学院许可的Hermite downsampler最后，它也可以使用 Canvas ，但不像默认的缩放器那么糟糕。

请注意，如果正确完成，对图片进行重新采样是一项计算资源繁重的操作，因此最好在您选择的任何图像编辑器(甚至 web-app )中预先调整它们的大小，然后将它们上传到您的服务器，以防止每个用户每次都进行这些计算。

保存文件始终受到浏览器限制的限制，您所能做的就是询问用户是否要保存文件。如果您的意思是用户将调整大小的图像发送回服务器以保存它，请特别注意安全性，并且不要假设数据来自服务器端的 javascript。