Exemples d'images de compression de toile et de méthodes de production de cartes

Lors de la création de certaines pages d'activités, il est souvent nécessaire de télécharger des images, et les images, le texte généré et les autocollants doivent également être générés sur une carte que les utilisateurs peuvent appuyer longuement pour enregistrer. Cette exigence a déjà été remplie une fois et a été à nouveau satisfaite récemment. Tout a été implémenté à l'aide de Canvas. Créez simplement un blog. S'il existe une meilleure méthode de mise en œuvre, vous êtes invités à en discuter ensemble.

Lorsque vous utilisez la balise d'entrée d'écriture en HTML et que le type est fichier, vous pouvez appeler l'album photo de votre téléphone pour sélectionner des photos, et vous pouvez également prendre en charge l'appareil photo pour prendre des photos. Dans ce scénario, la taille de l'image peut être plus grande et dépasser la plage maximale prise en charge par le backend, entraînant l'échec du téléchargement.

 <ID d'entrée=type de fichier=fichier>

1. Obtenez d’abord le fichier image

 var eleFile = document.querySelector('#file'); var reader = new FileReader() eleFile.addEventListener('change', function (event) { file = event.target.files[0]; console.log(file) // Le fichier sélectionné est une image if (file.type.indexOf(image) == 0) { reader.readAsDataURL(file } });

2. Maintenant que vous avez obtenu le fichier image, vous devez comprendre l'utilisation de l'objet FileReader dans js.

Les objets FileReader permettent aux applications Web de lire de manière asynchrone le contenu d'un fichier (ou d'un tampon de données brutes) stocké sur l'ordinateur de l'utilisateur.

méthode:

• readAsText : Cette méthode a deux paramètres, le deuxième paramètre est la méthode d'encodage du texte et la valeur par défaut est UTF-8. Cette méthode est très simple à comprendre. Le fichier est lu en mode texte, et le résultat de la lecture est le contenu du fichier texte.
• readAsBinaryString : Cette méthode lit le fichier sous forme de chaîne binaire. Habituellement, nous le transférons vers le backend, et le backend peut stocker le fichier via cette chaîne.
• readAsDataURL : Il s'agit de la méthode utilisée dans l'exemple de programme. Cette méthode lit le fichier sous la forme d'une chaîne commençant par data :. L'essence de cette chaîne est l'URL des données. L'URL des données est un moyen d'intégrer de petits fichiers directement dans le document. plan. Les petits fichiers font généralement référence ici à des fichiers dans des formats tels que des images et du HTML. (La méthode base64 en est obtenue.)

Continuez l'opération ci-dessus. Après avoir obtenu l'image, vous devez traiter et convertir le fichier à ce stade.

 var reader = new FileReader(); //Lire le fichier dans la page sous la forme d'URL de données reader.readAsDataURL(file); reader.onload=function(e) { console.log(reader) }

Maintenant que l'image a été récupérée et convertie, elle peut maintenant être compressée.

 var eleFile = document.querySelector('#file'); var reader = new FileReader() eleFile.addEventListener('change', function (event) { file = event.target.files[0]; // console.log( file) // Le fichier sélectionné est une image if (file.type.indexOf(image) == 0) { var reader = new FileReader(); // Convertit le fichier en données Lire la page sous forme d'URL reader.readAsDataURL(file); reader.onload=function(e) { // console.log(this.result) var pre=document.getElementById(pre); this.result ) canvasDataURL(this.result, 100, 0.5) } } }) /* [canvasDataURL compressé par canvas] * @params path Le format base64 de l'image* @params targetWidth La largeur de l'image compressée* @params quality Plus la valeur de qualité de l'image est petite, plus l'image dessinée est floue*/ function canvasDataURL(path, targetWidth, quality) { var img = new Image(); img.src = chemin img.onload = function () { // var that = this // console.log(that) // Compression proportionnelle par défaut var w = this.width var h = this.height scale = w / h; w = targetWidth h = targetWidth / scale var quality = quality; // La qualité de l'image par défaut est 0,7 // Générer un canevas var canvas = document.createElement('canvas'); ctx = canvas.getContext('2d'); // Créer un nœud d'attribut var anw = document.createAttribute(width); document.createAttribute(height); anh.nodeValue = h; canvas.setAttributeNode(anw); canvas.setAttributeNode(anh); ctx.drawImage(this, 0, 0, w, h); mieux c'est Plus l'image dessinée est floue var base64 = canvas.toDataURL('image/jpeg', var); result=document.getElementById(result); result.setAttribute(src, base64) } }

C'est très simple, vous pouvez donc obtenir l'image compressée. À partir du code ci-dessus, nous pouvons savoir que le principe est que la méthode toDataURL dans Canvas peut spécifier le format et la qualité de compression de l'image compressée, compresser les informations du canevas et les convertir. à l'encodage base64.

Scène : combinez l'image que vous venez de compresser avec une autre image, appuyez longuement pour enregistrer.

 function drawCanvas (target) { var canvas = document.querySelector('#myCanvas') var ctx = canvas.getContext('2d') // Ce sont les pixels physiques sur l'appareil et les pixels indépendants de l'appareil (dips) Ratio var dp = window.devicePixelRatio || 1 variable backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1 var ratio = this.dp / this.backingStoreRatio var oldWidth = toile.largeur var ancienneHauteur = toile.hauteur toile.largeur = oldWidth * ratio canvas.height = oldHeight * ratio canvas.style.width = oldWidth + 'px' canvas.style.height = oldHeight + 'px' ctx.scale(ratio, ratio) var headerImg = new Image() var bgImg = new Image() headerImg.src = cible bgImg.src = '../bg.png' headerImg.onload = (e) => { // Format de l'image var rate = headerImg.width / headerImg.height console.log(rate) bgImg.onload = (e) => { ctx.drawImage(headerImg, 10, 30, 50, (50 / rate )) // Image d'arrière-plan ctx.drawImage(bgImg, 0, 0, 150, 150) ctx.fillText('Awesome', 80, 70) var resultImg = new Image() resultImg.src = canvas.toDataURL('image/png', 1) resultImg.style.width = '100%' var cardImg=document . getElementById(cardImg); cardImg.setAttribute(src, resultImg.src) } }

Obtenez l'image que vous venez d'obtenir et, une fois l'image chargée, dessinez-la sur le canevas. Vous pouvez également ajouter du texte, etc. Enfin, les informations du canevas sont converties en codage base64 pour l'implémentation. Des exemples peuvent être mis en pratique via le code

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.