[php/gd] Skew image

Pagina: 1
Acties:
  • 1.659 views sinds 30-01-2008
  • Reageer

Onderwerpen


Acties:
  • 0 Henk 'm!

  • mor0n
  • Registratie: December 2002
  • Laatst online: 21-03-2022
Ik ben met een soort webwinkel bezig voor wenskaarten. Nu worden de meeste voorbeelden en thumbnail gegenereerd door gd/php, dat werkt al heel mooi. Maar nu wil ik een kaart hellen (zgn. skew) m.b.v. GD(2), en heb helaas geen mogelijkheid om ImageMagick o.i.d. te installeren bij de hostingprovider. En tevens kan ik het shell commando convert niet gebruiken.

Aan de hand van de volgende afbeeldingen wil ik idee het duidelijk maken:

Afbeeldingslocatie: http://www.djalwin.nl/tweakers/1.jpgAfbeeldingslocatie: http://www.djalwin.nl/tweakers/2.jpgAfbeeldingslocatie: http://www.djalwin.nl/tweakers/3.jpgAfbeeldingslocatie: http://www.djalwin.nl/tweakers/4.jpg


Ik heb dus in photoshop een lege kaart getekend (pic1) en wil dat plaatje gaan gebruiken om de kaart met bergen daarop te plakken(pic2) (met imagecopymerge en aanverwante gdfuncties). Maar dan moet ik eerst wel het bergplaatje 'skewen' (pic3). Totdat ik het resultaat van pic4 bereikt heb.

De hoogte links blijft hetzelfde, maar de top-right en de bottom-right veranderen, als je begrijpt wat ik bedoel. De top-right gaat een stukje omhoog en de bottom-right een stukje omlaag.

Nu zag ik al een topic op tweakers waar iemand hetzelfde vroeg, maar waar geen duidelijk antwoord te vinden is: http://gathering.tweakers.net/forum/list_messages/1054032.

Kan iemand mij opweg helpen? Alvast bedankt.

Acties:
  • 0 Henk 'm!

  • Willem
  • Registratie: Februari 2001
  • Laatst online: 18-09 15:13
Als je toch al je thumbnails hebt kun je er netzogoed een Photoshop batch action op los laten :)

Acties:
  • 0 Henk 'm!

  • MaNdM
  • Registratie: April 2001
  • Laatst online: 09:36

MaNdM

1000-dingen-doekje

Het lijkt me de bedoeling dat het skewen automatisch gaat via de site zelf, dus de GDlib.

To be determined...


Acties:
  • 0 Henk 'm!

  • Justice
  • Registratie: Maart 2001
  • Laatst online: 07-08 15:02
De helling is zo miniem ik zou eerder denken aan het maken van een mask die alles buiten de kaart niet laat zien. Misschien een makkelijke optie voor je. Wellicht ligt dat aan de afbeelding die je gebruikt.

Human Bobby


Acties:
  • 0 Henk 'm!

  • Eijkb
  • Registratie: Februari 2003
  • Laatst online: 21-09 13:44

Eijkb

Zo.

Je kan de hostingprovider ook vragen imagemagick te installeren. Ik werk zelf bij een hosting provider en als een klant vraagt om zoiets werken we altijd mee (waar mogelijk).

.


Acties:
  • 0 Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 09:55

Bosmonster

*zucht*

GDlib kan dit standaard niet, maar je kunt het uiteraard wel zelf programmeren middels GDlib.

Makkelijker is ImageMagick, daar zit skew standaard in als ik me niet vergis :)

Acties:
  • 0 Henk 'm!

  • FaZe
  • Registratie: Maart 2000
  • Laatst online: 15-09 18:26
En zelf een functie schrijven die het doet? Eerst met bestaande functies het plaatje bijv in zn geheel wat groter uitrekken (kan GD dat?)... en dan de linkerkant kleiner maken? Je kan op pixel-niveau met GD werken... en dan dus zeg maar de verticale lijnen gaan herberekenen die iets kleiner worden, ik weet niet of het mooit uitziet als je gewoon wat pixels "weg laat vallen".

Acties:
  • 0 Henk 'm!

  • mor0n
  • Registratie: December 2002
  • Laatst online: 21-03-2022
FaZe schreef op woensdag 03 augustus 2005 @ 14:46:
En zelf een functie schrijven die het doet? Eerst met bestaande functies het plaatje bijv in zn geheel wat groter uitrekken (kan GD dat?)... en dan de linkerkant kleiner maken? Je kan op pixel-niveau met GD werken... en dan dus zeg maar de verticale lijnen gaan herberekenen die iets kleiner worden, ik weet niet of het mooit uitziet als je gewoon wat pixels "weg laat vallen".
Daar had ik dus eerst ook aan gedacht, maar ik kreeg het met mijn programmeerervaring niet voor elkaar. Het is misschien wel mogelijk, maar dan komt er zoveel wiskunde aan te pas. Je zou dan alle pixels moeten herpositioneren middels een mask-matrix van 9x9 of hoe je groot je dat ook zou willen doen.

Mijn algebra is ook weer niet zo goed dat ik dat even voor elkaar krijg. Toch vreemd dat ik er eigenlijk helemaal niks van terug kan vinden op het internet.

Ik zal eens kijken wat ImageMagik mij kan bieden, wellicht dat ik dan toch mijn hostingprovider heel lief moet aankijken. Maar dat wil nu nog niet zeggen dat ik mijn huidig idee verwerp.
Mijn vraag staat dus nog steeds open :P

(Als je kijkt op deze pagina: http://www.imagemagick.org/script/examples.php, zie ik daar ook een functie shear staan. Zoiets zoek ik dan ook, maar dan i.c.m. GD)

[ Voor 8% gewijzigd door mor0n op 03-08-2005 15:01 ]


Acties:
  • 0 Henk 'm!

  • Willem
  • Registratie: Februari 2001
  • Laatst online: 18-09 15:13
Noem me eens 1 reden waarom je GD(lib) zou gebruiken en niet een Photoshop batch..
ben ik wel heel erg nieuwsgierig naar.

Acties:
  • 0 Henk 'm!

Verwijderd

is er trouwens met photoshop niet een app (droplett) te maken die via commandline kan aanroepen? dan kan je dat weer met php doen...

/me heeft ergens ooit iets van een klokje horen luiden daaromtrent

[ Voor 5% gewijzigd door Verwijderd op 03-08-2005 16:03 ]


Acties:
  • 0 Henk 'm!

  • chris
  • Registratie: September 2001
  • Laatst online: 11-03-2022
willem169 schreef op woensdag 03 augustus 2005 @ 15:59:
Noem me eens 1 reden waarom je GD(lib) zou gebruiken en niet een Photoshop batch..
ben ik wel heel erg nieuwsgierig naar.
Als ik zo'n script zou hebben, zou ik het relaxt vinden dat ik een plaatje kan uploaden, en dat er automatisch thumbnails van gemaakt worden enzo. Zo kan er niets misgaan in photoshop, en kunnen ook mensen zonder photoshop-kennis dit doen. Verder, als je dit kan automatiseren scheelt het voor de gebruiker flink wat werk: de gebruiker hoeft alleen maar het plaatje te uploaden, het systeem doet de rest.

Acties:
  • 0 Henk 'm!

  • mor0n
  • Registratie: December 2002
  • Laatst online: 21-03-2022
willem169 schreef op woensdag 03 augustus 2005 @ 15:59:
Noem me eens 1 reden waarom je GD(lib) zou gebruiken en niet een Photoshop batch..
ben ik wel heel erg nieuwsgierig naar.
Gezien deze images verwerkt moeten worden op de webserver (linux) kan ik dat dus niet doen moet een photoshop batch. En het gaat om het principe "On-the-fly"....

Het idee van een droplett lijkt me wel heel vergezocht.

ImageMagick is errug lastig, ik ben er zowat de hele middag al mee bezig, maar ik krijg dit principe niet voorelkaar. De functie shear bijvoorbeeld is ontzettend beperkt, en transformeren met een matrix (-affine) werpt ook geen vruchten af....zucht.

Ben ik nou de eerste die met dit probleem kampt?

[ Voor 6% gewijzigd door mor0n op 03-08-2005 16:23 ]


Acties:
  • 0 Henk 'm!

  • FaZe
  • Registratie: Maart 2000
  • Laatst online: 15-09 18:26
Nou ik wilde een maandje geleden het ook ergens voor gebruiken.. maar was uiteindelijk niet nodig. Als je ff geduld hebt ga ik ff kijken of die manier werkt die ik dacht.. zo niet laat ik het ook wel horen ;)

Acties:
  • 0 Henk 'm!

  • Yoozer
  • Registratie: Februari 2001
  • Laatst online: 03-08 17:53

Yoozer

minimoog

deejayalwin schreef op woensdag 03 augustus 2005 @ 16:20:
Ben ik nou de eerste die met dit probleem kampt?
Nee. Wat je wil is in feite analoog aan wat de programmeurs van Wolfenstein 3d wilden :). Dit wordt met een truukje gedaan waarbij je niet alle pixels inleest per lijn als het kleiner wordt en ze dubbel inleest als het groter wordt. Nadeel is dan wel dat je bij normaal formaat misschien wat hakkels krijgt, maar dat kun je oplossen met supersampling - vergroot je plaatje 2 keer, voer de bewerking uit, verklein het dan weer 2 keer.

Ik zou eens een handleiding eenvoudige 2.5d engines openslaan ;).

teveel zooi, te weinig tijd


Acties:
  • 0 Henk 'm!

  • mor0n
  • Registratie: December 2002
  • Laatst online: 21-03-2022
FaZe schreef op woensdag 03 augustus 2005 @ 16:33:
Nou ik wilde een maandje geleden het ook ergens voor gebruiken.. maar was uiteindelijk niet nodig. Als je ff geduld hebt ga ik ff kijken of die manier werkt die ik dacht.. zo niet laat ik het ook wel horen ;)
Grappig, ik ben er ook nu mee bezig. Ik ben benieuwd, wel erg intensief scriptje wordt het dan :)
Mijn resultaten post ik uiteraard.

Acties:
  • 0 Henk 'm!

  • maartenba
  • Registratie: November 2001
  • Laatst online: 29-07-2024
Ben ook wat aan het spelen met GD, resultaat post ik hier ook...

Acties:
  • 0 Henk 'm!

  • Janoz
  • Registratie: Oktober 2000
  • Laatst online: 21-09 02:21

Janoz

Moderator Devschuur®

!litemod

Skew is trouwens niet de juiste bewerking. Bij een skew worden alleen de vertikale lijnen uitgerekt afhankelijk van de horizontale positie (= ook wiskundige beschrijving van de skew)

De skew is echter niet perspektief correct. Onderdelen die dichterbij staan worden immers alleen vertikaal uitgerekt, en niet horizontaal. Dit is heel goed te zien wanneer je een plaatje met een diagonaal kruis gebruikt. Het midden van het kruis blijft in het midden, terwijl de twee diagonalen van een afgeknotte driehoek elkaar dicther bij de korte zijde snijden. De diagonalen in het geskewde plaatje zullen daarom ook bogen worden.

Ken Thompson's famous line from V6 UNIX is equaly applicable to this post:
'You are not expected to understand this'


Acties:
  • 0 Henk 'm!

  • mor0n
  • Registratie: December 2002
  • Laatst online: 21-03-2022
Janoz schreef op woensdag 03 augustus 2005 @ 16:55:
Skew is trouwens niet de juiste bewerking. Bij een skew worden alleen de vertikale lijnen uitgerekt afhankelijk van de horizontale positie (= ook wiskundige beschrijving van de skew)

De skew is echter niet perspektief correct. Onderdelen die dichterbij staan worden immers alleen vertikaal uitgerekt, en niet horizontaal. Dit is heel goed te zien wanneer je een plaatje met een diagonaal kruis gebruikt. Het midden van het kruis blijft in het midden, terwijl de twee diagonalen van een afgeknotte driehoek elkaar dicther bij de korte zijde snijden. De diagonalen in het geskewde plaatje zullen daarom ook bogen worden.
Je hebt helemaal gelijk, maar voor het oog lijkt het dat het plaatje in dat perspectief op de wenskaart zit geplakt.

Acties:
  • 0 Henk 'm!

  • maartenba
  • Registratie: November 2001
  • Laatst online: 29-07-2024
Ok, heb er eentje die naar rechts kan skewen:
PHP:
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
<?
$angleTop = 15;
$angleBottom = 15;

header("Content-Type: image/png");
imagepng(ImageSkew("test.png", $angleTop, $angleBottom));
exit();

function ImageSkew($pImage, $pAngleTop, $pAngleBottom) {
  // Source image
  $iSource = ImageCreateFromPng("test.png");

  // Destination image
  list($width, $height, $type, $attr) = getimagesize($pImage);
  $iCanvas = @imagecreate($width, $height);
  $cCyan = imagecolorallocate($iCanvas, 255, 0, 255);
  imagefill($iCanvas, 0, 0, $cCyan);

  // Pixel differences
  $diffTop = ($pAngleTop / 90);
  $diffBottom = ($pAngleBottom / 90);

  // Loop trough each width pixel
  $currentHeight = $height;
  $currentY = 0;
  for ($i = 0; $i < $width; $i++) {
    // Take 1*height sample and copy to iCanvas
    imagecopyresampled($iCanvas, $iSource, $i, $currentY, $i, 0, 1, $currentHeight, 1, $height);

    // Change heights
    $currentHeight = $currentHeight - $diffTop - $diffBottom;
    $currentY = ($height - $currentHeight) / 2;
  }

  // Return
  return $iCanvas;
}
?>


Demo op http://www.holidayhome.be/skew/

[ Voor 14% gewijzigd door maartenba op 03-08-2005 17:23 ]


Acties:
  • 0 Henk 'm!

  • FaZe
  • Registratie: Maart 2000
  • Laatst online: 15-09 18:26
o.a. @ Janoz,


Ja je hebt helemaal gelijk merk ik nu al. Opzich begint het aardig te lukken, en laat voor de verticale lijnen de interpolatie van gb-lib gebruiken, waardoor die in ieder geval mooi worden, maar momenteel zie je dus wel karteltjes bij de randen als je horizontaal gaat kijken, omdat er die kant op geen interpolatie of iets dergelijks nog is.

Acties:
  • 0 Henk 'm!

  • FaZe
  • Registratie: Maart 2000
  • Laatst online: 15-09 18:26
Aargh ik haat wedstrijdjes wie het eerste de code afheeft ;) Ik heb vakantie.. wil lekker chill aan doen :P
Maar hier is mijn code:
PHP:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
    $img_name = "905.jpg";
    $dst_name = "skewed.jpg";
    $src_img = imagecreatefromjpeg($img_name);
    $new_w = imagesx($src_img);
    $old_h = imagesy($src_img);
    $new_lh = abs($old_h * 0.9); // links 90% van de hoogte
    $new_rh = $old_h;
    $step = abs((($new_rh - $new_lh) / 2) / $new_w); //stapgrootte wat er van links naar rechts bijkomt
    $from_top = ($new_rh - $new_lh) / 2;
    $dst_img = imagecreatetruecolor($new_w,$new_rh);
    $white  = ImageColorAllocate ($dst_img, 255, 255, 255);
    imagefill($dst_img,0,0,$white);
    for($i=0;$i<$new_w;$i++){
        imagecopyresampled($dst_img, $src_img, $i,$from_top - $step * $i, $i , 0, 1, $new_lh + $step * $i *2, 1, $old_h);     
    }
    imagejpeg($dst_img,$dst_name,'90');
    
?>


Maar hij wordt niet zo mooi.. heb volgens mij nog ergens een foutje.. heb het idee dat hij aan de onderkant niet lekker loopt.
Te bekijken op:
http://home.tijburg.nl/skew/
Andere scriptje zal wel weer beter zijn :P

Edit: Kleurtjes!! :D

[ Voor 10% gewijzigd door FaZe op 03-08-2005 17:32 ]


Acties:
  • 0 Henk 'm!

  • maartenba
  • Registratie: November 2001
  • Laatst online: 29-07-2024
De jouw is in ieder geval mooier dan de mijne, maar ons algoritme is +/- hetzelfde uitgedacht heb ik de indruk :) Kolom per kolom de hoogte wat verkleinen en op een resultaat plakken...

Ondertussen ook effe demo online gezet: http://www.holidayhome.be/skew/

[ Voor 19% gewijzigd door maartenba op 03-08-2005 17:23 ]


Acties:
  • 0 Henk 'm!

  • mor0n
  • Registratie: December 2002
  • Laatst online: 21-03-2022
maartenba schreef op woensdag 03 augustus 2005 @ 17:13:
Ok, heb er eentje die naar rechts kan skewen:

.....

Demo op http://www.holidayhome.be/skew/
Ja, dat is een mooi staaltje programmeerwerk, zo snel had ik dat even niet gekund. Maar wat jij gemaakt hebt komt prima in de buurt, nu nog andersom :p

Acties:
  • 0 Henk 'm!

  • FaZe
  • Registratie: Maart 2000
  • Laatst online: 15-09 18:26
Het idee van Yoozer komt hier waarschijnlijk goed bij te pas... plaatje eerst groter maken... dan bewerking uitvoeren.. en dan weer verkleinen. Dan zijn de karteltjes iig al gehalveerd... maarja.. ik weet niet hoe groot de plaatjes gaan worden die je gaat gebruiken? en hoeveel er geupload gaat worden? Want extra vergroten en verkleinen en berekeningen op 2x zo grootte plaatjes zal best wel zware cpu belasting worden ;)

Acties:
  • 0 Henk 'm!

  • FaZe
  • Registratie: Maart 2000
  • Laatst online: 15-09 18:26
@deejayalwin

Die van mij gaat wel de goede kant op...

Acties:
  • 0 Henk 'm!

  • mor0n
  • Registratie: December 2002
  • Laatst online: 21-03-2022
FaZe schreef op woensdag 03 augustus 2005 @ 17:27:
Het idee van Yoozer komt hier waarschijnlijk goed bij te pas... plaatje eerst groter maken... dan bewerking uitvoeren.. en dan weer verkleinen. Dan zijn de karteltjes iig al gehalveerd... maarja.. ik weet niet hoe groot de plaatjes gaan worden die je gaat gebruiken? en hoeveel er geupload gaat worden? Want extra vergroten en verkleinen en berekeningen op 2x zo grootte plaatjes zal best wel zware cpu belasting worden ;)
De afbeeldingen die gebruikt worden op de server zijn 13x18cm, bij 75dpi is dat 369x510px, maar mocht een van jullie scripts een mooi resultaat krijgen (ik ga er niet vanuit dat ik het beter kan) en de parse tijd is wat hoger, dan zou ik het misschien als een soort batch kunnen doen.

Daarmee bedoel ik:

plaatjes uploaden --> skewallimagestofile --> en de link naar de output files wordt in de database gezet. Zodat niet elke keer "on-the-fly" geparsed hoeft te worden.

Acties:
  • 0 Henk 'm!

  • FaZe
  • Registratie: Maart 2000
  • Laatst online: 15-09 18:26
on the fly zal ik ZEKER niet doen. Je moet eens weten hoe intensief dit soort zooi is ;)
Ik zal eens even de grote vergroottruc maken dan ;)

Acties:
  • 0 Henk 'm!

  • mor0n
  • Registratie: December 2002
  • Laatst online: 21-03-2022
FaZe schreef op woensdag 03 augustus 2005 @ 17:33:
on the fly zal ik ZEKER niet doen. Je moet eens weten hoe intensief dit soort zooi is ;)
Ik zal eens even de grote vergroottruc maken dan ;)
Nou de trucendozen gaan open, misschien kun je er ook even commentaar bij zetten, dan weet ik ook precies wat je doet.
We moeten er natuurlijk ook van leren (8>

Acties:
  • 0 Henk 'm!

  • maartenba
  • Registratie: November 2001
  • Laatst online: 29-07-2024
Allrighty :) Dit is hem, je kan met direction aangeven in welke richting hij moet...

PHP:
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
<? 
$angle = 15;
$pDirection = 1; 

header("Content-Type: image/png"); 
imagepng(ImageSkew("test.png", $angle, 1)); 
exit(); 

function ImageSkew($pImage, $pAngle, $pDirection = 0) { 
  // Source image 
  $iSource = ImageCreateFromPng($pImage); 

  // Destination image 
  list($width, $height, $type, $attr) = getimagesize($pImage); 
  $iCanvas = @imagecreate($width, $height); 
  $cCyan = imagecolorallocate($iCanvas, 255, 0, 255); 
  imagefill($iCanvas, 0, 0, $cCyan); 

  // Pixel differences 
  $diff = ($pAngle / 90); 

  // Loop trough each width pixel 
  $currentHeight = $height; 
  $currentY = 0;
  if ($pDirection == 1) {
    $currentHeight = 0; 
    $currentY = $height;
  }
  for ($i = 0; $i < $width; $i++) { 
    // Take 1*height sample and copy to iCanvas 
    if ($pDirection == 0) {
      imagecopyresampled($iCanvas, $iSource, $i, $currentY, $i, 0, 1, $currentHeight, 1, $height); 
    } else {
      imagecopyresampled($iCanvas, $iSource, ($width - $i), $currentY, ($width - $i), 0, 1, $currentHeight, 1, $height); 
    }

    // Change heights 
    if ($pDirection == 0) {
      $currentHeight = $currentHeight - ($diff * 2); 
      $currentY = ($height - $currentHeight) / 2; 
    } else {
      $currentHeight = $height - ( $i * ($diff * 2) );
      $currentY = ($height - $currentHeight) / 2; 
    }
  } 

  // Return 
  return $iCanvas; 
} 
?>


Demo's op http://www.holidayhome.be/skew/?d=1&a=15 en http://www.holidayhome.be/skew/?d=0&a=15
(met de parameter a kan je nog wat spelen)

edit:

Ik merk net: hoort dit niet thuis bij P&W i.p.v. W&G? :)

[ Voor 12% gewijzigd door maartenba op 03-08-2005 17:52 ]


Acties:
  • 0 Henk 'm!

  • mor0n
  • Registratie: December 2002
  • Laatst online: 21-03-2022
Zeker NICE!

Nu moet ik ervoor zorgen, dat dat plaatje mooi gemerged kan worden met de onderstaande afbeelding. Hij moet natuurlijk in het kader passen.

Afbeeldingslocatie: http://www.djalwin.nl/tweakers/blanco.jpg

Acties:
  • 0 Henk 'm!

  • maartenba
  • Registratie: November 2001
  • Laatst online: 29-07-2024
De output van mijn functie kan je mooi een transparante achtergrond geven. Als je nu de juiste hoek van jouw afbeelding weet te vinden, X en Y weet waar de afbeelding gezet moet worden kan je denk ik wel verder?

Acties:
  • 0 Henk 'm!

  • mor0n
  • Registratie: December 2002
  • Laatst online: 21-03-2022
maartenba schreef op woensdag 03 augustus 2005 @ 17:48:
De output van mijn functie kan je mooi een transparante achtergrond geven. Als je nu de juiste hoek van jouw afbeelding weet te vinden, X en Y weet waar de afbeelding gezet moet worden kan je denk ik wel verder?
Zeker wel, alleen moet ik dat wel even uitzoeken, maar daar hebben we php.net voor. Ik ben je echt dankbaar voor het oplossen van dit probleem.

Het resultaat zal ik hier posten...dus bookmark de thread nog maar even :P

[ Voor 8% gewijzigd door mor0n op 03-08-2005 17:53 ]


Acties:
  • 0 Henk 'm!

  • maartenba
  • Registratie: November 2001
  • Laatst online: 29-07-2024
Da's graag gedaan, daar is GoT voor he :)
De hoek die je voor m'n functie moet instellen is 7 vermoed ik overigens.

Acties:
  • 0 Henk 'm!

  • mor0n
  • Registratie: December 2002
  • Laatst online: 21-03-2022
maartenba schreef op woensdag 03 augustus 2005 @ 18:00:
Da's graag gedaan, daar is GoT voor he :)
De hoek die je voor m'n functie moet instellen is 7 vermoed ik overigens.
Ik heb em nu aardig recht zitten, nu alleen de transparantie nog....

imagecolortransparent ( resource image [, int color]);

[ Voor 11% gewijzigd door mor0n op 03-08-2005 18:08 ]


Acties:
  • 0 Henk 'm!

  • FaZe
  • Registratie: Maart 2000
  • Laatst online: 15-09 18:26
Ik heb nog wat extra info: Als je dus het plaatje gaat vergroten, dan berekeningen, dan weer verkleinen krijg je echt een veel mooier en scherper plaatje! Probleem is echter met mijn plaatje (550 x 510) dat ik met de normale bewerkingen net onder de 16MB grens van PHP blijf, maar als ik de achtergrond wit maak er heleaas net overzit. Met jouw plaatje gaat het misschien weer net wel.

Het resultaat van het plaatje valt te zien op: http://home.tijburg.nl/skew/

Maar ik zie dat je al bijna klaar bent ondertussen ;)

Mocht je toch nog interesse hebben dan maak ik mn code wel wat leesbaarder + commentaar enzo ;)

Acties:
  • 0 Henk 'm!

  • maartenba
  • Registratie: November 2001
  • Laatst online: 29-07-2024
[overkill mode]
We kunnen natuurlijk ook de te skewen image gaan verdelen in x kleinere images, die vergroten, skewen, verkleinen, en achteraf samenvoegen. Blijft misschien net onder de 16MB dan, afhankelijk van de totale grootte van je image.
[/overkill mode]

Acties:
  • 0 Henk 'm!

  • mor0n
  • Registratie: December 2002
  • Laatst online: 21-03-2022
Dit is het resultaat geworden:

Afbeeldingslocatie: http://www.djalwin.nl/tweakers/test.png

Er moet nog wel wat getweaked worden om de randjes wat softer te krijgen, maar dit kan ik ook oplossen door een zwart rectangle te tekenen om het originele plaatje.
Ik ben nog niet klaar, maar hier alvast de source:

PHP:
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
<?php 
header("Content-Type: image/png");

$angle = 7; 
/* Afmetingen van de te mergen afbeelding */
    $height_front = 305;
    $width_front = 187;
/* Positie van de afbeelding van de te mergen afbeelding */
    $posx_front = 62;
    $posy_front = 7;

$front = imageskew("test.jpg", $angle);
$card = imagecreatefrompng("blanco_kaart.png");

/* Resizen kaart */
$card_w = imagesx($front);
$card_h = imagesy($front);
$front_resized = imagecreatetruecolor($width_front, $height_front); 
imagecopyresized($front_resized, $front, 0, 0, 0, 0, $width_front, $height_front, $card_w, $card_h);

/* Transparante kleur definieren */
$transparent_color = imagecolorallocate($front_resized, 255, 0, 255);  
imagecolortransparent($front_resized, $transparent_color);

/* Twee afbeeldingen mergen */
imagecopymerge($card, $front_resized, $posx_front, $posy_front, 0, 0, $width_front, $height_front, 100);

imagepng($card);  
imagedestroy($card);
imagedestroy($front); 
imagedestroy($front_resized);


/* imageskew functie
   $image = url van de afbeelding
   $angle = hoek voor skew-ing
*/
function imageskew($image, $angle) {  
    /* Source image */
    $src_image = imagecreatefromjpeg($image);  
    
    /* Destination image */
    list($width, $height, $type, $attr) = getimagesize($image);  
    $canvas = @imagecreatetruecolor($width, $height);  
    $c_cyan = imagecolorallocate($canvas, 255, 0, 255);  
    $c_black = imagecolorallocate($canvas, 0, 0, 0);  
    imagefill($canvas, 0, 0, $c_cyan);
    
    /* Pixel differences  */
    $diff = ($angle / 90);  
    
    $currentHeight = $height;  
    $currentY = 0; 
    $currentHeight = 0;  
    $currentY = $height; 
    
    /* Loop trough each width pixel */
    for ($i = 0; $i < $width; $i++) {  
        /* Take 1 * height sample and copy to canvas */
        imagecopyresampled($canvas, $src_image, ($width - $i), $currentY, ($width - $i), 0, 1, $currentHeight, 1, $height);  
        
        /* Change heights  */ 
        $currentHeight = $height - ( $i * ($diff * 2) ); 
        $currentY = ($height - $currentHeight) / 2;  
    }  
    
    /* Return the canvas */ 
    return $canvas;  
}  
?>

Acties:
  • 0 Henk 'm!

  • FaZe
  • Registratie: Maart 2000
  • Laatst online: 15-09 18:26
Even wel een klein dingetje.. dat lijstje en die schaduw eromheen... het is wel de bedoeling dat die dingen los staan van overige dingen op de homepage he? Het is niet gemaakt dat de schaduwdingen overlopen in een ander grafisch iets van de homepage he?
Want met al dit soort bewerkingen kan de kwaliteit wel eens iets achteruitgaan.. waardoor het net niet meer lekker overloopt.

Verder is zo te zien vergroten en verkleinen niet echt nodig, helemaal niet als je idd even een lijntje eroverheen trekt bij de randen. Ziet er goed uit :) Nu weet ik iig dat het dus wel mogelijk is om zelf te programmeren ;)

Acties:
  • 0 Henk 'm!

  • mor0n
  • Registratie: December 2002
  • Laatst online: 21-03-2022
FaZe schreef op woensdag 03 augustus 2005 @ 18:34:
Even wel een klein dingetje.. dat lijstje en die schaduw eromheen... het is wel de bedoeling dat die dingen los staan van overige dingen op de homepage he? Het is niet gemaakt dat de schaduwdingen overlopen in een ander grafisch iets van de homepage he?
Want met al dit soort bewerkingen kan de kwaliteit wel eens iets achteruitgaan.. waardoor het net niet meer lekker overloopt.
Nee hoor, het is een losstaand item op de website. En de parsetime valt mij zeker mee.
Ik draai het op mijn servertje thuis: arch linux, amd 700, 256ram. Ik neem aan dat de machientjes bij de hostingprovider ietsje sneller zijn :P

Acties:
  • 0 Henk 'm!

  • mor0n
  • Registratie: December 2002
  • Laatst online: 21-03-2022
Oke, nu heb ik em helemaal klaar.

Afbeeldingslocatie: http://www.djalwin.nl/tweakers/lijn1.pngAfbeeldingslocatie: http://www.djalwin.nl/tweakers/lijn2.png

Ik heb een leuk script gevonden op internet om anti-aliased lijnen te tekenen, die heb ik er alsnog even overheen getekend en dat maakt em helemaal compleet.

Voor dit script ga je naar: http://www.kosmokrator.com/download/php/antialias.php

Acties:
  • 0 Henk 'm!

  • maartenba
  • Registratie: November 2001
  • Laatst online: 29-07-2024
Mooi resultaat! Heb je je ganse script ergens staan? Ben eens benieuwd hoe alles in elkaar is gepuzzeld...

Acties:
  • 0 Henk 'm!

  • André
  • Registratie: Maart 2002
  • Laatst online: 12-09 14:32

André

Analytics dude

W&G > P&W

Acties:
  • 0 Henk 'm!

  • mor0n
  • Registratie: December 2002
  • Laatst online: 21-03-2022
maartenba schreef op woensdag 03 augustus 2005 @ 23:44:
Mooi resultaat! Heb je je ganse script ergens staan? Ben eens benieuwd hoe alles in elkaar is gepuzzeld...
edit:
Gebruik de code uit de url die ik gaf (zie vorige posts) en de code die ik ook had gepost. Ik heb gewoon de functions voor de anti-aliased lines toegevoegd en nog even een extra kader om de afbeelding getekend.

[ Voor 31% gewijzigd door mor0n op 04-08-2005 18:16 ]

Pagina: 1