Il y a deux jours, j'ai créé une fonction pour convertir les images en base64 pour le téléchargement. J'ai découvert que si la base64 de l'image est trop grande, la requête deviendra très lente et expirera sérieusement, j'ai donc pensé à compresser l'image. avant de le télécharger, puis de le télécharger en arrière-plan, ce qui peut grandement améliorer l'efficacité. Voici quelques pièges rencontrés lors de l'utilisation de Canvas pour compresser des images. Le code complet sera donné à la fin de l’article.
Le premier écueil est que lors de la compression de l'image, la largeur et la hauteur de l'image elle-même ne sont pas obtenues, et une largeur et une hauteur fixes de 600*480 sont données. Car c'est sur le téléphone mobile, lors du téléchargement de l'image, que l'image est affichée. a une taille de plusieurs mégaoctets, donc ce n'est pas un problème. Le problème est survenu lors de la modification de l'avatar. Les images téléchargées lors du test étaient toutes de petites images, puis les images compressées ne s'affichaient pas complètement et la plupart d'entre elles étaient vides. C'est parce qu'elles n'ont pas été prises en compte lors de la compression. et la hauteur de l'image.
Le deuxième piège. La façon de résoudre le premier piège est d'obtenir la largeur et la hauteur de l'image elle-même après le chargement de l'image, puis de l'attribuer au canevas. Le piège est que le chargement de l'image est asynchrone, lorsque vous revenez, ce qui est renvoyé peut être indéfini au lieu du base64 compressé dont vous avez besoin. La solution ici est de créer une nouvelle promesse, puis de renvoyer le résultat solve() et d'obtenir le résultat lors de l'appel de .then().
Points de connaissances :miniImage.js
exporter la fonction asynchrone par défaut miniSize(imgData, maxSize = 200*1024){ // const maxSize = 200 * 1024; if(imgData && imgData.files && imgData.files.size < maxSize) { return imgData.url }else{ console; .log('----------------Image compressée------------------'); const canvas = document.createElement('canvas'); let img = new Image(); img.src = imgData.url; let ctx = canvas.getContext('2d'); return new Promise((resolve =>{ img.addEventListener( 'load', function(){ //Taille originale de l'image let originWidth = this.width; let originHeight = this.height; // Limite de taille maximale let maxWidth = 400, maxHeight = 400 ; // Taille cible let targetWidth = originWidth, targetHeight = originHeight ; // La taille de l'image dépasse la limite de 400x400 if (originWidth > maxWidth || originHeight > maxHeight) { if (originWidth / originHeight > maxWidth / maxHeight) { // Plus large, limite la taille en fonction de la largeur targetWidth = maxWidth ; = Math.round(maxWidth * (originHeight / originWidth)); } else { targetHeight = maxHeight; targetWidth = Math.round(maxHeight * (originWidth / originHeight)); ctx.drawImage(img, 0, 0, targetWidth, targetHeight); soit base64 = canvas.toDataURL('image/png', 0.9); solve(base64 }, false })) }} ;Appel:
test.js
onChangeImg = async (fichiers, type, index) => { let previous = this.props.imagePicker.files; if(type === add) { let result = miniSize(files[files.length-1]); Utilisez .then() pour appeler wait result.then(res => { previous.push({url: res}); }); else if(type === remove) { précédent.splice(index,1); } wait this.props.dispatch({ type : 'imagePicker/saveImage', charge utile : { fichiers : précédent } }) }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.