Programmatisch Clip/Cut Bild mit Javascript

Question

Gibt es Dokumente/Tutorials, wie ein großes Bild zu schneiden oder zu schneiden, so dass der Benutzer nur einen kleinen Teil dieses Bildes sieht? Nehmen wir an, das Quellbild besteht aus 10 Bildern Animation, die Ende-an-Ende gestapelt sind, so dass es wirklich breit ist. Was kann ich mit Javascript tun, um nur einen beliebigen Frame der Animation gleichzeitig anzuzeigen?

Ich habe diese "CSS Spritting" -Technik untersucht, aber ich glaube nicht, dass ich das hier verwenden kann. Das Quellbild wird dynamisch vom Server erzeugt. Ich werde nicht die Gesamtlänge oder die Größe jedes Rahmens kennen, bis es vom Server zurückkommt. Ich hoffe, dass ich etwas tun kann wie:

var image = getElementByID('some-id'); 

image.src = pathToReallyLongImage; 

// Any way to do this?! 
image.width = cellWidth; 
image.offset = cellWidth * imageNumber; 

Answer 1

Dies kann getan werden, indem Sie Ihr Bild in einem "Ansichtsfenster" div. Stellen Sie eine Breite und Höhe auf dem Div (nach Ihren Bedürfnissen), dann setzen Sie position: relative und overflow: hidden darauf. Positionieren Sie Ihr Bild absolut darin und ändern Sie die Position, um zu ändern, welche Teile angezeigt werden.

Um ein 30x40 Abschnitt eines Bildes ab (10,20) angezeigt werden:

<style type="text/css"> 
    div.viewport { 
     overflow: hidden; 
     position: relative; 
    } 

    img.clipped { 
     display: block; 
     position: absolute; 
    } 
</style> 

<script type="text/javascript"> 
    function setViewport(img, x, y, width, height) { 
     img.style.left = "-" + x + "px"; 
     img.style.top = "-" + y + "px"; 

     if (width !== undefined) { 
      img.parentNode.style.width = width + "px"; 
      img.parentNode.style.height = height + "px"; 
     } 
    } 

    setViewport(document.getElementsByTagName("img")[0], 10, 20, 30, 40); 
</script> 

<div class="viewport"> 
    <img class="clipped" src="/images/clipped.png" alt="Clipped image"/> 
</div> 

Die gemeinsamen CSS-Eigenschaften mit Klassen zugeordnet sind, so dass Sie mehrere Ansichtsfenster haben kann/abgeschnitten Bilder auf Ihrer Seite. Die Funktion setViewport(…) kann jederzeit aufgerufen werden, um zu ändern, welcher Teil des Bildes angezeigt wird.

Answer 2

Die Breite/Höhe Eigenschaften des Bildobjekts des Dokuments sind schreibgeschützt. Wenn Sie sie jedoch ändern könnten, würden Sie nur die Rahmen zerquetschen, die Rahmen nicht wie gewünscht schneiden. Die Art der Bildbearbeitung, die Sie wollen, kann nicht mit clientseitigem Javascript durchgeführt werden. Ich empfehle, die Bilder auf dem Server zu schneiden oder ein Div auf dem Bild zu überlagern, um die Teile auszublenden, die nicht angezeigt werden sollen.

Answer 3

Was Sprites tut, ist im Wesentlichen positionieren eine absolut positionierte DIV in einem anderen DIV, die Überlauf: versteckt. Sie können das gleiche tun, Sie müssen nur die Größe des äußeren DIV ändern, abhängig von der Größe jedes Rahmens des größeren Bildes. Sie können das im Code leicht tun.

können Sie legen nur die innere DIV Stil:

left: (your x-position = 0 or a negative integer * frame width)px 

Die meisten JavaScript-Frameworks machen dies ganz einfach.

Answer 4

CSS definiert auch einen Stil für Clipping. Sehen Sie sich die Clip-Eigenschaft in den CSS-Spezifikationen an.

Answer 5

Leider ist JavaScript einfach nicht in der Lage, die Eigenschaften des Bildes zu extrahieren, die Sie benötigen, um so etwas zu tun. Es kann jedoch eine Erlösung in Form des Canvas-Elements HTML < in Kombination mit etwas serverseitiger Skripterstellung geben.

PHP-Code zu extrahieren, die Breite und die Höhe des wirklich großen Bildes zu gehen:

<?php 
$large_image = 'path/to/large_image'; 
$full_w = imagesx($large_image); 
$full_h = imagesy($large_image); 
?> 

Von hier aus, dann würden Sie das Bild in ein < canvas> Element dann laden, von denen ein Beispiel dokumentiert here. Nun, meine Theorie war, dass Sie möglicherweise Pixeldaten aus einem < Canvas> -Element extrahieren können; In der Annahme, dass Sie das können, würden Sie einfach sicherstellen, dass Sie eine bestimmte Trennlinie zwischen den Rahmen des großen Bildes haben und danach innerhalb der Leinwand suchen.Nehmen wir an, Sie haben den Teiler 110 Pixel von der linken Seite des Bildes gefunden; Sie würden dann wissen, dass jeder "Frame" 110 Pixel breit ist, und Sie haben bereits die volle Breite in einer PHP-Variablen gespeichert, so dass die Entschlüsselung, wie viel Bild Sie arbeiten, wäre ein Kinderspiel. Der einzige spekulative Aspekt dieser Methode ist, ob JavaScript in der Lage ist, Farbdaten von einem bestimmten Speicherort innerhalb eines Bildes zu extrahieren, das in ein < Canvas> -Element geladen wurde. Wenn dies möglich ist, ist das, was Sie erreichen wollen, durchaus machbar.

Answer 6

Ich nehme an, Sie möchten ein Thumbnail für Ihr Bild erstellen. Sie können ImageThumbnail.js verwenden, die von Prototyp-Bibliothek auf diese Weise erstellt:

<script type="text/javascript" src="prototype.js"></script> 
<script type="text/javascript" src="ImageThumbnail.js"></script> 
<input type="file" id="photo"> 
<img src="empty.gif" id="thumbnail" width="80" height="0"> 
<script type="text/javascript"> 
<!-- 
    new Image.Thumbnail('thumbnail', 'photo'); 
//--> 
</script> 

für mehr information

Answer 7

In Antwort auf:

Ach, JavaScript einfach nicht zu extrahieren, die Eigenschaften der Lage ist, das Bild, das Sie benötigen, um so etwas zu tun. Es kann jedoch eine Rettung in Form des HTML-Elements geben, kombiniert mit etwas serverseitiger Skripterstellung. ...

< ? (open php) 
$large_image = 'path/to/large_image'; 
$full_w = imagesx($large_image); 
$full_h = imagesy($large_image); 
(close php) ? > 

Diese in Javascript getan werden kann, Google nur ein bisschen:

var newimage = new Image(); 
newimage.src = document.getElementById('background').src; 
var height = newimage.height; 
var width = newimage.width; 

Dies erzeugt ein neues Bild aus einer bestehenden und fängt diese Art und Weise in Java-Script das Original Höhe und Breite Eigenschaften des ursprünglichen Bildes (die man nicht id'ed als Hintergrund

In Antwort auf:.

Die Eigenschaften width/height des Bildobjekts des Dokuments sind schreibgeschützt. Wenn Sie sie jedoch ändern könnten, würden Sie nur die Rahmen zerquetschen, die Rahmen nicht wie gewünscht schneiden. Die Art der Bildbearbeitung, die Sie wollen, kann nicht mit clientseitigem Javascript durchgeführt werden. Ich empfehle, die Bilder auf dem Server zu schneiden oder ein Div auf dem Bild zu überlagern, um die Teile auszublenden, die nicht angezeigt werden sollen.

...

var newimage = new Image(); 
newimage.src = document.getElementById('background').src; 
var height = newimage.height; 
var width = newimage.width; 
newimage.style.height = '200px'; 
newimage.style.width = '200px'; 
newimage.height = '200px'; 
newimage.width = '200px'; 

und wenn gewünscht:

newimage.setAttribute('height','200px'); 

Die doppelte newimage.style.height und newimage.height wird unter bestimmten Umständen um erforderlich, um sicherzustellen, dass ein IE verstehen in der Zeit, dass das Bild der Größe verändert wird (Sie werden das Ding sofort nach, und die interne IE Verarbeitung ist zu langsam für die. machen)

Vielen Dank für das obige Skript Ich änderte und implementierte auf http://morethanvoice.net/m1/reader13.php (Rechtsklickmenü ... mouseover zoom verliehen) Korrekt auch im IE, aber wie Sie feststellen werden, ist die on movemove Bildverarbeitung zu schnell für den alten IE, rendert die Position aber nur einmal das Bild. In jedem Fall ist eine gute Idee willkommen.

Vielen Dank an alle für Ihre Aufmerksamkeit, hoffe, dass die oben genannten Codes jemandem helfen können ...

Claudio Klemp http://morethanvoice.net/m1/reader13.php

Answer 8

try Verwendung haxcv Bibliothek haxcv js durch einfache Funktionen

zu https://docs.haxcv.org/Methods/cutImage gehen mehr über seine Bibliothek

var Pixels = _("img").cutImage (x , y , width , height ); 

_ ("img") zu lesen. Src (Pixel.src);

// return cut Bild aber versuchen Bibliothek zuerst