【问题标题】：Reduce size of image when converted to Base64转换为 Base64 时减小图像大小
【发布时间】：2017-05-27 09:37:36
【问题描述】：

我在 JavaScript 中使用文件阅读器，我需要将我的图像发布到 WebApi 并将其转换为字节数组并将其保存在服务器中，它工作正常，现在我的问题是 base64 字符串增加了图像的大小，假设如果我上传 30Kb 的图像，它在服务器中存储了 389Kb，我如何保存相同大小或减小图像大小需要帮助

  //File Reader
function OnFileEditImageEntry(file) {
var reader = new FileReader();
reader.onloadend = function (evt) {
    var ImageBase64 = evt.target.result;
    return ImageBase64 ;
};
reader.readAsDataURL(file);
 }

 //WEB API//
public  IHttpActionResult UpdateUserDetails(ImageModel model)
 {

  try
    {
       if (model.ImageBase64 != "")
        {
          var PicDataUrl = "";
           string ftpurl = "ftp://xxx.xxxxx.xxxx/";
           var username = "xxx";
           var password = "xxxxx";
            string UploadDirectory = "xxxx/xx";
             string FileName =model.ImageFileName;
             String uploadUrl = String.Format("{0}{1}/{2}", ftpurl, UploadDirectory,FileName);
                FtpWebRequest req = (FtpWebRequest)FtpWebRequest.Create(uploadUrl);
                req.Proxy = null;
                req.Method = WebRequestMethods.Ftp.UploadFile;
                req.Credentials = new NetworkCredential(username, password);
                req.EnableSsl = false;
                req.UseBinary = true;
                req.UsePassive = true;
                byte[] data =Convert.FromBase64String(model.ImageBase64);
                req.ContentLength = data.Length;
                Stream stream = req.GetRequestStream();
                stream.Write(data, 0, data.Length);
                stream.Close();
     }
      }
    }

【问题讨论】：

为什么不将它作为原始字节发送？转换为 Base64 肯定会对大小和性能产生一些影响。根据您发送的实际数据，对这些原始字节应用 gzip 压缩甚至可以进一步缩减大小。但是鉴于您正在上传图像，它们已经被压缩（除非您使用的是原始格式），gzip 不会在这里带来太多好处。
我试过 reader.readAsBinaryString(file);在文件阅读器中，它不提供二进制数据，它给了我一些随机字符串，所以我无法将其转换为 webApi 中的字节数组
不同的格式会有不同的大小，所以除非你把它转换回原来的格式，否则你必须预料到这一点。图像的一种常见方法是将图像（作为图像，而不是 base64 字符串）保存在文件夹中，然后将文件名存储在数据库中。处理上传图片的所有方式各有利弊，但对我来说，这是最清晰的做法（如果您想在网站上显示图片，它还可以减少页面加载时间）。
我正在使用 Cordova Camera Api 在该功能成功后从图库中选择图片，我正在调用文件阅读器

标签： javascript c# cordova asp.net-web-api cordova-plugins

【解决方案1】：

发送原始二进制文件，而不是使用 base64/FileReader 增加约 30% 的大小

使用抓取

// sends the raw binary
fetch('http://example.com/upload', {method: 'post', body: file})

// Append the blob/file to a FormData and send it
var fd = new FormData()
fd.append('file', file, file.name)

fetch('http://example.com/upload', {method: 'post', body: fd})

使用 XHR

// xhr = new ...
// xhr.open(...)

xhr.send(file) // or
xhr.send(fd) // send the FormData

通常在上传文件时，尽量避免发送 json，因为许多开发人员往往会出错。 json 中的二进制数据等于不好的做法（和更大的大小），例如：

$.post(url, {
  name: '',
  data: base64
})

尽可能使用 FormData#append 或者如果您愿意：

fd.append('json', json)

【讨论】：