Quel est le moyen le meilleur et le plus rapide pour redimensionner des images sur le côté client en utilisant JavaScript?Comment afficher des images redimensionnées sur une page Web tout en conservant les proportions?
EDIT: Désolé, je voulais dire la meilleure façon de affichage une image redimensionnée sur le côté client ..
Facile.
<!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>
–
Je ne sais pas si vous voulez dire redimensionner réellement l'image ou tout simplement définir la taille que l'image est affichée à. L'un est impossible, l'autre serait de définir les propriétés width et height à l'aide de jQuery.
Si vous êtes désireux de le faire dans une déclaration, la hauteur et la largeur des propriétés seraient très probablement le mieux.
Si vous voulez quelque chose d'animé, vous pouvez utiliser la commande .animate(...) et définir la hauteur et la largeur comme paramètres. Cela devrait faire changer l'image en douceur.
Les images doivent toujours être exposées à la taille à laquelle elles doivent être affichées. Il est préférable d'avoir plusieurs copies sur le serveur au lieu de copier un fichier sur le réseau et d'essayer de manipuler du côté client. Considérez ceci:
Redimensionner une l'image n'est pas un changement simple de hauteur/largeur. Lorsque vous spécifiez une taille différente de celle de l'image d'origine (styles, script, etc.), le navigateur utilise l'API native (win32 draw par exemple) pour rétrécir/agrandir correctement l'image. Recadrer l'image (perdre des portions d'image) est plus facile mais rarement souhaité.
-1 pour "devrait toujours être servi". Réutiliser la même image à différentes tailles peut être utile pour économiser la bande passante. En outre, lorsque vous autorisez les utilisateurs à importer des images (par exemple dans un forum), vous pouvez souhaiter le redimensionner. Faire du poids et de la hauteur ne signifie pas redimensionner l'image. – Pool
Si vous n'êtes pas trop rebutés par flash, avec Flash10 maintenant vous avez le choix de traitement des fichiers téléchargés sur le côté client avant de les envoyer au serveur. Vous pouvez donc utiliser un objet flash caché/transparent/petit pour permettre au client de télécharger son image, avoir le redimensionnement de l'image (il a quelques bonnes API de manipulation d'image), puis envoyer les données d'octets au serveur.
La librairie as3 core dispose d'encodeurs jpeg et png si vous souhaitez encoder l'image dans l'un des formats avant de la télécharger.
Si vous ne l'avez pas, vous pouvez toujours télécharger le flex 3 (ou 4) sdk et utiliser FlashDevelop pour tout faire gratis =)
Redimensionnement avant de télécharger serait un outil très puissant. Cela réduirait le temps nécessaire pour télécharger des images sur un serveur. Souvent, nos utilisateurs ont 5 images méga-pixel fraîchement sorties de leurs caméras et ils n'ont aucune idée de la façon de réduire la taille en utilisant un éditeur d'image. Ce que nous voulons télécharger est une photo de 1500 pixels de large, jpg ou png compressé à moins de 500 Ko.
Cette tenue Thin File prétend pouvoir le faire mais je ne l'ai pas encore vérifié. J'espérais plutôt trouver un moyen d'utiliser JQuery pour faire la même chose.
Flash 10 a un support pour le redimensionnement des images sur le côté client:
http://www.shift8creative.com/projects/agile-uploader/index.html Redimensionner avant de les charger. Intégration JavaScript flexible et flexible, vous pouvez utiliser n'importe quel langage dorsal, une image rapide et de bonne qualité.
une plus belle démonstration que la page principale qui montre l'intégration JavaScript: http://www.shift8creative.com/projects/agile-uploader/advanced-demo.html
libre comme dans la bière. J'espère que cela aide.
Voulez-vous peut-être un moyen de minimiser le trafic réseau lorsque l'utilisateur veut télécharger une image à partir du client, en redimensionnant d'abord l'image pour être plus petit avant de l'envoyer au service? –
@Jeffrey: Oui, tout à fait raison. Sinon, redimensionnez simplement le côté serveur avant de l'envoyer sur le réseau. –
@mattt: un certain nombre de personnes ont proposé des solutions pour redimensionner l'image avant de la télécharger. Est-ce que c'est ce que tu cherchais? (Le texte actuel de la question est un peu flou, et l'édition serait utile). –