Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]


Groups > comp.lang.javascript > #30822

Re: Read image data to a string or array? "clientside"

Newsgroups comp.lang.javascript
Date 2016-07-05 20:48 -0700
References <24a2e264-b456-4b4c-841f-67386d7962f3@googlegroups.com> <4f622ae7-c621-4c8d-871d-e16d4c05f836@googlegroups.com> <670d233b-2f57-4a75-ba53-1403abdb6ac3@googlegroups.com>
Message-ID <bde12f40-73b3-42e4-b1df-e452c913d430@googlegroups.com> (permalink)
Subject Re: Read image data to a string or array? "clientside"
From jonas.thornvall@gmail.com

Show all headers | View raw


Den onsdag 6 juli 2016 kl. 05:16:57 UTC+2 skrev jonas.t...@gmail.com:
> Den onsdag 6 juli 2016 kl. 05:11:25 UTC+2 skrev jonas.t...@gmail.com:
> > Den onsdag 6 juli 2016 kl. 04:48:17 UTC+2 skrev jonas.t...@gmail.com:
> > > If i load an image in a HTML file, is it possible to read in the actual image data to array or string for manipulation?
> > > 
> > > If so could you point to an example, preferably i would like binaries from a PNG without any header information just pixeldata lines and rows.
> > 
> > 
> > I did find a very good example.
> > 
> > <!DOCTYPE html>
> > <html>
> > <body>
> > 
> >   <img id="scream" src="my.png" alt="The Scream" width="1366" height="768">
> > 
> >   <canvas id="myCanvas" width="1366" height="768" style="border:1px solid #d3d3d3;">
> >     Your browser does not support the HTML5 canvas tag.
> >   </canvas>
> > 
> >   <script>
> >     document.getElementById("scream").onload = function () {
> >     var c = document.getElementById("myCanvas");
> >     var ctx = c.getContext("2d");
> >     var img = document.getElementById("scream");
> >     ctx.drawImage(img, 0, 0);
> >     var imgData = ctx.getImageData(0, 0, c.width, c.height);
> >     // invert colors
> >     for (var i = 0; i < imgData.data.length; i += 4) {
> >         imgData.data[i] = 255 - imgData.data[i];
> >         imgData.data[i + 1] = 255 - imgData.data[i + 1];
> >         imgData.data[i + 2] = 255 - imgData.data[i + 2];
> >         imgData.data[i + 3] = 255;
> >     }
> >     ctx.putImageData(imgData, 0, 0);
> > };
> >   </script>
> > 
> > </body>
> > </html>
> 
> I try to understand the above script, is imagedata always translated into 32-bit? Could i tell i want the image buffer to be 8,16,24-bit imagedata?

I do not understand why the last 8-bit value in pixel always 255 does he somehow discard the las 8-bit in format and impose a 24-bit?

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread


Thread

Read image data to a string or array? "clientside" jonas.thornvall@gmail.com - 2016-07-05 19:48 -0700
  Re: Read image data to a string or array? "clientside" jonas.thornvall@gmail.com - 2016-07-05 20:11 -0700
    Re: Read image data to a string or array? "clientside" jonas.thornvall@gmail.com - 2016-07-05 20:16 -0700
      Re: Read image data to a string or array? "clientside" jonas.thornvall@gmail.com - 2016-07-05 20:48 -0700
        Re: Read image data to a string or array? "clientside" jonas.thornvall@gmail.com - 2016-07-05 21:49 -0700
          Re: Read image data to a string or array? "clientside" jonas.thornvall@gmail.com - 2016-07-05 23:07 -0700

csiph-web