12

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

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

该文档还说了一些我不理解的关于 base64 编码的内容。我的问题能解决吗？谢谢！。

4

3 回答 3

17

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

Caman("#my-image", function () {
  this.brightness(10);
  this.render(function () {
    var image = this.toBase64();
    saveToServer(image); // your ajax function
  });
});
于 2013-03-27T14:10:02.577 回答
3

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

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

于 2013-03-27T08:16:13.283 回答
0

或者，您可以在前端本身执行相同的操作，然后上传文件以替换您的图像，而不是将 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")
于 2017-04-05T16:49:05.743 回答