Bildausschnitt

Zulakis · 16.10.2011, 11:59

Moin,
ich habe ein Bild von dem ich gerne nur einen bestimmten Ausschnitt anzeigen möchte. In PHP kann man bspw. imagecopy benutzen. Gibt es so eine Funktion auch für javascript?

Edit: Habe das Object Image gefunden, ich schau mal ob ich meine Funktion damit realisieren kann.

Edit 2: Bin so leider nicht weiter gekommen. Tipps?

Zulakis · 16.10.2011, 13:49

Ich habe ein Bild, was untereinander (jeweils 42px) (12) verschiedenen Frames von einer drehenden Statusanzeige beeinhaltet.

Mein Code um das ganze darzustellen ist folgender:

PHP-Code:

  <script type="text/javascript">

var size = 0;

var frequency = 100;

function animation() {

 
var inpt = document.createElement("img");

 
document.body.appendChild(inpt);

document.body.lastChild.setAttribute("id", "spinner");

document.body.lastChild.setAttribute("name", "spinner");

document.body.lastChild.setAttribute("src", "spinner.png");

document.body.lastChild.setAttribute("style", "position:absolute; top:0px; clip:rect(0, 42px, 42px, 0);");

 
}

function run() {

timer = setInterval(function() {

    changeImage(size); 

    size++;

    },frequency);

 
}

function changeImage(size) {

    if (size < 12) {

        document.getElementById("spinner").style.clip = 'rect(' + (size*42) +  'px, 42px, ' + (42 + (size*42)) +'px, 0)';

        document.getElementById("spinner").style.top = '-' + size*42;

    } else  {

        clearTimeout(timer)

        size = 1;

        changeImage(0); 

        timer = setInterval(function() {

        changeImage(size); 

        size++;

    },frequency);

        }

}

</script>

Nun ist das ganze nicht wirklich performant und hängt manchmal. Wie macht man's besser?

Noch ein Edit:

Ich habe mir noch ne zweite Lösung ausgedacht:

PHP-Code:

  <script type="text/javascript">

<script type="text/javascript">

var size = 0;

var frequency = 100;

var isRunning;

function animation() {

 
var layer = document.createElement("div");

document.body.appendChild(layer);

document.body.lastChild.setAttribute("id", "layer");

document.body.lastChild.setAttribute("style", "position:absolute; top:50px; height:42px; width:42px; border: solid 2px #b3b2b2; overflow:hidden");

 
var inpt = document.createElement("img");

document.getElementById("layer").appendChild(inpt);

document.getElementById("layer").lastChild.setAttribute("id", "spinner");

document.getElementById("layer").lastChild.setAttribute("src", "spinner.png");

document.getElementById("layer").lastChild.setAttribute("style", "position:relative; top:0px;");

 
}

function run() {

    timer = setInterval(function() {

    changeImage(size); 

    },frequency);

}

function changeImage() {

        size++;

    if (size < 12) {

        document.getElementById("spinner").style.top = '-' + size*42 + 'px';

    } else  {

        clearInterval(timer)

        size = 0;

        changeImage(0); 

        timer = setInterval(function() {

        changeImage(); 

    },frequency);

        }

}

</script>

php1704 · 16.10.2011, 16:44

Wieso verwendest du kein animiertes Gif?

Grüße.

rudygotya · 16.10.2011, 17:00

JS Lösung:
http://davidwalsh.name/spin-js
http://www.webresourcesdepot.com/spi...ithout-images/

Gif: http://www.ajaxload.info/

Grüße

Basti

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Bildausschnitt für nachfolgende Bearbeitung Clientseitig festlegen	RustyXXL	JavaScript, Ajax und mehr	4	03.03.2010 17:12
Bildausschnitt wählen	Sharker	PHP Tipps 2009	6	01.10.2009 20:09
Bildausschnitt speichern	harego	PHP Tipps 2008	5	01.07.2008 17:11
Bildausschnitt wählen	DDogg	PHP Tipps 2005	36	25.05.2005 10:30
zufälliger bildausschnitt bei thumbnailerstellung		PHP Tipps 2005	5	29.01.2005 21:54
[Erledigt] bildausschnitt verlinken		HTML, Usability und Barrierefreiheit	2	24.10.2004 19:01

16.10.2011, 11:59
Zulakis Erfahrener Benutzer Registriert seit: 21.09.2010 Beiträge: 143 PHP-Kenntnisse: Anfänger	Bildausschnitt Moin, ich habe ein Bild von dem ich gerne nur einen bestimmten Ausschnitt anzeigen möchte. In PHP kann man bspw. imagecopy benutzen. Gibt es so eine Funktion auch für javascript? Edit: Habe das Object Image gefunden, ich schau mal ob ich meine Funktion damit realisieren kann. Edit 2: Bin so leider nicht weiter gekommen. Tipps? Geändert von Zulakis (16.10.2011 um 12:27 Uhr).


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

16.10.2011, 13:49
Zulakis Erfahrener Benutzer Registriert seit: 21.09.2010 Beiträge: 143 PHP-Kenntnisse: Anfänger	Ich habe ein Bild, was untereinander (jeweils 42px) (12) verschiedenen Frames von einer drehenden Statusanzeige beeinhaltet. Mein Code um das ganze darzustellen ist folgender: PHP-Code: <script type="text/javascript"> var size = 0; var frequency = 100; function animation() { var inpt = document.createElement("img"); document.body.appendChild(inpt); document.body.lastChild.setAttribute("id", "spinner"); document.body.lastChild.setAttribute("name", "spinner"); document.body.lastChild.setAttribute("src", "spinner.png"); document.body.lastChild.setAttribute("style", "position:absolute; top:0px; clip:rect(0, 42px, 42px, 0);"); } function run() { timer = setInterval(function() { changeImage(size); size++; },frequency); } function changeImage(size) { if (size < 12) { document.getElementById("spinner").style.clip = 'rect(' + (size42) + 'px, 42px, ' + (42 + (size42)) +'px, 0)'; document.getElementById("spinner").style.top = '-' + size42; } else { clearTimeout(timer) size = 1; changeImage(0); timer = setInterval(function() { changeImage(size); size++; },frequency); } } </script> Nun ist das ganze nicht wirklich performant und hängt manchmal. Wie macht man's besser? Noch ein Edit: Ich habe mir noch ne zweite Lösung ausgedacht: PHP-Code: <script type="text/javascript"> <script type="text/javascript"> var size = 0; var frequency = 100; var isRunning; function animation() { var layer = document.createElement("div"); document.body.appendChild(layer); document.body.lastChild.setAttribute("id", "layer"); document.body.lastChild.setAttribute("style", "position:absolute; top:50px; height:42px; width:42px; border: solid 2px #b3b2b2; overflow:hidden"); var inpt = document.createElement("img"); document.getElementById("layer").appendChild(inpt); document.getElementById("layer").lastChild.setAttribute("id", "spinner"); document.getElementById("layer").lastChild.setAttribute("src", "spinner.png"); document.getElementById("layer").lastChild.setAttribute("style", "position:relative; top:0px;"); } function run() { timer = setInterval(function() { changeImage(size); },frequency); } function changeImage() { size++; if (size < 12) { document.getElementById("spinner").style.top = '-' + size42 + 'px'; } else { clearInterval(timer) size = 0; changeImage(0); timer = setInterval(function() { changeImage(); },frequency); } } </script> Geändert von Zulakis (16.10.2011 um 14:29 Uhr).

16.10.2011, 16:44
php1704 Erfahrener Benutzer Registriert seit: 13.05.2011 Beiträge: 188 PHP-Kenntnisse: Fortgeschritten	Wieso verwendest du kein animiertes Gif? Grüße.

16.10.2011, 17:00
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	JS Lösung: http://davidwalsh.name/spin-js http://www.webresourcesdepot.com/spi...ithout-images/ Gif: http://www.ajaxload.info/ Grüße Basti __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog