convert image to byte code in javascript IE8

Question

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.

Possibly related stackoverflow.com/questions/16137406/…

megawac
– megawac

2013-11-14 05:56:02 +00:00
Commented Nov 14, 2013 at 5:56 — megawac
– megawac, Commented Nov 14, 2013 at 5:56
stackoverflow.com/questions/10576496/…

Dhamu
– Dhamu

2013-11-15 14:32:11 +00:00
Commented Nov 15, 2013 at 14:32 — Dhamu
– Dhamu, Commented Nov 15, 2013 at 14:32
stackoverflow.com/questions/15721286/…

Dhamu
– Dhamu

2013-11-15 14:34:41 +00:00
Commented Nov 15, 2013 at 14:34 — Dhamu
– Dhamu, Commented Nov 15, 2013 at 14:34

user1693593 · Accepted Answer · 2013-11-14 06:23:01Z

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:

Use server: send image to server and process it there
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/

answered Nov 14, 2013 at 6:23

user1693593

Sign up to request clarification or add additional context in comments.

4 Comments

Hariprasath Over a year ago

is there any way to send image in a div element to the java class

user1693593 Over a year ago

@Hariprasath you can only send its original url. Canvas is needed to get image data and even then Cross-Origin restrictions may interfere.

Hariprasath Over a year ago

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

user2779544 Over a year ago

@KenFyrstenberg what u mean by send image to server and process it there(here we are not able get image from canvas)

Collectives™ on Stack Overflow

convert image to byte code in javascript IE8

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related