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

【问题标题】：Saving images after altering them by CamanJS plugin通过 CamanJS 插件更改图像后保存图像
【发布时间】：2013-03-17 05:59:26
【问题描述】：

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

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

文档还提到了一些我不理解的 base64 编码。我的问题能解决吗？谢谢！。

【问题讨论】：

标签： php javascript html web

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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")

【讨论】：