Question

所以我有一些图像，我可以使用CamanJS插件成功地对它们应用效果。但现在我想保存这些改变的图像并用原始图像替换它们。

文档（link）提供有关保存图像的信息。但它被视为下载提示。我希望图像在没有提示的情况下保存在服务器上，并且单击“保存”按钮。

该文档还说明了一些我不理解的base64编码。我的问题可以解决吗？谢谢！。

Answer 1

CamanJS具有内置函数，可帮助您获取图像的Base64表示。您可以通过Ajax将其发送到服务器，解码base64字符串，并将其保存为普通图像。

Caman("#my-image", function () {
  this.brightness(10);
  this.render(function () {
    var image = this.toBase64();
    saveToServer(image); // your ajax function
  });
});

Answer 2

正如您在此答案中所看到的：https://stackoverflow.com/a/6150397/1437005您可以使用<canvas>和函数toDataURL()获取图像的base64表示。

当你获得base64字符串时，你可以使用AJAX将图像发送到服务器（你可以使用jQuery $.ajax或$.post方法），然后在服务器中你可以将de base64字符串解码为一个图像并存储它。

Answer 3

或者不是将Base64版本发送到服务器并进行转换，您可以在前端本身执行相同的操作，然后上传文件以替换您的图像。这样您就不需要编写新服务来进行转换和替换。获取@Ryan提到的Base64数据，然后使用以下函数将其转换为File / Blob。

export const convertToBlob = (data, successCallBack, errorCallback) => {
  fetch(data)
  .then((res) => res.blob())
  .then((blob) => successCallBack(blob))
  .catch((err) => errorCallback(err))
}

export const successCallBack = (blob) => { uploadBlobToServer(blob) }

如果您的服务只接受File对象（不是Blob对象），只需使用以下命令将Blob转换为File：

const imageFile = new File([blob], "imageFileName")

通过CamanJS插件更改后保存图像

3 个答案: