0

How to convert an Image(png) to byte code in Javascript. I've used this code but in IE8 there is no use in this code because there is no support of canvas element in IE8.

function getBase64Image(){     
    p=document.getElementById("fileUpload").value;
    img1.setAttribute('src', p); 
    canvas.width = img1.width; 
    canvas.height = img1.height; 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img1, 0, 0); 
    var dataURL = canvas.toDataURL("image/png");alert("from getbase64 function"+dataURL );    
    return dataURL;
}

Is any other way to get image byte code in IE8. I need either from Image to base64 byte code in a html page or from any image url base64 byte code.

My image url is like this is there any other way to get image byte code in javascript.

Hariprasath
  • 828
  • 4
  • 15
  • 41
  • Possibly related http://stackoverflow.com/questions/16137406/convert-a-byte-array-to-image-data-without-canvas – megawac Nov 14 '13 at 05:56
  • http://stackoverflow.com/questions/10576496/image-from-bytearray-not-complete-in-ie8 – Dhamu Nov 15 '13 at 14:32
  • http://stackoverflow.com/questions/15721286/screenshot-of-a-div-with-html2canvas-sent-to-php-saved-corrupted-image – Dhamu Nov 15 '13 at 14:34

1 Answers1

1

Simple answer is unfortunately you can't - out of the box.

As you say, IE8 does not support the canvas element so there is no way to extract the image data as bytes as you would need to go by the canvas and then use toDataURL or getImageData.

There are poly-fills for IE8 that allows you to use the basic functions such as excanvas. This however does not support pixel extraction as with the two above mentioned metods.

There are two work-arounds:

  1. Use server: send image to server and process it there
  2. Use Flash-based canvas "poly-fills" which allow you to do this.

For the latter point there are a few options such as this one:
http://flashcanvas.net/

  • is there any way to send image in a div element to the java class – Hariprasath Nov 14 '13 at 06:27
  • @Hariprasath you can only send its original url. Canvas is needed to get image data and even then Cross-Origin restrictions may interfere. –  Nov 14 '13 at 06:39
  • //chart.googleapis.com/chart?cht=bvg&chs=260x180&chxt=x%2Cy&chxl=1%3A%7C%240%7C%24500%7C%241000%7C%241500%7C%242000%7C%242500%7C0%3A%7C0-4%7C5-18%7C19-45%7C46-64%7C65%2B&chdlp=r&chco=3399FF%2CC0C0C0&chxr=1%2C0%2C1481&chbh=a%2C0%2C15&chd=t%3A202%2C216%2C248%2C517%2C1481%7C130%2C0%2C458%2C623%2C680&chg=0%2C20%2C0&chxs=1N*cUSD%2C%2C13%2C0%2C_&chds=0%2C2500 This is my image url is there any other way to convert this image url to base64 encoded data in javascript – Hariprasath Nov 15 '13 at 12:51
  • @KenFyrstenberg what u mean by send image to server and process it there(here we are not able get image from canvas) – user2779544 Dec 09 '13 at 14:18