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

Question

I'd like to change the URLs from data:image base64 to blob. This is the original code that produces the base64 urls:

<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>

What I want is to call Object.createObjectURL(this.files[0]) to get the object URL, and use that as the src of your img; (just don't even bother with the FileReader).

Answer 1

Something like this?

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

I'm not sure if this will work and due to the vagaries of Stack Snippets, can't demonstrate its viability here on Stack Overflow, but theoretically, you should be able to use URL.createObjectURL to create the appropriate URL for your image, without going through the whole base 64 rigmarole.

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));

That should render the appropriate URL for the image's source.

Note that it is best practice to revoke the object URL when you are done with it. I'm not sure that's necessary in this case, since presumably you want to show the image until the page is closed. However, if the user can upload a new image, do something like:

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

Add that before setting the new source and you shouldn't need to worry about memory leaks (from this use of createObjectURL anyway...).

For more information on Blob URLs, see this answer by a now-anonymous user to What is a blob URL and why it is used?