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

时间:2016-11-15 09:51:41

标签: javascript jquery asp.net-mvc base64 bloburls

我有一个图像元素,我从中获取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中。这种方法有什么问题,还是有比这更好的方法?

感谢您对此提供任何帮助,谢谢!

1 个答案:

答案 0 :(得分: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})
  })
}