File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
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
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!