This week's giveaway is in the Spring forum.
We're giving away four copies of REST with Spring (video course) and have Eugen Paraschiv on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes Manipulating image data Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login

Win a copy of REST with Spring (video course) this week in the Spring forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Manipulating image data" Watch "Manipulating image data" New topic

Manipulating image data

Peter Lager

Joined: Nov 10, 2012
Posts: 10

I am just started with JavaScript and I am trying to manipulate image data at the pixel level. The code below is taken from a book and it is supposed to
  • load an image,
  • display it in a canvas object,
  • grab the pixels on the left side and invert them and finally
  • display the inverted image

  • Webpage HTML

    Then canvas.js

    I am probably missing something very simple but I can only get the first image to appear. Any help is apprciated.
    Rob Crowther
    Ranch Hand

    Joined: Nov 06, 2012
    Posts: 297

    Are you loading the page by double clicking on the file, or accessing from a web server? Browsers can have security restrictions around getImageData and putImageData on file:/// URLs.

    Read my books: Hello! HTML5 & CSS3 | HTML5 in Action | Read my blog
    Peter Lager

    Joined: Nov 10, 2012
    Posts: 10

    I have been launching it locally using the WebStorm IDE into GoogleChrome.

    Anyway I tried uploading it to a webserver and it worked fine on both GoogleChrome and Firefox and it worked fine. Out of interest I tried opening it locally with FireFox and again it worked. Just seemed to be file:/// URLs with GoogleChrome.

    Since the all the files were in the same directory I did not anticipate security issues becase they were not crossOrigin.

    Thanks for pointing me in the right direction.
    I agree. Here's the link:
    subject: Manipulating image data
    It's not a secret anymore!