Welkom, Gast. Je bent niet ingelogd.
🔥Registreren Inloggen 😎

gez Afbeeldingen zwart/wit maken

Forum Developing & Coding Javascript Topic
Reageren 💬 Nieuw topic 📂
Knijn
6 posts
Geplaatst op: 07 Dec 2009, 19:59
PimpCoins: 0
💸+
Bewerken Quote

Hoi, aller eerst ben ik nieuw op saven dus moet nog ff wennen en zo.
Maar goed, ik had een vraagje over javascript.
Ik wil mijn portfolio pagina opnieuw doen en wil daar een zwart/wit effect in hebben.
Alle afbeeldingen moeten in zwart/wit zijn totdat je er met je muis overheen gaat. Ik weet dat je dit heel simpel in CSS kunt oplossen maar dan moet je voor elke afbeelding een aparte zwart/wit versie maken...
Lijkt met niet zo handig... Is hier dus een oplossing voor in de vorm van een (java) script?

Knijn

Leone
317 posts
Geplaatst op: 07 Dec 2009, 20:39
PimpCoins: 0
💸+
Bewerken Quote

zoiets?
http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

Sharp
:')
moderator
3420 posts
Geplaatst op: 07 Dec 2009, 22:28
PimpCoins: 0
💸+
Bewerken Quote

Waarom niet gewoon elke image de hue en saturation wegfilteren in PS en dan gewoon mouseover effect

Knijn
6 posts
Geplaatst op: 07 Dec 2009, 23:28
PimpCoins: 0
💸+
Bewerken Quote

Sharp schreef:

Waarom niet gewoon elke image de hue en saturation wegfilteren in PS en dan gewoon mouseover effect

Nou, dat bedoelde ik dus, dan moet ik dat allemaal gaan doen en van elke afbeelding dus 2 versies maken... Niet zo veel zin in en neemt weer meer ruimte in beslag

Leone schreef:

zoiets?
http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

Kijk, dat is dus precies waarnaar ik opzoek ben! Enig idee door welke browsers dit allemaal ondersteund word?

Sorry, was iets te snel met kijken. Ook hier gebruiken ze 2 afbeeldingen.... Is er geen manier dat je maar 1 afbeelding kunt gebruiken die door een script met een filters ofzo zwart/wit word gemaakt?

[Laatst bewerkt door Knijn op maandag 7 december 2009, om 23:50]
Thaan
Aka "Gerwin"
moderator
2077 posts
Geplaatst op: 08 Dec 2009, 00:23
PimpCoins: 0
💸+
Bewerken Quote

Waarom filters gebruiken? Gewoon in photoshop naar Image > Mode > grayscale.

Ja ik ben kut, en ja ik heb gelijk.
Painmaker
AKA God
660 posts
Geplaatst op: 08 Dec 2009, 17:14
PimpCoins: 0
💸+
Bewerken Quote

Hij bedoelt ipv 2 afbeeldingen te maken, een script op de site die het rollover effect voor hem doet.

Heb zelf geen idee hoe, volgens mij heb je meer gekloot dit aan het werk te krijgen als het al lukt, dan dat je gewoon 2 afbeeldingen maakt.

sandr
aka Chuck Norris
4902 posts
Geplaatst op: 08 Dec 2009, 19:13
PimpCoins: 0
💸+
Bewerken Quote

1
<img src="zwartwit.jpg" onmouseover="this.src='kleur.jpg'" onmouseout="this.src='zwartwit.jpg'" />

al die moeilijke keuzes in het leven
Bart
Hoeren :'(
1487 posts
Geplaatst op: 08 Dec 2009, 19:28
PimpCoins: 0
💸+
Bewerken Quote

Knijn, afgekort van Konijn ?

Knijn
6 posts
Geplaatst op: 08 Dec 2009, 21:00
PimpCoins: 0
💸+
Bewerken Quote

Painmaker schreef:

Hij bedoelt ipv 2 afbeeldingen te maken, een script op de site die het rollover effect voor hem doet.

Heb zelf geen idee hoe, volgens mij heb je meer gekloot dit aan het werk te krijgen als het al lukt, dan dat je gewoon 2 afbeeldingen maakt.


Kijk, dat probeerde ik dus uit te leggen! Heeft iemand enig idee of dit uberhaupt kan trouwens, ik kan het natuurlijk wel vragen maar kan het?

Bart schreef:

Knijn, afgekort van Konijn ?

Jup

Sharp
:')
moderator
3420 posts
Geplaatst op: 08 Dec 2009, 21:52
PimpCoins: 0
💸+
Bewerken Quote

Je wilt met een javascript de afbeelding zelf b/w maken?
Is veel omslachtiger dan wat sandr zei

BaXiess
1213 posts
Geplaatst op: 08 Dec 2009, 22:47
PimpCoins: 0
💸+
Bewerken Quote

Als je bijv 100 afbeeldingen hebt kan ik me wel voorstellen dat je niet elke afbeeldingen apart grijswaarden wil maken, ik heb geen idee hoe je zoiets zou moeten maken though..

Altijd al n00b willen zijn? Klik dan hier n00b
Saven
admin
5755 posts
Geplaatst op: 08 Dec 2009, 23:47
PimpCoins: 0
💸+
Bewerken Quote

Volgens mij gaat dit niet zomaar. Moet je misschien met PHP en gdlib werken ofzo, maar met html en css gaat dat niet lukken zonder handmatig zwart/wit maken

Knijn
6 posts
Geplaatst op: 09 Dec 2009, 00:10
PimpCoins: 0
💸+
Bewerken Quote

Tsja... @saven: wat het dan ook nog is, ik heb html & CSS redelijk(in de zin van ik begin er net mee) onder controle, php en javascript ben ik absoluut een n00b in ... Wat is trouwens gdlib eigenlijk? Heb het vaker zien staan maar geen idee wat het nou is.
Iemand anders nog een idee waar ik nog zou kunnen zoeken?

Headshot
900 posts
Geplaatst op: 09 Dec 2009, 09:36
PimpCoins: 0
💸+
Bewerken Quote

Knijn schreef:

Tsja... @saven: wat het dan ook nog is, ik heb html & CSS redelijk(in de zin van ik begin er net mee) onder controle, php en javascript ben ik absoluut een n00b in ... Wat is trouwens gdlib eigenlijk? Heb het vaker zien staan maar geen idee wat het nou is.
Iemand anders nog een idee waar ik nog zou kunnen zoeken?

Met GDLib kun je dynamische afbeeldingen maken. Dus bijvoorbeeld een signature met hoeveel keer die bekeken is.

Bomplayer.nl
Knijn
6 posts
Geplaatst op: 09 Dec 2009, 11:14
PimpCoins: 0
💸+
Bewerken Quote

Oke, ik denk dat ik een oplossing heb gevonden maar dat weet ik niet zeker.
Klik!
Demo, Klik!

Als ik dit zo lees dan klinkt het heel erg logisch en hoe de code werkt snap ik ook nog wel het een en ander.
Alleen, als je de demo bekijkt dan zie je dat er onderaan maar één knop staat. Als je daarop klikt dan word het 2e plaatje zwart/wit, precies op de manier zoals ik wil.

Wat ik alleen niet zou weten is hoe je dit script zo aanpast dat het ook weer kan omkeren en dat het via een hover effect werkt.

Als je met je muis over de afbeelding gaat word de afbeedling in kleur en als je met je muis van de afbeelding af gaat word hij weer zwart/wit.

Het liefst ook nog met een soort fade effect..

Dit is de index.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript Demos - Desaturate Image using JavaScript</title>

<script type="text/javascript" src="index_bestanden/jquery-1.js"></script>
<link href="index_bestanden/main.css" type="text/css" rel="stylesheet">

<script type="text/javascript">
    $(document).ready(function(){
        $('#toggleDesaturate').click(function(){
            var imgObj = document.getElementById('image');
            
            if($.browser.msie){
                grayscaleImageIE(imgObj);
            } else {
                imgObj.src = grayscaleImage(imgObj);
            }           
        });
    });

    function grayscaleImageIE(imgObj)
    {
        imgObj.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';
    }

    function grayscaleImage(imgObj)
    {
        var canvas = document.createElement('canvas');
        var canvasContext = canvas.getContext('2d');
        
        var imgW = imgObj.width;
        var imgH = imgObj.height;
        canvas.width = imgW;
        canvas.height = imgH;
        
        canvasContext.drawImage(imgObj, 0, 0);
        var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
        
        for(var y = 0; y < imgPixels.height; y++){
            for(var x = 0; x < imgPixels.width; x++){
                var i = (y * 4) * imgPixels.width + x * 4;
                var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
                imgPixels.data[i] = avg; 
                imgPixels.data[i + 1] = avg; 
                imgPixels.data[i + 2] = avg;
            }
        }
        
        canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
        return canvas.toDataURL();
    }
</script>

</head><body>

    <div id="page">
        <h1>How to Desaturate Images using JavaScript</h1>
        <p>Click the button below the image to desaturate it.</p>
        
        <div>
            <p>
                <strong>Original image:</strong><br>
                <img src="index_bestanden/nature-1.jpg" alt="">
            </p>           
            <p>
                <strong>Image which will be desaturated:</strong><br>
                <img src="index_bestanden/nature-1.jpg" alt="" id="image">
            </p>           
        </div>
        <form><button id="toggleDesaturate" type="button">Desaturate Image</button></form>
        
        
        <div class="clear"></div>
        <p class="tutorial">View Full Tutorial: <strong><a href="http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html" title="Permalink">How to Desaturate Images using JavaScript</a></strong></p>
        <p class="about">The <a href="http://www.ajaxblender.com/about-us.html">ajaxBlender team</a>
specializes in web development to build advanced, interactive
JavaScript/AJAX web applications driven by jQuery, MooTools, Ext.JS,
and script.aculo.us on various server-side platforms including PHP and
ASP.NET.</p>
    </div>
</body></html>

Hier staat de hele javascript code in die nodig is... Zou iemand me hierbij willen helpen?
Knijn

[Laatst bewerkt door Knijn op woensdag 9 december 2009, om 12:44]
Reageren 💬 Nieuw topic 📂

Saven is back bitches

📊

Actieve topics

🔥

Nieuwste topics

🆕

Laatste blogs

📝

Laatste nieuws

📰
📫

Nieuw privébericht
🔥

Registreren

Login