Get base64 images 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 can get the file name, but I'm also trying to get the base64 string of the file. Is there a way to change this function below to do this?

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 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 the image file is not crossOrigin (see canvas.toDataURL () SecurityError , Understanding HTML5 image security rules ), you should be able to get the data-uri representation of the image file using HTMLCanvasElement.toDataURL () . If the image file or src is equal to crossOrigin , you can use FileReader to retrieve the data-uri of the DOM img element - like type text/html - instead of canvas .toDataURL() ( type image/png ) to avoid a possible CORS problem 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); png; base64, iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAABa0lEQVR4Xu3VwQkAQAjEQO2 / aA + uijzGCkLC4s7cjcsYWEEyLT6IIK0egsR6CCJIzUCMxw8RJGYghmMhgsQMxHAsRJCYgRiOhQgSMxDDsRBBYgZiOBYiSMxADMdCBIkZiOFYiCAxAzEcCxEkZiCGYyGCxAzEcCxEkJiBGI6FCBIzEMOxEEFiBmI4FiJIzEAMx0IEiRmI4ViIIDEDMRwLESRmIIZjIYLEDMRwLESQmIEYjoUIEjMQw7EQQWIGYjgWIkjMQAzHQgSJGYjhWIggMQMxHAsRJGYghmMhgsQMxHAsRJCYgRiOhQgSMxDDsRBBYgZiOBYiSMxADMdCBIkZiOFYiCAxAzEcCxEkZiCGYyGCxAzEcCxEkJiBGI6FCBIzEMOxEEFiBmI4FiJIzEAMx0IEiRmI4ViIIDEDMRwLESRmIIZjIYLEDMRwLESQmIEYjoUIEjMQw7EQQWIGYjgWIkjMQAzHQgSJGYjhPE5Hx53K44yoAAAAAElFTkSuQmCC";  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);