在此代码中将 data:image base64 转换为 blob

Question

我想将 URL 从 data:image base64 更改为 blob。这是生成 base64 url​​ 的原始代码：

<script>

    $(window).load(function(){

    function readURL() {
        var $input = $(this);
        var $newinput =  $(this).parent().parent().parent().find('.portimg ');
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                reset($newinput.next('.delbtn'), true);
                $newinput.attr('src', e.target.result).show();
                $newinput.after('<div class="delbtn delete_upload"  title="Remove"><span class="bbb-icon bbb-i-remove2"></span></div>');


$("form").on('click', '.delbtn', function (e) {
    reset($(this));
    $("form").find('#rright-<?php echo $i;?>').hide();
  });
            }
            reader.readAsDataURL(this.files[0]);
        }
    }
    $(".file").change(readURL);


    function reset(elm, prserveFileName) {
        if (elm && elm.length > 0) {
            var $input = elm;
            $input.prev('.portimg').attr('src', '').hide();

            if (!prserveFileName) {
                $($input).parent().parent().parent().find('input.file ').val("");
                //input.fileUpload and input#uploadre both need to empty values for particular div
            }
            elm.remove();
        }
    }

    });

  </script>

我想要的是调用 Object.createObjectURL(this.files[0]) 来获取对象 URL，并将其用作 img 的 src； （只是不要打扰 FileReader）。

Answer 1

这样的？

function readURL() {
  var file = this.files[0]
  var reader = new FileReader();
  var base64string = getBase64(file);
  reader.onload = function () {
    reset($newinput.next('.delbtn'), true);
    $newinput.attr('src', e.target.result).show();
    $newinput.after('<div class="delbtn delete_upload"  title="Remove"><span class="bbb-icon bbb-i-remove2"></span></div>');

    var blob = dataURItoBlob(base64string);
  };
  reader.onerror = function (error) {
    console.log('Error: ', error);
  };
}

Answer 2

我不确定这是否可行，并且由于 Stack Snippets 的变幻莫测，无法在 Stack Overflow 上展示其可行性，但理论上，您应该能够使用 URL.createObjectURL 为您的图像，无需遍历整个 base 64 繁琐。

var $newinput =  $(this).parent().parent().parent().find('.portimg ');
if (this.files && this.files[0]) {
    $newinput.attr('src', URL.createObjectURL(this.files[0]));
    // if the above doesn't work, you could try to create a new Blob
    var fileBlob = new Blob(this.files[0], { type: "image/png" }) 
    // Substitute "image/png" with whatever image type it is
    $newinput.attr('src', URL.createObjectURL(fileBlob));

这应该为图像的源呈现适当的 URL。

请注意，最佳做法是在您使用完对象 URL 后将其撤消。我不确定在这种情况下是否有必要，因为大概您想在页面关闭之前显示图像。但是，如果用户可以上传新图片，请执行以下操作：

if ($newinput.attr('src').indexOf('blob') > -1) {
    URL.revokeObjectURL($newinput.attr('src'));
}

在设置新源之前添加它，您不必担心内存泄漏（无论如何都使用createObjectURL...）。

有关 Blob URL 的详细信息，请参阅 this answer 由现在匿名的用户发送至 What is a blob URL and why it is used?