wood burning stoves 2.0*
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
Author

Manipulating image data

Peter Lager
Greenhorn

Joined: Nov 10, 2012
Posts: 6

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
    author
    Ranch Hand

    Joined: Nov 06, 2012
    Posts: 295
        
        5

    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
    Greenhorn

    Joined: Nov 10, 2012
    Posts: 6

    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: http://aspose.com/file-tools
     
    subject: Manipulating image data