Par programmation Clip/Réduire l'image à l'aide de Javascript
Sont là tous les documents/tutoriels sur la façon de clip ou de couper une grande image de sorte que l'utilisateur ne voit qu'une petite partie de cette image? Disons que l'image source est de 10 images de l'animation, mises bout-à-bout, de sorte qu'il est vraiment large. Que pouvais-je faire avec Javascript pour afficher seulement 1 arbitraire cadre de l'animation à un moment?
J'ai regardé dans cette "CSS Spriting" technique, mais je ne pense pas que je peux l'utiliser ici. La source de l'image est générée dynamiquement à partir du serveur; je ne sais pas la longueur totale, ou la taille de chaque image, jusqu'à ce qu'il revienne à partir du serveur. J'espère que je peux faire quelque chose comme:
var image = getElementByID('some-id');
image.src = pathToReallyLongImage;
//Any way to do this?!
image.width = cellWidth;
image.offset = cellWidth * imageNumber;
OriginalL'auteur Outlaw Programmer | 2009-01-26
Vous devez vous connecter pour publier un commentaire.
Cela peut être fait en plaçant votre image dans une "fenêtre" de la div. Définir une largeur et la hauteur de la div (selon vos besoins), puis mis en
position: relative
etoverflow: hidden
sur elle. Absolument position de votre image à l'intérieur d'elle et de changer la position de changer les portions sont affichés.Pour afficher une 30x40 section d'une image à partir de (10,20):
La commune de propriétés CSS sont associés à des classes de sorte que vous pouvez avoir plusieurs fenêtres /coupées images sur votre page. Le
setViewport(…)
fonction peut être appelée à tout moment de modifier la partie de l'image est affiché.Oh pinaise! Lemme résoudre ce problème. 🙂
Juste pour le fun, j'ai aussi changé setViewport de sorte que la largeur et la hauteur peuvent être omis si vous ne voulez pas de les changer.
il y a deux points à la fin de la ligne
overflow: hidden:
, malheureusement je ne peut pas la modifier depuis son seulement une une-lettre-modifier...Vous avez raison. Je me sens toujours mal lors de ces années-vieux réponses ont les fautes de frappe que je n'ai jamais pris. 😉
OriginalL'auteur Ben Blank
En réponse à :
Hélas, JavaScript n'est tout simplement pas capable d'extraire les propriétés de l'image que vous auriez besoin de faire quelque chose comme ça. Cependant, il peut y avoir de salut dans la forme de l'élément HTML combiné avec un peu de script côté serveur.
...
Cela peut être fait en Javascript, il suffit de googler un peu :
Cela génère une nouvelle image à partir d'un existant et capture de cette façon en java script original de la hauteur et la largeur des propriétés de l'image originale (pas une id ed comme arrière-plan.
En réponse à :
La largeur/hauteur de l'image du document objet sont en lecture seule. Si vous pouviez changer, cependant, vous ne écraser les images, ne pas couper les images comme vous le désirez. Le genre de manipulation de l'image que vous voulez ne peut pas être fait avec javascript côté client. Je suggère de couper les images sur le serveur, ou de superposer un div sur l'image pour cacher les parties que vous ne souhaitez pas afficher.
...
et si l'on voulait :
Le doublé newimage.style.la hauteur et la newimage.la hauteur est nécessaire, dans certaines circonstances, afin de s'assurer que IE les comprendre dans le temps que le redimensionnement de l'image (vous allez rendre la chose immédiatement après, et IE traitement est trop lent pour que.)
Merci pour le script ci-dessus, j'ai changé et mis en œuvre sur http://morethanvoice.net/m1/reader13.php (menu du clic droit... passage de la souris zoom carême) correcte même dans IE , mais comme vous le remarquerez sur le mousemove de traitement de l'image est trop rapide pour le old school c'est à dire, rend la position, mais seulement une fois que l'image. En tout cas, une bonne idée est la bienvenue.
Merci à tous pour votre attention, l'espoir que les codes ci-dessus peut aider quelqu'un...
Claudio Klemp
http://morethanvoice.net/m1/reader13.php
OriginalL'auteur Claudio Klemp
CSS définit également un style pour le découpage. Voir le clip de la propriété dans le CSS specs.
OriginalL'auteur DMKing
Hélas, JavaScript n'est tout simplement pas capable d'extraire les propriétés de l'image que vous auriez besoin de faire quelque chose comme ça. Cependant, il peut y avoir de salut dans la forme de l'HTML <canvas> élément combiné avec un peu de script côté serveur.
Code PHP pour aller sur l'extraction de la largeur et de la hauteur de la très grande image:
À partir d'ici, vous pouvez charger l'image dans un <canvas> élément, un exemple de ce qui est documenté ici. Maintenant, ma théorie est que vous pouvez être en mesure d'extraire des données de pixels à partir d'un <canvas> élément; en supposant que vous pouvez, vous assurez-vous simplement d'avoir une certaine diviseur entre les cadres de la grande image et ensuite le rechercher à l'intérieur de la toile. Disons que vous avez trouvé le diviseur de 110 pixels depuis la gauche de l'image; vous devez ensuite savoir que chaque "frame" est de 110 pixels de large, et vous avez déjà eu la pleine largeur stockée dans une variable PHP, afin de décrypter comment beaucoup de l'image que vous travaillez avec serait un jeu d'enfant.
Le seul aspect spéculatif de cette méthode est de savoir si ou de ne pas le JavaScript est capable d'extraire les données de couleur à partir d'un emplacement à l'intérieur d'une image chargée dans un <canvas> élément; si cela est possible, alors ce que vous essayez d'accomplir, c'est tout à fait faisable.
OriginalL'auteur Hexagon Theory
La largeur/hauteur de l'image du document objet sont en lecture seule. Si vous pouviez changer, cependant, vous ne écraser les images, ne pas couper les images comme vous le désirez. Le genre de manipulation de l'image que vous voulez ne peut pas être fait avec javascript côté client. Je suggère de couper les images sur le serveur, ou de superposer un div sur l'image pour cacher les parties que vous ne souhaitez pas afficher.
Nous avons une application qui sert juste les images individuelles, et il y a un peu d'AJAX pour obtenir dynamiquement. Cependant, nous espérions que le chargement 1 grande image et en l'attachant sur le côté client ferait pour une meilleure expérience utilisateur...
OriginalL'auteur ForYourOwnGood
Ce spriting n'est essentiellement la position d'un positionnement absolu DIV à l'intérieur d'un autre DIV qui a overflow:hidden. Vous pouvez faire la même chose, tout ce que vous devez faire est de redimensionner l'extérieur DIV en fonction de la taille de chaque image de l'image plus grande. Vous pouvez le faire dans le code facilement.
Vous pouvez simplement mettre l'intérieur de la DIV style:
La plupart des Frameworks JavaScript font de ce fait facile.
OriginalL'auteur Diodeus - James MacFarlane
Je suppose que vous voulez prendre une miniature de votre image. Vous pouvez utiliser ImageThumbnail.js qui a créé à partir de la librairie prototype de cette façon:
pour plus d' informations
OriginalL'auteur ecleel
essayez d'utiliser haxcv bibliothèque haxcv js par des fonctions simples
aller à https://docs.haxcv.org/Methods/cutImage pour en savoir plus sur sa bibliothèque
_("img").src (Pixels.src);
//retour de coupe de l'image
mais essayez d'inclure la bibliothèque de première
OriginalL'auteur Manassa Joseph