Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Skrypt do generowania tekstu na obrazku (wybór użytkownika)
Forum PHP.pl > Forum > Po stronie przeglądarki
Bon
Witam!

Chciałbym zapytać się Was jak najrozsądniej należałoby postąpić, aby stworzyć skrypt, który pozwoliły użytkownikowi wybrać rozmiar i miejsce pola tekstowego, następnie wpisać jakiś tekst i wygenerować z tego obrazek (w sensie tekst na jakimś tam wcześniejszym obrazku szablonie). Za granicą widziałem kilka takich serwisów, gdzie można było np. wrzucić swój obrazek i online wprowadzić jakiś tekst sam czy w ramce, ale najczęściej były to aplikacje we flashu, a z tym nie mam większej styczności.
kamil4u
Coś takiego: http://www.kamil.contrel.pl/logo_function/index.php - moje dzieło?
Bon
No tak, mniej więcej o to mi chodzi, tylko dla przeciętnego użytkownika jednak trzeba by jakoś z tymi współrzędnymi ułatwić.
kamil4u
Znaczy jak ułatwić? Klikasz na obrazek i masz wprowadzone współrzędne.
Bon
Co do współrzędnych to mea culpa, na Chromie działa bez zarzutu faktycznie.

Tylko przykładowo gdy tego tekstu jest więcej, a chciałoby się przerzucić do następnej linii. Co wtedy?
kamil4u
To był naprawdę prosty skrypt pisany dawno temu. Jak Ci się podoba to mogę Ci udostępnić kod( średniej jakości bo pisany dość dawno temu ). A jak jednak nie spełnia Twoich wymagań to cóż...:
- musisz poszukać samemu czegoś lepszego
- poczekać aż ktoś da Ci link do czegoś takiego
- zlecić komuś
- napisać samemu od nowa( tu w razie pytań mogę Ci jakoś pomóc, ale to po zadaniu konkretnego pytania )
Bon
Postaram się popatrzeć jeszcze za jakimiś ciekawymi rozwiązaniami, a co do kodu to tak, prosiłbym o udostępnienie.
php.helper
ja również przyłączam się do tej prośby
kamil4u
Proszę, ale ostrzegam, że kod pisany dawno temu, więc jest sporo do poprawienia.

index.php
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4.  
  5. <title>Napis na logu</title>
  6.  
  7. <link rel="stylesheet" type="text/css" href="varia/logo.css">
  8. <script type="text/javascript" SRC="varia/logo.js"></script>
  9.  
  10. </head>
  11.  
  12. <body>
  13. <div id="ikony">
  14. <img src="varia/help.gif" title="Pomoc" alt="Pomoc" id="help" onClick="alert('I tu będzie pomoc');">
  15. </div>
  16. <div>
  17. <br>
  18. <?php
  19.  
  20. if($_POST['x'] != "" && $_POST['y'] != "" && $_POST['text'] != "" && $_POST['size'] != "" && $_POST['jakosc'] != "" &&
  21. is_numeric($_POST['x']) && is_numeric($_POST['y']) && is_numeric($_POST['size']) && is_numeric($_POST['jakosc']))
  22. {
  23. $kolor[0] = hexdec(substr($_POST['kolor'], 1, 2));
  24. $kolor[1] = hexdec(substr($_POST['kolor'], 3, 2));
  25. $kolor[2] = hexdec(substr($_POST['kolor'], 5, 2));
  26.  
  27. if(file_exists('./logo.jpg')) {unlink('./logo.jpg');}
  28.  
  29. $im = imagecreatefromjpeg('./noText-logo.jpg');
  30. $color = imagecolorallocate($im, $kolor[0], $kolor[1], $kolor[2]);
  31. $text = iconv("ISO-8859-2","UTF-8",$_POST['text']);
  32.  
  33. imagefttext($im, $_POST['size'], 0, $_POST['x'], $_POST['y'], $color, "./fonts/".$_POST['font'], $text);
  34.  
  35. // Output image to the browser
  36.  
  37. imagejpeg($im, './logo.jpg', $_POST['jakosc']);
  38. imagedestroy($im);
  39. ?>
  40.  
  41. <?php
  42. }
  43.  
  44. if(file_exists('./logo.jpg'))
  45. { echo("<img src=\"./logo.jpg?mtime=" . filemtime('./logo.jpg') . "\" onClick=\"parametry(event);\" alt=\"logo\">"); }
  46. else {echo("<img src=\"./noText-logo.jpg\" onClick=\"parametry(event);\" alt=\"logo\">");}
  47. ?>
  48.  
  49. <br><br>
  50.  
  51. <form action="index.php" method="post" onSubmit="return sprawdz();">
  52. <div>
  53. Tekst:<input type="text" id="text" name="text" value="<?php echo($_POST['text'])?>"><br><br>
  54.  
  55. Rozmiar:<input type="text" id="size" name="size" size="2" maxlength="2" value="<?php echo($_POST['size'])?>"><br><br>
  56.  
  57. X:<input type="text" id="x" name="x" size="2" maxlength="3" value="<?php echo($_POST['x'])?>"><br>
  58. Y:<input type="text" id="y" name="y" size="2" maxlength="3" value="<?php echo($_POST['y'])?>"><br><br>
  59.  
  60. Jakość:<input type="text" id="jakosc" name="jakosc" size="2" maxlength="3" value="<?php echo($_POST['jakosc'])?>"><br>
  61.  
  62. <select name="font">
  63. <option value="arial.ttf">Arial</option>
  64. <option value="ariblk.ttf">Arial black</option>
  65. <option value="cour.ttf">Courier New</option>
  66. <option value="georgia.ttf">Georgia</option>
  67. <option value="times.ttf">Times New Roman</option>
  68. <option value="verdana.ttf">Verdana</option>
  69. </select>
  70.  
  71. <table id="pickerTable">
  72. <tr>
  73. <td><input type="hidden" id="kolorek" name="kolor" value="<?php echo($_POST['kolor']);?>"></td><td><div id="kolor_div"></div></td><td><input type="button" value="Kolor czcionki"></td>
  74. </tr>
  75. </table>
  76.  
  77. <input type="submit" value="OK">
  78. </div>
  79. </form>
  80. </div>
  81.  
  82. <script>
  83. document.getElementById('kolor_div').style.backgroundColor = "<?php echo($_POST['kolor']); ?>";
  84. </script>
  85.  
  86. </body>
  87. </html>


JS:
[JAVASCRIPT] pobierz, plaintext
  1. function sprawdz()
  2. {
  3. blad="";
  4. if(document.getElementById('text').value == "") blad += "Nie wpisano żadnego tekstu\n";
  5. if(document.getElementById('size').value == "") {blad += "Nie podano jakości wielkości czcionki\n";} else
  6. if(isNaN(document.getElementById('size').value)) {blad += "Wielkość czcionki musi być liczbą\n";}
  7. if(document.getElementById('x').value == "") {blad += "Nie podano parametru X\n";} else
  8. if(isNaN(document.getElementById('x').value)) {blad += "Parametr X musi być liczbą\n";}
  9. if(document.getElementById('y').value == "") {blad += "Nie podano parametru Y\n";} else
  10. if(isNaN(document.getElementById('y').value)) {blad += "Parametr Y musi być liczbą\n";}
  11. if(document.getElementById('jakosc').value == "") {blad += "Nie podano jakości powstałego loga\n";} else
  12. if(isNaN(document.getElementById('jakosc').value)) {blad += "Jakość powtałego loga musi być liczbą\n";}
  13. if(document.getElementById('kolorek').value == "") blad += "Nie podano koloru";
  14.  
  15.  
  16. if(blad == "") {return true;} else {alert(blad); return false;}
  17. }
  18.  
  19. function parametry(evt) {
  20. var img_x;
  21. var img_y;
  22.  
  23. if (document.all)
  24. {
  25. img_x = evt.offsetX;
  26. img_y = evt.offsetY;
  27. } else
  28. {
  29. img_x = evt.clientX;
  30. img_y = evt.clientY;
  31. for(var offMark = evt.target; offMark; offMark = offMark.offsetParent)
  32. { img_x -= offMark.offsetLeft; }
  33.  
  34. for(var offMark = evt.target; offMark; offMark = offMark.offsetParent)
  35. { img_y -= offMark.offsetTop; }
  36. }
  37.  
  38. document.getElementById('x').value = img_x;
  39. document.getElementById('y').value = img_y;
  40. }
  41.  
  42. /**
  43. * Paleta kolorow
  44. * This class i for choosing colors
  45. * works perfectly in Opiera 7, Netscape 7, Mozilla 0.9x, and IE 6.0
  46. *
  47. * @author Marek Bedkowski "bendi"
  48. * @package <a href="http://bedkowski.pl" target="_blank">http://bedkowski.pl</a>
  49. * @link <a href="http://bedkowski.pl" target="_blank">http://bedkowski.pl</a>
  50. *
  51. * This package is protected by copy rights and international treaties. If you want to use it on your website you need to buy licence. For non commercial use licence is free.
  52. */
  53. var _s = 'style',_i = 'innerHTML',_D=document,_d='onmouse',_o=_d+'out',_c='onclick',_d=_d+'down',Picker ={
  54. convert:function(l,b,t){return (parseInt(l,b)).toString(t);},
  55. setColorFields:function(kod,k,i,h){
  56. with(this) {
  57. if(!kod){c[1][_i]='red'; c[2][_i]='green'; c[3][_i]='blue'; c[0][_i]='hex';}
  58. else {
  59. c[0][_i]='#';
  60. if(kod.indexOf('rgb')<0)for(i=0,eval('k=['+kod.replace(/#?\w(.)/g,'"$1$1",')+']');h=k[i],i<3;)
  61. {c[0][_i]+=h.toUpperCase()+''; c[++i][_i]=convert(h,16,10);}
  62. else for(eval('k=['+kod.replace(/(?:rgb\()?(\d+)\)?/g,'$1')+']'),i=0;h=convert(k[i],10,16),i<3;)
  63. {c[0][_i]+=h!=0?h.toUpperCase():'00'; c[++i][_i]=k[i-1];}
  64. }
  65. }
  66. },
  67. createPalette:function(i,j,k,s,h){
  68. for(h='0369acf'.split(''),i=0,s='';x=h[i++];)
  69. for(j=0;y=h[j++];)for(k=0;z=h[k++];)
  70. s+=(k==1&&j==1?'<tr><td '+_s+'="background:#'+x+x+x+x+x+x+'"></td>':'')+'<td '+_s+'="background:#'+x+x+y+y+z+z+'"></td>'+(k==h.length&&j==h.length?'</tr>':'');
  71. return '<table><tr><td></td><td><div>hex</div></td><td><div>red</div></td><td><div>green</div></td><td><div>blue</div></td></tr></table><table>'+s+'</table>';
  72. },
  73. hide:function(e,x,y){
  74. src=e?e.target:event.srcElement
  75. if(src.nodeName.toLowerCase()=='td'){
  76. y=this.eventSrc.parentNode.parentNode;
  77. (x=y.getElementsByTagName('input')[0]).type=='hidden'?x.value=this.c[0][_i]:'';
  78. (x=y.getElementsByTagName('div')[0])?x[_s].backgroundColor=this.c[0][_i]:'';
  79. } this.p[_s].left=-1000+'px';
  80. this.setColorFields();
  81.  
  82. _D[_d]=null;
  83. },
  84. tdOnMouseOver:function(e,t,x){
  85. x=!e?event.srcElement:e.target;
  86. if ( !/td/i.test( x.nodeName ) ) return;
  87. x[_s].backgroundImage='url("'+img.src+'")'
  88. x[_o]=function(e){this[_s].backgroundImage='';}
  89. this.setColorFields(x[_s].backgroundColor);
  90. },
  91. showPicker:function(e,x,mX,mY){
  92. x=this; mX=e?e.pageX:event.x; mY=e?e.pageY:event.y+_D.body.scrollTop;
  93. with(x.p[_s]){display='block';top = mY+'px';left = mX-100+'px';}
  94. x.eventSrc=e?e.target:event.srcElement
  95. _D[_d]=function(e){x.hide(e);}
  96. },
  97. init:function(d,E,b,i,k,t,x){
  98. d=document;E=d.documentElement;b=d.body;if(!E)return; x=this;
  99. this.p=''; this.c=new Array(4);
  100. with( ( x.p=d.createElement('div') ) ){
  101. setAttribute('id','picker');
  102. innerHTML=x.createPalette();
  103. getElementsByTagName('table')[1].onmouseover=function(e){x.tdOnMouseOver(e,x);}
  104. }
  105. b.appendChild(x.p);
  106. for(i=0,x.c=x.p.getElementsByTagName('div');t=x.c[i++];)
  107. with(t[_s])color=borderColor='#'+(i>1?'000'.substring(0,i-2)+'f':'')+'000'.substring(0,4-i);
  108. for(i=0;t=d.getElementById('pickerTable').getElementsByTagName('input')[i++];)
  109. t.onclick=/^but/i.test(t.type)?function(e){x.showPicker(e);}:null;
  110. }
  111. }
  112.  
  113. onload=function(){Picker.init();}
  114.  
  115. var img = new Image();
  116. img.src='varia/ramka.gif';
[JAVASCRIPT] pobierz, plaintext


Oprócz tego mam taką strukturę katalogów:
+ katalog varia: pliki css i js + obrazki pomocnicze
+ katalog fonts: pliki z czcionką: np. arial.ttf , verdana.ttf

- index.php - to co podałem
- noText-logo.jpg - puste logo( bez napisu )
- logo.jpg - plik, który się tworzy na serwerze już z napisem

Jest to bardzo prosty skrypt.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.