Was ist die beste und schnellste Möglichkeit, um Bilder auf der Client-Seite mit JavaScript zu skalieren?Wie werden skalierte Bilder auf einer Webseite angezeigt, während das Seitenverhältnis beibehalten wird?
EDIT: Sorry, ich meinte die beste Weg, um Anzeige ein Bild auf der Client-Seite der Größe verändert ..
Einfach.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Client-Side Image Resize (Why?!)</title>
<script type="text/javascript">
window.onload = function() {
var url = "http://www.google.com/intl/en_ALL/images/logo.gif";
var img = new Image();
img.onload = function() {
var w = parseInt((this.width + "").replace(/px/i, ""), 10);
var h = parseInt((this.height + "").replace(/px/i, ""), 10);
// 50% scale
w = (w/2) + "px";
h = (h/2) + "px";
var htmlImg = document.createElement("img");
htmlImg.setAttribute("src", url);
htmlImg.setAttribute("width", w);
htmlImg.style.width = w;
htmlImg.setAttribute("height", h);
htmlImg.style.height = h;
document.body.appendChild(htmlImg);
}
img.src = url;
}
</script>
</head>
<body>
<h1>Look, I'm Resized!</h1>
</body>
</html>
Gewicht und Höhe bedeutet nicht die Größe des Bildes zu ändern. –
Ich bin nicht sicher, ob Sie tatsächlich bedeuten, die Größe des Bildes oder einfach nur die Größe festgelegt, dass Das Bild wird unter angezeigt. Eins ist unmöglich, das andere wäre, die Eigenschaften width und height mit jQuery zu setzen.
Wenn Sie wollen es in einer Erklärung zu tun, dann die Höhe und Breite Eigenschaften am ehesten wäre am besten.
Wenn Sie etwas animiertes möchten, können Sie den Befehl .animate(...) verwenden und die Höhe und Breite als Parameter festlegen. Dadurch sollte das Bild einen weichen Übergang haben.
Bilder sollten immer in der Größe angezeigt werden, in der sie angezeigt werden sollen. Es ist besser, mehrere Kopien auf dem Server zu haben, anstatt eine Datei über das Netzwerk zu kopieren und auf der Client-Seite zu manipulieren. Bedenken Sie:
Ändern der Größe eines schrumpfen/vergrößern Bild ist nicht einfach Änderung der Höhe/Breite. Wenn Sie eine andere Größe als die ursprüngliche Bildgröße angeben (entweder über Stile, Skripts usw.), verwendet der Browser die native API (z. B. win32 draw), um das Bild richtig zu verkleinern/zu vergrößern. Das Bild beschneiden (Teile des Bildes verlieren) ist einfacher, aber selten erwünscht.
-1 für "immer sollte serviert werden". Die Wiederverwendung des gleichen Bildes in verschiedenen Größen kann nützlich sein, um Bandbreite zu sparen. Wenn Sie Benutzern erlauben, Bilder zu importieren (zum Beispiel in einem Forum), möchten Sie möglicherweise die Größe ändern. – Pool
Wenn Sie nicht zu sind durch Flash zu aufschieben, mit flash10 jetzt haben Sie die Wahl der Verarbeitung hochgeladenen Dateien auf der Client-Seite, bevor sie an den Server sendet. Sie können also ein verstecktes/transparentes/kleines Flash-Objekt verwenden, um dem Client das Hochladen des Bildes zu ermöglichen, das Bild flash-skalieren zu lassen (es verfügt über eine gute Bildbearbeitung) und die Byte-Daten an den Server zu senden.
Die As3-Core-Bibliothek hat einen JPEG- und PNG-Encoder, wenn Sie das Bild vor dem Hochladen in beide Formate codieren möchten.
Wenn Sie nicht über Flash haben immer laden Sie den Flex 3 (oder 4) sdk und verwenden FlashDevelop alles gratis tun =)
Ändern der Größe, bevor ein sehr mächtiges Werkzeug wäre hochladen. Dies würde die Zeit zum Hochladen von Bildern auf einen Server reduzieren. Oft haben unsere Nutzer 5 Megapixel-Bilder, die von ihren Kameras stammen, und sie haben keine Ahnung, wie sie die Größe mithilfe eines Bildeditors reduzieren können. Was wir hochladen möchten, ist ein 1500 Pixel breites Foto, jpg oder png komprimiert auf weniger als 500 Kbytes.
Dieses Outfit Thin File behauptet, in der Lage zu sein, aber ich habe es noch nicht ausgecheckt. Ich hatte eher gehofft, einen Weg zu finden, JQuery zu verwenden, um dasselbe zu tun.
Blitz 10 hat die Unterstützung für Bilder auf Client-Seite Ändern der Größe:
http://www.shift8creative.com/projects/agile-uploader/index.html Resize vor dem Hochladen. Flexible, enge JavaScript-Integration, lassen Sie uns jede Back-End-Sprache verwenden, schnelle, gute Bildqualität.
Ein schöner Demo als die Haupt-Seite, die die JavaScript-Integration protzt: http://www.shift8creative.com/projects/agile-uploader/advanced-demo.html
wie in Bier Free. Ich hoffe es hilft.
Möchten Sie möglicherweise den Netzwerkverkehr minimieren, wenn der Benutzer ein Bild vom Client hochladen möchte, indem das Bild zuerst verkleinert wird, bevor es an den Server gesendet wird? –
@ Jeffrey: Yup, völlig richtig. Andernfalls ändern Sie einfach die Größe der Serverseite, bevor Sie sie über die Leitung senden. –
@mattt: Eine Reihe von Leuten bot Lösungen an, um das Bild zu vergrößern, bevor es hochgeladen wurde. Haben Sie danach gesucht? (Der aktuelle Text der Frage ist ein wenig unklar, und die Bearbeitung wäre hilfreich). –