将Blob字符串URL转换为Blob，然后转换为base64

Question

我有一个图像元素，我从中获取Blob字符串URL，然后尝试将其首先转换为Blob，然后转换为base64字符串。 这样我就可以将base64字符串（存储在#originalImage中）发送到服务器端。

JS

            onFinished: function (event, currentIndex) {
            var form = $(this);

            if ($('#image').attr('src').length) {
                var selectedFile = $('#image').attr('src');
                var blob;
                var reader = new window.FileReader();
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    if (this.readyState == 4 && this.status == 200) {
                        blob = this.response;
                        console.log(this.response, typeof this.response);
                        if (blob != undefined) {
                            reader.readAsDataURL(blob);
                        }
                    }
                }
                xhr.open('GET', selectedFile);
                xhr.responseType = 'blob';
                xhr.send();


            }
            reader.onloadend = function () {
                base64data = reader.result;
                console.log(base64data);
                if (base64data != undefined) {
                    $("#originalImage").val(base64data);
                    form.submit();
                }

            }

        }

控制者

        [HttpPost]
        public ActionResult Action(Model blah, string croppedImage, string originalImage){
              // Code here...
         }

它可以按预期工作，但我唯一关心的是我提交了reader.onloadend内部的表单。 这种方法有什么问题吗？有没有比这更好的方法了？

我对此表示感谢，谢谢！

Answer 1

不要使用base64，将二进制文件发送到服务器，节省时间，进程，内存和带宽

onFinished(event, currentIndex) {
  let src = $('#image').attr('src')

  if (src.length) {
    fetch(src)
    .then(res => 
      res.ok && res.blob().then(blob =>
        fetch(uploadUrl, {method: 'post', body: blob})
      )
    )
  }
}

您还可以做的是使用画布并避免其他请求（但这会将所有图像转换为png）

onFinished(event, currentIndex) {
  let img = $('#image')[0]
  if (!img.src) return

  let canvas = document.createElement('canvas')
  let ctx = canvas.getContext('2d')
  canvas.width = img.width
  canvas.height = img.height
  ctx.drawImage(img, 0, 0)
  canvas.toBlob(blob => {
    fetch(uploadUrl, {method: 'post', body: blob})
  })
}