Maison >
interface Web >
Tutoriel H5 >
Exemple complet de zoom et de téléchargement d'images via les compétences du didacticiel Canvas et File API_html5
Exemple complet de zoom et de téléchargement d'images via les compétences du didacticiel Canvas et File API_html5
WBOY
Libérer: 2016-05-16 15:49:07
original
1569 Les gens l'ont consulté
Exemple d'adresse : Démo de redimensionnement de toile Auteur original : Dr Tom Trenka Date originale : 6 août 2013 Date de traduction : 8 août 2013
Tom Trenka C'est un immense honneur pour moi d'écrire un article pour « mon » blog. Tom a été l'un des premiers contributeurs au framework Dojo et a été mon mentor chez SitePen. J'ai été témoin de son génie au plus haut niveau, et il a toujours été le premier à prévoir de nombreux problèmes difficiles avec des solutions tournées vers l'avenir. Il pense toujours de l'extérieur et résout les problèmes marginaux de manière non conventionnelle mais solide. Cet article en est un parfait exemple. Dernièrement, on m'a beaucoup demandé comment créer une API d'interface utilisateur qui permettrait aux utilisateurs de télécharger des images sur un serveur (entre autres choses) et d'être utilisée côté client du grand nombre de sites Web pris en charge par notre société. Habituellement, c'est une chose très simple : créez un formulaire, ajoutez une zone de saisie de type de fichier, laissez l'utilisateur sélectionner une image sur l'ordinateur et définissez le formulaire enctype="multipart/form-data" sur les propriétés de la balise de formulaire, puis téléchargez-le. . Assez simple, n'est-ce pas ? En fait, voici un exemple assez simple : Cliquez pour entrer Mais que se passe-t-il si vous souhaitez prétraiter l'image d'une manière ou d'une autre avant de la télécharger ? Par exemple, vous devez d'abord compresser la taille de l'image, ou vous avez besoin que l'image soit uniquement dans certains types de formats, tels que png ou jpg, que devez-vous faire ? Utilisez Canvas pour le résoudre !
Introduction à Canvas Canvas est un nouvel élément DOM en HTML5 qui permet aux utilisateurs de dessiner des graphiques directement sur la page, généralement en utilisant JavaScript. Les différentes normes de format sont également différentes. Par exemple, SVG est une API raster (API raster) tandis que VML est une API vectorielle. Vous pouvez envisager d'utiliser Adobe Illustrator (vecteur) pour le dessin et Adobe Photoshop (raster) pour le dessin.
Ce que vous pouvez faire sur Canvas, c'est lire et restituer des images, et vous permettre de manipuler les données d'image via JavaScript. Il existe de nombreux articles qui présentent pour vous le traitement d'image de base - en se concentrant principalement sur diverses techniques de filtrage d'image - mais tout ce dont nous avons besoin est de redimensionner l'image et de la convertir dans un format de fichier spécifique, et Canvas peut faire ces choses complètement.
Nos exigences supposées, telles que la hauteur de l'image ne dépassant pas 100 pixels, quelle que soit la hauteur de l'image originale. Le code de base est le suivant :
Copiez le code
Le code est le suivant :
// Paramètres, hauteur maximale var MAX_HEIGHT = 100; // Rendu function render(src){ // Créer un objet Image var image = new Image() ; // Lier le gestionnaire d'événement de chargement et l'exécuter une fois le chargement terminé image.onload = function(){ // Récupérer l'objet DOM canevas var canvas = document.getElementById("myCanvas "); // Si la hauteur dépasse la norme if(image.height > MAX_HEIGHT) { // Mise à l'échelle proportionnelle à la largeur *= image.width *= MAX_HEIGHT / image.height ; image.height = MAX_HEIGHT; } // Récupère l'objet environnement 2d de Canvas, // On peut comprendre que Context est l'administrateur et Canvas est la maison var ctx = canvas.getContext("2d"); //Effacer l'écran du canevas ctx.clearRect(0, 0, canvas.width, canvas.height); //Réinitialiser la largeur et la hauteur du canevas canvas.width = image.width; canvas.height = image.height; // Dessinez l'image sur la toile ctx.drawImage(image, 0, 0, image.width, image .height); // !!! Notez que l'image n'est pas ajoutée au dom }; // Définissez l'attribut src et le navigateur le chargera automatiquement. // N'oubliez pas que l'événement doit d'abord être lié avant que l'attribut src puisse être défini, sinon des problèmes de synchronisation se produiront. image.src = src; }
Dans l'exemple ci-dessus, vous pouvez utiliser la méthode toDataURL() de Canvas pour obtenir la valeur codée en Base64 de l'image (qui peut être également comprise comme une chaîne hexadécimale ou un flux de données binaires Remarque : toDataURL de Canvas). () L'URL obtenue commence par une chaîne et contient 22 données inutiles "data:image/png;base64", qui doivent être filtrées sur le client ou le serveur En principe, tant que le navigateur le prend en charge, le. Adresse URL Il n'y a pas de limite de longueur et la limite de longueur de 1 024 est unique à l'ancienne génération d'IE.
Excusez-moi, comment obtenir les images dont nous avons besoin ? Bon garçon, je suis content que tu aies demandé. Vous ne pouvez pas le traiter directement via la zone de saisie du fichier. Tout ce que vous pouvez obtenir de cet élément de la zone de saisie du fichier est uniquement le chemin d'accès au fichier sélectionné par l'utilisateur. Selon l'imagination conventionnelle, vous pouvez charger des images via ces informations de chemin, mais cela est irréaliste dans le navigateur. (Note du traducteur : les fabricants de navigateurs doivent s'assurer que leurs navigateurs sont absolument sécurisés afin de gagner des parts de marché, au moins pour éviter les attaques médiatiques. Si cela est autorisé, des URL malveillantes peuvent tenter d'obtenir certaines informations sensibles en regroupant les chemins de fichiers Afin de répondre à cette exigence, nous pouvons utiliser l'API File de HTML5 pour lire les fichiers sur le disque de l'utilisateur et utiliser ce fichier comme source de l'image (src, source
Introduction à l'API File). La nouvelle interface File API est un moyen de lire et de répertorier les répertoires de fichiers utilisateur sans enfreindre les règles de sécurité du bac à sable - grâce aux restrictions du bac à sable, les sites Web malveillants ne peuvent pas écrire de virus sur les disques utilisateur, bien sûr, ils ne peuvent pas être exécutés. L'objet de lecture de fichiers que nous souhaitons utiliser s'appelle FileReader. FileReader permet aux développeurs de lire le contenu des fichiers (l'implémentation de navigateurs spécifiques peut être très différente).
En supposant que nous avons obtenu le chemin du fichier image, puis en nous appuyant sur le code précédent, il devient facile d'utiliser FileReader pour charger et restituer l'image :
Copier le codeLe code est le suivant :
// Charger le fichier image (chemin url) fonction loadImage(src) { / / Filtrer les fichiers non-image if(!src.type.match(/image.*/)){ if(window.console){ console.log( "Type de fichier sélectionné Pas une image : ", src.type); } else { window.confirm("Seuls les fichiers image peuvent être sélectionnés"); } return; } // Créez un objet FileReader et appelez la fonction de rendu pour terminer le rendu var reader = new FileReader(); // Lier la fonction de rappel automatique de l'événement de chargement reader.onload = function (e){ / / Appeler la fonction de rendu précédente render(e.target.result } // Lire le contenu du fichier reader.readAsDataURL(src); };
Excusez-moi, comment obtenir le fichier ?
Petit lapin blanc, sois patient ! Notre prochaine étape consiste à obtenir le fichier, et bien sûr, il existe de nombreuses façons de le faire. Par exemple : vous pouvez utiliser une zone de texte pour permettre aux utilisateurs de saisir des chemins de fichiers, mais évidemment la plupart des utilisateurs ne sont pas des développeurs et n'ont aucune idée des valeurs à saisir Pour plus de commodité, nous utilisons l'interface API Drag and Drop. .
Utilisation de l'API Drag and Drop L'interface glisser-déposer (Drag and Drop) est très simple - sur la plupart des éléments DOM, vous pouvez lier les gestionnaires d'événements à l'implémentation tant que vous le faites. lorsque l'utilisateur fait glisser un fichier du disque vers l'objet dom et relâche la souris, nous pouvons lire le fichier. Le code est le suivant :
Copier le code Le code est le suivant :
function init(){
// Récupérer l'objet élément DOM var target = document.getElementById("drop-target"); // Empêcher la livraison de l'événement par glisser-déplacer au-dessus de l'élément DOM target.addEventListener("dragover ", function(e){e.preventDefault();}, true); // Faites glisser et relâchez l'événement de la souris target.addEventListener("drop", function(e ){ // Empêcher les événements par défaut et la propagation des événements e.preventDefault(); // Appeler la fonction de chargement d'image précédente, le paramètre est le premier fichier de l'objet dataTransfer loadImage(e .dataTransfer.files[ 0]); }, true); var setheight = document.getElementById("setheight"); var maxheight = document.getElementById("maxheight"); setheight.addEventListener(" click", function(e){ // var value = maxheight.value; if(/^d $/.test(value)){ MAX_HEIGHT = parseInt(value); } e.preventDefault(); },true); var btnsend = document.getElementById("btnsend"); ", function(e ){ // sendImage(); },true); };
Nous pouvons également effectuer d'autres traitements, comme l'affichage d'images d'aperçu. Mais si vous ne souhaitez pas compresser l’image, cela ne sert probablement à rien. Nous utiliserons Ajax pour télécharger des données d'image via la méthode de publication HTTP. L'exemple suivant utilise le framework Dojo pour compléter la requête. Bien entendu, vous pouvez également utiliser d'autres technologies Ajax pour l'implémenter Le code Dojo est le suivant :
. Copier le code
Le code est le suivant :
// Le traducteur ne comprend pas Dojo, donc l'implémentation de jQuery sera jointe plus tard / / N'oubliez pas que DTK 1.7 est AMD ! require(["dojo/request"], function(request){ // Définissez l'URL de la requête, les paramètres et les rappels. request.post("image -handler.php", { data : { imageName : "myImage.png", imageData: encodeURIComponent(document.getElementById("canvas").toDataURL("image/png")) } } .then(function(text){ console.log("Le serveur a renvoyé : ", text); });
jQuery est implémenté comme suit :
Copier le codeLe code est le suivant :
// Télécharger l'image, version jQuery
function sendImage(){ // Récupérer l'objet DOM canevas var canvas = document.getElementById("myCanvas"); les données d'image codées en Base64, le format est une chaîne // Au début de "data:image/png;base64", il doit être supprimé côté client ou serveur, et les parties suivantes peuvent être écrites directement dans le fichier. var dataurl = canvas.toDataURL("image/png"); // Encoder l'URI pour la sécurité // data:image/png;base64, commençant var imagedata = encodeURIComponent( dataurl) ; //var url = $("#form").attr("action"); // 1. Si le formulaire est difficile à traiter, vous pouvez utiliser un champ caché pour définir la demande. Adresse // var url = $("input[name='action']").val (); // 2. Vous pouvez également utiliser directement les attributs d'un objet DOM pour obtenir // // var url = $("#imageaction").attr("action"); // Comme il s'agit d'une chaîne, le serveur doit transcoder les données, écrire des opérations sur les fichiers, etc. // Accord personnel, tous les noms de paramètres http sont en minuscules console.log(dataurl); //console.log(imagedata); monImage .png", imagedata: imagedata }; jQuery.ajax( { url : url, data : data, type : "POST", // Type de valeur de retour attendue dataType : "json", complete : function(xhr,result) { //console.log(xhr.responseText var $tip2 = $( "#tip2"); if(!xhr){ $tip2.text('La connexion réseau a échoué !'); return false } var text = xhr.responseText; ; if(!text){ $tip2.text('Erreur réseau !'); return false } var json = eval("("text ")" ); if(!json){ $tip2.text('Erreur d'analyse !'); return false } else { $tip2.text(json.message) ; } //console.dir(json); //console.log(xhr.responseText); } }; 🎜> OK, c'est fait ! Tout ce que vous avez à faire est de créer une interface utilisateur simple qui vous permet de contrôler la taille de l'image. Les données téléchargées sur le serveur n'ont pas besoin de gérer le type d'enc de multi-part/form-data. Un simple gestionnaire de formulaire POST suffit D'accord, voici un exemple de code complet :
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn