Toon posts:

[JS] Image-resize script werkt niet goed

Pagina: 1
Acties:

dinsdag 23 juli 2002 12:41

Acties:
  • Emerge
  • Registratie: November 2000
  • Laatst online: 05-08 07:46

Emerge

Bifidus schmifidus

Topicstarter
Ik heb een pagina gemaakt waarop mensen een bericht kunnen plaatsen, maar daarbij ook een plaatje als ze dat willen. :) Dit wordt dan in een SQL database opgeslagen.
Wanneer de berichten worden uitgelezen staan ze gewoon zo in de database:

<img src=www.provider.com/plaatje.gif name="change">

Nu heb ik hier een scriptje weten te bemachtigen die té grote plaatjes kleiner moet maken.
Dit is de code daarvan:
code:
1
2
3
4
5
6
7
8
9

&lt;script language = &quot;Javascript&quot;&gt;
function checkHeight()
{
var x = document.images.change.width
if (x &gt; 674) {
  document.images.change.width=&quot;674&quot;
}
}
&lt;/script&gt;

In de body komt dan natuurlijk de "onload="checkHeight()">" te staan.
Nu is het probleem dat dit scriptje alleen maar één plaatje resized die te groot is,
en niet allemaal. :? Volgens mij alleen de eerste die ie tegenkomt. Not sure though.
Van alles al geprobeerd. Hoe zou ik dit kunnen oplossen zodat ie ze allemaal resized?

Hoe is het met jóuw opgeblazen gevoel vandaag?

dinsdag 23 juli 2002 12:49

Acties:

Verwijderd

IE only:
code:
1
2
3
4
5
6
7
8

function resizeImages( iMaxW, iMaxH ) {
    for(var i in document.images) {
        var oImg = document.images[i];
        if(oImg.width &gt; iMaxW) oImg.width = iMaxW;
        if(oImg.height &gt; iMaxH) oImg.height = iMaxH;
    }
}
resizeImages(100, 100);

Hiermee moet je zelf wel een DOM-compatible oplossing kunnen fixen.

Gek dat dit script werkt trouwens, want volgens mijn documentatie zijn Img.width en Img.height read-only values... :?

dinsdag 23 juli 2002 15:06

Acties:

Verwijderd

In principe werkt het wel blues, maar dan moet je wel uitgaan van foto's met gelijke afmetingen of in ieder geval dezelfde verhouding hoogte en lengte, want anders vervormt alles. Kunt beter met verhoudingen werken om nieuwe hoogte en lengte te bepalen.

dinsdag 23 juli 2002 15:19

Acties:

Verwijderd

Op dinsdag 23 juli 2002 15:06 schreef hans_knight het volgende:
In principe werkt het wel blues, maar dan moet je wel uitgaan van foto's met gelijke afmetingen of in ieder geval dezelfde verhouding hoogte en lengte, want anders vervormt alles. Kunt beter met verhoudingen werken om nieuwe hoogte en lengte te bepalen.
Ik ben best een lieve jongen maar ik ga hier geen complete FO's implementeren. ;) Ik dacht dat ik 'm zo wel genoeg op weg heb geholpen.

woensdag 24 juli 2002 01:21

Acties:
  • kauwgomballen
  • Registratie: Oktober 2001
  • Laatst online: 23-06-2025

kauwgomballen

hey emerge,
een soort mitchel beveiliging dus? :P

suc7 ermee dan! :)

woensdag 24 juli 2002 02:02

Acties:
  • HunterPro
  • Registratie: Juni 2001
  • Niet online

HunterPro

Op woensdag 24 juli 2002 01:21 schreef Kauwgomballen het volgende:
hey emerge,
een soort mitchel beveiliging dus? :P

suc7 ermee dan! :)
mag ik je vragen waar deze onzinnige schop op sloeg?

zaterdag 27 juli 2002 12:05

Acties:
  • Emerge
  • Registratie: November 2000
  • Laatst online: 05-08 07:46

Emerge

Bifidus schmifidus

Topicstarter
Om maar met nog een schop verder te gaan :):
Kauwgomballen en ik kennen die Mitchel, en die vind het leuk om m'n site te verprutsen door waanzinnig grote plaatjes in de berichten te zetten zodat het m'n hele layout vern**kt.

Maar anyway, ik heb nog steeds het probleem niet kunnen oplossen. Is het niet mogelijk het eerste scriptje aan te passen zodat ie álle plaatjes resized?

Hoe is het met jóuw opgeblazen gevoel vandaag?

zaterdag 27 juli 2002 15:03

Acties:

Verwijderd

Ik heb hem een beetje aangepast, en bij mij werkt hij met alle foto's tegelijk na het inladen.
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

&lt;html&gt;
&lt;head&gt;
&lt;script language = &quot;Javascript&quot;&gt;
function resizeImages( iMaxW, iMaxH ) {
    for(i=0;i&lt;document.images.length;i++) {
        var oImg = document.images[i];
        if(oImg.width &gt; iMaxW) oImg.width = iMaxW;
        if(oImg.height &gt; iMaxH) oImg.height = iMaxH;
    }
}

&lt;/script&gt;
&lt;/head&gt;
&lt;body onLoad=&quot;Javascript:resizeImages(200,100)&quot;&gt;
&lt;center&gt;
&lt;img src=&quot;hond4.jpg&quot; border=&quot;no&quot;&gt;
&lt;img src=&quot;hond2.jpg&quot; border=&quot;no&quot;&gt;
&lt;/center&gt;
&lt;/body&gt;
&lt;/html&gt;

zondag 28 juli 2002 00:35

Acties:

Verwijderd

Als het plaatje nou 400 x 300 is. Dan wordt hij is geresized naar een width van 200 en omdat de hoogte te groot is (ook als hij dus gehalveerd wordt). Wordt het plaatje dan niet uit zijn verband te trokken omdat er een hoogte en breedte opgegeven wordt door het script?

zondag 28 juli 2002 01:28

Acties:

Verwijderd

Onderstaand script zorgt ervoor dat bij alle foto's afzondelijk gekozen kan worden voor de max. afmetingen.
De foto's worden NIET vergroot wanneer ze binnen de afmetingen vallen die je hebt ingesteld. En de breedte die je wenst moet min. gelijk zijn aan de hoogte. Van foto's zelf mogen de afmetingen wel willekeurig zijn in breedte en hoogte. In jouw geval kun je de arrays laten vervallen en voor WI en HI de waarden invullen die je foto's max. mogen hebben. Script is niet in mooiste java geschreven, maar was maar probeersel.
code:
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

&lt;html&gt;
&lt;head&gt;
&lt;script language = &quot;Javascript&quot;&gt;
var sizeW=new Array(200,300);
var sizeH=new Array(100,200);
function resizeImages() {
for(i=0;i&lt;document.images.length;i++) {
WI=sizeW[i];
HI=sizeH[i];
HO=document.images[i].height;
WO=document.images[i].width;
if(WO&gt;WI &amp;&amp; HO&gt;HI)
{
WX=WI;  
HX=WI*HO/WO;
if (HX&gt;HI)
{
HN=HI;  
WN=HI*WO/HO;
}
else
{
WN=WI;  
HN=HO*WI/WO;
}
}
else
if(WO&lt;=WI &amp;&amp; HO&lt;=HI)
{
WN=WO;
HN=HO;
}
else
if(HO&gt;HI &amp;&amp; WO&lt;=WI)
{
HN=HI;
WN=HI*WO/HO
}
else
if(WO&gt;WI &amp;&amp; HO&lt;HI)
{
WN=WI;
HN=WI*HI/WO;
}
document.images[i].height=HN;
document.images[i].width=WN;
}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onLoad=&quot;Javascript:resizeImages()&quot;&gt;
&lt;center&gt;
&lt;img src=&quot;hond4.jpg&quot; border=&quot;no&quot;&gt;
&lt;img src=&quot;hond2.jpg&quot; border=&quot;no&quot;&gt;
&lt;/center&gt;
&lt;/body&gt;
&lt;/html&gt;

zondag 28 juli 2002 08:57

Acties:

Verwijderd

Misschien heb je hier wat aan?? :P
code:
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

&lt;HEAD&gt;
&lt;SCRIPT LANGUAGE=&quot;JavaScript&quot;&gt;
&lt;!-- 
function showimg(form)
{
adres = form.image_file.value;
index = adres.indexOf(&quot;.gif&quot;);
index = index + adres.indexOf(&quot;.jpg&quot;);
index = index + adres.indexOf(&quot;.bmp&quot;);
if (form.image_file.value == &quot;&quot;)
  {alert(&quot;No Image found!&quot;);}
else
  {if (index == -3){alert(&quot;Unknow image type&quot;);
    form.width.value=0;
    form.height.value=0;}
  else
    {
    var img_obj = new Image();
    img_obj = form.image_file.value;
    document.changing.src = img_obj;
    document.changing2.src= img_obj;
    document.changing.width = document.changing2.width;
    document.changing.height = document.changing2.height;
    set();
}
  }
}
fast = 0;
change = 0;
function upw(){
  document.image.width.value=parseInt(document.image.width.value)+1;
  resize();}
function over_upw(){upw();
  change = 1;
  changetime = setTimeout(&quot;fast_upw()&quot;,&quot;600&quot;);}
function fast_upw(){clearTimeout(changetime);
  upw();
  fast = setTimeout(&quot;fast_upw()&quot;,&quot;100&quot;);}
function clt(){
if (change == 1){clearTimeout(changetime);}
clearTimeout(fast);
change = 0;
}
function resize()  {document.changing.height = document.image.height.value;
  document.changing.width = document.image.width.value;}
function downw(){document.image.width.value=parseInt(document.image.width.value)-1;
  resize();}
function over_downw(){downw();
  change = 1;
  changetime = setTimeout(&quot;fast_downw()&quot;,&quot;600&quot;);}
function fast_downw(){clearTimeout(changetime);
  downw();
  fast = setTimeout(&quot;fast_downw()&quot;,&quot;100&quot;);}
function uph(){document.image.height.value=parseInt(document.image.height.value)+1;
 resize();}
function over_downh(){downh();
  change = 1;
  changetime = setTimeout(&quot;fast_downh()&quot;,&quot;600&quot;);}
function fast_downh(){clearTimeout(changetime);
  downh();
  fast = setTimeout(&quot;fast_downh()&quot;,&quot;100&quot;);}
function over_uph(){uph();
  change = 1;
  changetime = setTimeout(&quot;fast_uph()&quot;,&quot;600&quot;);}
function fast_uph(){clearTimeout(changetime);
  uph();
  fast = setTimeout(&quot;fast_uph()&quot;,&quot;100&quot;);}
function downh(){document.image.height.value=parseInt(document.image.height.value)-1;
  resize();}
function set(){
  document.image.width.value=document.changing.width;
  document.image.height.value=document.changing.height;}
//  End --&gt;
&lt;/script&gt;

&lt;/HEAD&gt;

&lt;BODY onLoad=&quot;set()&quot;&gt;

&lt;form name=&quot;image&quot;&gt;
&lt;input type=&quot;file&quot; name=&quot;image_file&quot;&gt;&lt;br&gt;&lt;br&gt;
&lt;input type=&quot;button&quot; name=&quot;show&quot; value=&quot;Show image&quot; onclick=&quot;showimg(this.form)&quot;&gt;
&lt;br&gt;&lt;br&gt;
Width   Heigth
&lt;br&gt;&lt;img src=&quot;/img/image-resizer/up.gif&quot; onmousedown=&quot;over_upw()&quot; onmouseup=&quot;clt()&quot;&gt;
&lt;img src=&quot;/img/image-resizer/down.gif&quot; onmousedown=&quot;over_downw()&quot; onmouseup=&quot;clt()&quot;&gt;
&lt;input type=&quot;text&quot; name=&quot;width&quot; size=&quot;4&quot; readonly&gt;
&lt;input type=&quot;text&quot; name=&quot;height&quot; size=&quot;4&quot; readonly&gt;
&lt;img src=&quot;/img/image-resizer/up.gif&quot; onmousedown=&quot;over_uph()&quot; onmouseup=&quot;clt()&quot; &gt;
&lt;img src=&quot;/img/image-resizer/down.gif&quot; onmousedown=&quot;over_downh()&quot; onmouseup=&quot;clt()&quot;&gt;
&lt;br&gt;&lt;br&gt;
&lt;table border =&quot;2&quot;&gt;
&lt;tr&gt;&lt;td&gt;
&lt;img src=&quot;/img/image-resizer/1.gif&quot; name=&quot;changing&quot;&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/form&gt;
&lt;div STYLE=&quot;left:-5000 px;top:0&quot; class=&quot;divstyle&quot;&gt;
&lt;P &gt;&lt;img src=&quot;/img/image-resizer/1.gif&quot; name=&quot;changing2&quot;&gt;&lt;/p&gt;
&lt;/div&gt;
Pagina: 1
Reageer