HTML5 Canvas - Skalierbarer Abschnitt mit einer Vorschau und die verschiedenen Dimensionen des Bildes

Question

Ich habe einige komplizierte, zu lösende Probleme. Jetzt muss ich eine solche Funktion in Javascript schreiben, das Objekt-Canvas in HTML5 unterstützt, das den Teil des Bildes ausschneidet und es in der Vorschau zeigt. Ich muss als mit der unterschiedlichen Auflösung von Bildern tun. Ich benutze hierfür die jQuery-Bibliothek, insbesondere jquery.Jcrop.js .. Der sichtbare Teil des Bildes in der Vorschau werde ich später für weitere Zwecke verwenden, er muss in der ausgeschnittenen Form in Datei schreibbar sein - also benutze ich die Möglichkeiten der Leinwand. Dieses Skript funktioniert gut, aber das Problem ist, wenn ich versuche, ein Foto von der größeren auf die kleinere zu skalieren (ich möchte, dass jedes Bild im Browserfenster auf 500 px fixiert wird). Ich präsentiere unter dem aktuellen Bild eines Skripts:

function updatePreview(c) 
{ 
if (parseInt(c.w) > 0) 
{ 
var rx = 200/c.w; 
var ry = 300/c.h; 

// Show canvas image preview2 
var imageObj = $("#target")[0]; 
var canvas = $("#preview2")[0]; 
var context = canvas.getContext("2d"); 
canvas.setAttribute('width', '200'); 
canvas.setAttribute('height', '300'); 
//context.scale(2, 2); 
context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, 
canvas.width, canvas.height); 

$('#preview').css({ 
width: Math.round(rx * boundx) + 'px', 
height: Math.round(ry * boundy) + 'px', 
marginLeft: '-' + Math.round(rx * c.x) + 'px', 
marginTop: '-' + Math.round(ry * c.y) + 'px' 
}); 
} 
}; 

Und hier ist eine vereinfachte HTML-Code, der für das Skript

<table> 
<tr> 
<td> 
<img src="http://imgon.net/di-M7Z9.jpg" id="target" 
alt="obrazek" height="450"/> 
</td> 
<td> 
<div style="width:200px;height:300px;overflow:hidden;"> 
<img src="http://imgon.net/di-M7Z9.jpg" id="preview" alt="Preview" /> 
</div> 
<br /> 
<div> 
<canvas id="preview2" style="width:200px;height:300px;"></canvas> 
</div> 
</td> 
</tr> 
</table> 

Die erste Vorschau auf CSS-Basis zu verarbeiten ist und es funktioniert einwandfrei, aber CSS bedeckt nur einen Teil des Bildes und schneidet es nicht. Kontrast, Canvas sieht ein Bild in hoher Auflösung und Vorschau zeigt nicht das Segment der skalierten Bilder (ich habe nur einen vergrößerten Ausschnitt). Dies geschieht in Firefox. Für Internet Explorer ist eine spezielle Bibliothek, und das Ergebnis für die Leinwand ist das gleiche wie für CSS. Meine letzte Frage ist. Wie kann ich der Funktion sagen, eine Vorschau für das skalierte Bild und nicht die Vorschau für die Originalauflösung zu erstellen? Ich habe versucht, einen Ersatz für die Variable c.y wie Math.round (rx * boundx) und für cx Math.round (ry * boundy) zu setzen, aber es ist nicht richtig. Ich gebe hier eine Seite, wo Sie das Skript live sehen können: agd-brita.pl/mobile2/tutorial.html Ich bitte Sie um Hilfe. Danke für den Fortschritt.

Answer 1

Ich musste ein wenig verstehen, wie jCrop funktioniert, um Ihnen zu antworten.

machte ich eine Geige zu zeigen, wie meine Lösung funktioniert: http://jsfiddle.net/maitrekaio/Wre8w/
Der wichtigste Punkt ist, dass mit Leinwand mit CSS und Arbeits arbeiten wirklich unterschiedlich sind und dass Sie verschiedene Berechnungen vornehmen müssen.
Dennoch ist der Start der gleiche: Sie haben ein Bildelement, target und eine Ernte innerhalb. Die Details des Zuschneidens werden von jCrop angegeben, und die Dimensionen des Bildelements werden in meiner displayedImg Variablen gespeichert.

Die CSS-Vorschau

Die preview-container wie ein Fenster, das wir einen Teil des enthaltenen Bildes sehen lassen ist. Das enthaltene Bildelement wurde nicht in der Größe verändert, so dass seine Abmessungen denen des Bildes realImg entsprechen. Wenn die Größe geändert und verschoben wird, müssen wir das Gefühl geben, dass das Fenster dasselbe tut. Tatsächlich ist es das enthaltene Bild, das in der Größe verändert und verschoben wird. Wie berechnet man das?
Es ist leicht zu sehen, dass das Verhältnis (crop/displayedImg) gleich dem Verhältnis (Vorschau/RealImg) sein muss. Das gibt uns die Formel:
realImg = (displayedImg * Vorschau)/Ernte
Damit ist es leicht Breite zu berechnen, Höhe, x (margin) und y (MarginTop), die auf die CSS-Vorschau angewendet werden.

Die Leinwand Vorschau

Für die Leinwand, wissen wir, dass wir die komplexesten Version von context.drawImage() verwenden werden, die, die uns zuschneiden können und die Größe. Der erste Parameter dieser Methode ist ein JS-Bildobjekt. Wir verwenden das Bild target. Diesmal wollen wir den Ausschnitt im realen Bild berechnen, wobei wir den Ausschnitt im angezeigten Bild kennen.(crop/displayedImg) muss gleich sein (realImgCrop/realImg). Es gibt uns die Formel: realImgCrop = (crop * realImg)/displayedImg
Fertig!