Get base64 of image from input in ie7?

Question

I have a function in jquery that allows me to get the name of a file that was uploaded in ie7. I am able to get the name of the file, but I am also trying to get the base64 string of the file. Is there any way to alter this function below to do that?

var thumbnail_title_preview = {

    update: function(value, event_target) {

        var parent_upload_fields = $(event_target).parents('.upload-photos');
        var photos_list = $('.upload-photos-list-inner', parent_upload_fields);

        var thumbnail = document.createElement("div");
        $(thumbnail).addClass('uploaded-thumbnail-title');

        var file_name = value;

        if(ie7) {
            file_name_array = file_name.split('\\');
            file_name = file_name_array[file_name_array.length - 1];

        } else {
            file_name = file_name.replace('C:', '');
            file_name = file_name.replace('D:', '');
            file_name = file_name.replace('\\fakepath\\', '');

        }

        if(file_name.length > 12) {
            file_name = file_name.substring(0, 12) + '...';
        }

        $(thumbnail).append('<p>' + file_name + '</p>');

        $(thumbnail).append('<a class="remove-photo" href="#"></a>');
        $(photos_list).append(thumbnail);

        var number_of_thumbnails = $('.uploaded-thumbnail-title', parent_upload_fields).length;
        $(photos_list).css({ 'width': number_of_thumbnails * (117 + 20) });

        if(number_of_thumbnails == 5) {
            $('.upload-photos-add', parent_upload_fields).css({ 'display': 'none' });
            $(parent_upload_fields).addClass('has-five-photos');
        } else {
            $(parent_upload_fields).removeClass('has-five-photos');
        }

        if(ie7) {
            updateTinyScrollbar();

        } else {
            $('.upload-photos-list').perfectScrollbar('update');

            var scrollbar_style = $('.ps-scrollbar-x-rail', parent_upload_fields).css('display');

            if(scrollbar_style == 'block') {
                $(parent_upload_fields).addClass('has-perfect-scrollbar');
            } else {
                $(parent_upload_fields).removeClass('has-perfect-scrollbar');
            }

        }

    }
}

This is the html:

<div class="upload-photos clearfix" runat="server">

    <div class="upload-photos-add" id="Q0011_00" runat="server">
        <asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server" AllowedFileTypes="jpg,jpeg,png,gif" OnClientUploadComplete="onClientUploadComplete" OnClientUploadCompleteAll="onClientUploadCompleteAll" OnClientUploadStart="onClientUploadStart"  ></asp:AjaxFileUpload>
    </div>

    <div class="upload-photos-list">
        <div class="upload-photos-list-inner clearfix" runat="server" id="divUploadListDynamic0011_00">
        </div>                                                                              
    </div>

</div>

Answer 1

If image file is not crossOrigin (see canvas.toDataURL() SecurityError , Understanding the HTML5 Canvas image security rules) , should be able to retrieve data-uri representation of image file utilizing HTMLCanvasElement.toDataURL() . If the image file , or src is crossOrigin , could utilize FileReader to retrieve data-uri of DOM img element - as type text/html - instead of canvas's .toDataURL() (type image/png) , to avoid possible CORS issue with tainted canvas (see links above)

Try

    var body = document.body;
    var img = document.createElement("img");
    // `value` : `img` path (local , _not_ `crossOrigin`)
    img.src = value;
    // set `display`:`none` at `img` if _not_ displaying "original" `img`
    // img.style.display = "none";
    body.appendChild(img);
    var canvas = document.createElement("canvas");
    // set `display`:`none` at `canvas` , 
    // if _not_ displaying `canvas` (`thumbnail`)
    var ctx = canvas.getContext("2d");
    body.appendChild(canvas);
    // `data-uri` of `thumbnail` image
    // to retrieve `base64` encoding only , `datauri.split(",")[1]`
    // `datauri.split(",")
    var datauri;
    img.addEventListener("load", function(e) {
      // adjust `thumbnail` `width` , `height` here
      canvas.width = "50";
      canvas.height = "50";
      ctx.drawImage(e.target, 0, 0);
      // `img` `data-uri` , scaled to `canvas` `width` , `height`
      datauri = canvas.toDataURL();
      // do stuff with `datauri` of `img`
      body.appendChild(document.createElement("br"));
      // `datauri` of `thumbnail` image
      body.appendChild(document.createTextNode(datauri));
      return false
    }, false);

    var value = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAABa0lEQVR4Xu3VwQkAQAjEQO2/aA+uijzGCkLC4s7cjcsYWEEyLT6IIK0egsR6CCJIzUCMxw8RJGYghmMhgsQMxHAsRJCYgRiOhQgSMxDDsRBBYgZiOBYiSMxADMdCBIkZiOFYiCAxAzEcCxEkZiCGYyGCxAzEcCxEkJiBGI6FCBIzEMOxEEFiBmI4FiJIzEAMx0IEiRmI4ViIIDEDMRwLESRmIIZjIYLEDMRwLESQmIEYjoUIEjMQw7EQQWIGYjgWIkjMQAzHQgSJGYjhWIggMQMxHAsRJGYghmMhgsQMxHAsRJCYgRiOhQgSMxDDsRBBYgZiOBYiSMxADMdCBIkZiOFYiCAxAzEcCxEkZiCGYyGCxAzEcCxEkJiBGI6FCBIzEMOxEEFiBmI4FiJIzEAMx0IEiRmI4ViIIDEDMRwLESRmIIZjIYLEDMRwLESQmIEYjoUIEjMQw7EQQWIGYjgWIkjMQAzHQgSJGYjhPE5Hx53K44yoAAAAAElFTkSuQmCC";
    var body = document.body;
    var img = document.createElement("img");
    // `value` : `img` path (local , _not_ `crossOrigin`)
    img.src = value;
    img.title = "original image";
    // set `display`:`none` at `img` if _not_ displaying "original" `img` (left)
    // diplayed here to view different dimensions between "original image" ,
    // "thumbnail image" (right)
    // img.style.display = "none";
    body.appendChild(img);
    // space between original image and `thumbnail` image
    body.appendChild(document.createTextNode(" "));
    var canvas = document.createElement("canvas");
    canvas.title = "thumbnail image";
    var ctx = canvas.getContext("2d");
    body.appendChild(canvas);
    var datauri;
    img.addEventListener("load", function(e) {
      // adjust `thumbnail` `width` , `height` here
      canvas.width = "50";
      canvas.height = "50";
      ctx.drawImage(e.target, 0, 0);
      // `img` `data-uri` , scaled to `canvas` `width` , `height`
      datauri = canvas.toDataURL();
      // do stuff with `datauri` of `img`
      body.appendChild(document.createElement("br"));
      body.appendChild(document.createTextNode(datauri));
      return false
    }, false);