www.webdeveloper.com
Results 1 to 14 of 14

Thread: Image Processing in Javascript

  1. #1
    Join Date
    Apr 2011
    Posts
    11

    Image Processing in Javascript

    Hi all, im new here, and new to javascript in general!

    I have to design a web application that does a number of things:

    • creates a slideshow from images a user selects
    • allows the user to add effects to these images
    • the slideshow runs with the added effects


    Im a student who has never touched JS before, so im a tad lost! are there any good sites, tutorials around that could get me on the right track with this?

    Thanks!

  2. #2
    Join Date
    Apr 2011
    Posts
    11

    bump

    just thought id bump this up!

  3. #3
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by royallondon View Post
    Im a student who has never touched JS before,
    If so, who gave you that task? Before anything you must learn the JavaScript language:

    http://www.w3schools.com/js/default.asp
    http://www.howtocreate.co.uk/tutorials/javascript/

  4. #4
    Join Date
    Apr 2011
    Posts
    11
    my uni lecturer, i feel its an ambitiuos task as we have never used JS! thanks for the links ill take a look

  5. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Anyway, what do you mean by "allows the user to add effects to these images". What effects do you have in mind?

  6. #6
    Join Date
    Apr 2011
    Posts
    11
    Like, blur,greyscale etc

  7. #7
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by royallondon View Post
    Like, blur,greyscale etc
    No way with simple JavaScript. JavaScript can not handle images that way. JavaScript can change the CSS properties of an element, but not so deep. Well, there might be some intricate but drastically limited solutions using HTML5 and CSS3 (which for sure will not work cross browser, so far).

    There might be, also, done with a complex AJAX+server-side code, but that is limited by the possibilities of that server-side language (PHP, ASP.NET, ?) you may have in hand.

    Or a plug-in Flex/Flash/ActionScript solution. Or maybe Silverlight (for IE only).

    This is a hat much too large for the head of a perfect beginner you said you are.
    Last edited by Kor; 04-18-2011 at 02:34 PM.

  8. #8
    Join Date
    Dec 2005
    Posts
    2,984
    If you've never been given JS instruction (and are not presumed to have any knowledge about the language a priori) then you may want to ask your lecturer for clarification on the assignment because, as Kor said, doing this as completely green as you are is extremely difficult.

    And the whole blur, grayscale thing - that's pretty much out of the question using JS alone.

  9. #9
    Join Date
    Apr 2011
    Posts
    11
    We've had very little instruction on it, but from his notes we are to create this using js, as I said I dint know the language at all but he wants us to process the pixels in the canvas element, I've been looking at the pietistic library, I'm hoping I'll be able to get something together to at least get a pass!

    Thanks for your help guys.

  10. #10
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    As I said, yes, it is possible on using HTML5, CSS3 and JavaScript 1.5 or later, but it is not yet crossbrowser, because those languages are incomplete implemented in different browsers so far.

    Handling pixels is not impossible, but it's a rough method, and you need an algorithm

    Anyway, here's something which might help you:

    http://www.flother.com/blog/2010/ima...-html5-canvas/
    http://aautar.digital-radiation.com/blog/?p=2519
    http://www.permadi.com/tutorial/jsCa...ale/index.html

    You may also Google for HTML5+effect

    But, I repeat, it will be very hard for you to understand those codes without at least the average understanding of the JavaScript, HTML5 and CSS3 languages

  11. #11
    Join Date
    Mar 2010
    Posts
    128
    Just an idea, and not AT ALL the right way to do this, but in such a situation where you have limited knowledge and are trying to do something which will quickly become overly difficult...

    If you can control which images are available for selection, you could technically take each image and in photoshop or something apply all the different effects. Then you would have say, Picture A normal, Picture A Grey scale, Picture A Sepia, Picture A Black and White, and so on. Then when a user chooses say picture c black and white, you could just show the picture c that is black and white, since you already have it... Hope that makes sense...

    If the user has have the ability to upload their own images, and then apply effects... Good luck doing that with Javascript. Realy, if that was what you are trying to accomplish, you should handle the image processing/upload on the server with php, and then let the interface handle the javascript.

  12. #12
    Join Date
    Apr 2011
    Posts
    11
    hi all, i thought id ask another question! im moving along (slowly)

    I have create some image effects a red hue and a greyscale, now, im wondering if it is possible to have a bit of JS that runs from a drop down box to select which code to run, if that makes sense?

    So, id have the original image on screen, below it, a drop down menu with the options {red} {grey} then when the option is clicked (guess it has something to do with onclick!? the new image is displayed?

    here is my code, that might help more than my waffling!

    html index
    <HTML>
    <HEAD>
    <TITLE>My Web Page</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    <script type="text/javascript" src="Red_hue.js"></script>
    <script type="text/javascript" src="greyscale.js"></script>
    </HEAD>
    <BODY> <p>
    <div id='aDiv1'>
    <div id='srcImgDiv'></div>
    <script type="text/javascript">
    srcImg();
    </script>
    </div>
    <br>
    <div id='aDiv2'>
    <canvas id="Red" width="130" height="130"></canvas><br>
    <canvas id="Grey" width="130" height="130"></canvas><br>
    </div>
    </p>
    ///////////////////////////////////////////////////////////////////////
    </BODY>
    </HTML>
    Red effect js

    // Set and load the source image.
    var mySrcImg = new Image();
    mySrcImg.src = "flower.jpg";

    // You can also add a function call to the onload event of an img.
    // The key thing to remember is that the image MUST be loaded.
    mySrcImg.addEventListener('load', function () {
    invertImg();
    }, false);

    function srcImg() {
    document.getElementById("srcImgDiv").appendChild(mySrcImg);
    document.writeln("Src Image from var.");
    }

    function invertImg() {
    var canvas = document.getElementById("Red");
    var context = canvas.getContext("2d");

    //canvas.width = mySrcImg.width;
    //canvas.height = mySrcImg.height;
    context.fillStyle = "rgb(0,200,0)";
    context.fillRect (0, 0, 300, 300);

    // Copy the image contents to the canvas
    context.drawImage(mySrcImg, 0, 0);

    // Get your image data.
    var myImageData;
    try {
    myImageData = context.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
    netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
    myImageData = context.getImageData(0, 0, canvas.width, canvas.height);
    }

    // Loop over each pixel and invert the colours.
    var pixelComponents = myImageData.data;
    for (var i = 0; n = pixelComponents.length, i < n; i += 4) {
    // One pixel:
    pixelComponents[i ] = pixelComponents[i ] + 100; // red
    pixelComponents[i+1] = pixelComponents[i+1]; // green
    pixelComponents[i+2] = pixelComponents[i+2]; // blue
    // i+3 is alpha (the fourth element)
    }

    // Draw the ImageData object at the given (x,y) coordinates.
    context.putImageData(myImageData, 0,0);
    }
    grey effect js
    // JavaScript Document

    // Set and load the source image.
    var mySrcImg = new Image();
    mySrcImg.src = "flower.jpg";

    // You can also add a function call to the onload event of an img.
    // The key thing to remember is that the image MUST be loaded.
    mySrcImg.addEventListener('load', function () {
    invertImg();
    }, false);

    function srcImg() {
    document.getElementById("srcImgDiv").appendChild(mySrcImg);
    document.writeln("Src Image from var.");
    }

    function invertImg() {
    var canvas = document.getElementById("Grey");
    var context = canvas.getContext("2d");

    //canvas.width = mySrcImg.width;
    //canvas.height = mySrcImg.height;
    context.fillStyle = "rgb(0,200,0)";
    context.fillRect (0, 0, 300, 300);

    // Copy the image contents to the canvas
    context.drawImage(mySrcImg, 0, 0);

    // Get your image data.
    var myImageData;
    try {
    myImageData = context.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
    netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
    myImageData = context.getImageData(0, 0, canvas.width, canvas.height);
    }

    // Loop over each pixel and invert the colours.
    var pixelComponents = myImageData.data;
    for (var i = 0; n = pixelComponents.length, i < n; i += 4) {
    var avg = (pixelComponents[i] + pixelComponents[i+1] + pixelComponents[i+2]) / 3;
    // One pixel:
    pixelComponents[i ] = pixelComponents[i ] = avg ; // red
    pixelComponents[i+1] = pixelComponents[i+1] = avg; // green
    pixelComponents[i+2] = pixelComponents[i+2] = avg; // blue
    // i+3 is alpha (the fourth element)
    }

    // Draw the ImageData object at the given (x,y) coordinates.
    context.putImageData(myImageData, 0,0);
    }

    I hope that makes sense, thanks!

  13. #13
    Join Date
    Apr 2011
    Posts
    11
    bump again, hope thats ok

  14. #14
    Join Date
    Mar 2014
    Posts
    1
    Hi royallondon, how did you get on with this assignment.

    I have to do the same but am struggling.

    Can you offer any advice ?

    Many Thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles