Explication détaillée du code du téléchargement, de la compression, de l'épissage et de la rotation d'images en fonction de l'entrée sous vue

Cet article vous présente le code d'implémentation de la file d'attente PHP. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

En tant qu'équipe front-end, je pense que lors du développement de systèmes, vous rencontrez souvent le besoin de sauvegarder les images téléchargées pour les utilisateurs. Lorsque de nombreux novices rencontrent ce problème, tout le monde sera choqué, pensant que ce sera difficile. problème. Lorsque vous aurez fini de lire cet article, vous constaterez que vous le faites aveuglément. La vérité est aussi simple que cela :

Téléchargement de fichiers image

<.>De nombreux projets enregistrent désormais les images dans le système. La plupart d'entre eux enregistrent simplement l'URL de l'image correspondante dans la base de données du système, tandis que les ressources d'images réelles seront placées sur des serveurs d'images tels qu'Alibaba, bien sûr, il y en a aussi. les projets qui choisissent de sauvegarder les chaînes d'image au format base64 dans leurs propres bases de données. Voici quelques implémentations spécifiques de ces deux méthodes. L'implémentation est illustrée avec une instance de vue :

Tout d'abord, nous devons obtenir les ressources d'image de l'utilisateur. À ce stade, nous devons utiliser la balise <input>, la valeur de type est file et la balise d'entrée est spécifiée comme type de fichier. Formulaire de saisie et définissez son attribut d'acceptation sur "image/*", en spécifiant que seuls les fichiers de ressources image seront acceptés.

Ensuite, nous obtiendrons le fichier sélectionné par l'utilisateur lorsque l'utilisateur sélectionnera. le fichier , l'événement de changement de la balise d'entrée sera déclenché. On peut obtenir le fichier image en écoutant l'événement et en obtenant l'événement objet événement :

<input>

Après avoir cliqué pour obtenir le fichier, on peut obtenez le fichier image via $event Object, obtenez $event.target.files[0] pour obtenir l'objet fichier de ressources image. Quant à la raison pour laquelle nous devons ajouter la valeur d'index, c'est parce que le formulaire de saisie de téléchargement de fichier prend en charge plusieurs téléchargements de fichiers. . Il suffit d'ajouter l'attribut multiple à la balise d'entrée ; vous pouvez jeter un œil à certains attributs de l'objet fichier dans l'image ci-dessous :

 <input>

Après observation, nous avons constaté qu'il existe un attribut de taille dans l'objet fichier, indiquant la taille de l'image. Nous pouvons vérifier si le fichier a été obtenu par nous et obtenir l'opération spécifiée en vérifiant si la valeur de celui-ci. l'attribut est vide ;

À ce stade, nous avons obtenu l'objet fichier que nous voulons. Ensuite, pour implémenter la fonction de compression d'image, nommons-la la fonction de compression :

fileChange(el, index) {
    if (!el.target.files[0].size) return;
}

Compression d'image.

Tout d'abord, nous devons compresser nos ressources d'image. La première étape consiste à obtenir les ressources d'image, puis à les compresser. Vérification simple

Certaines personnes ici peuvent ne pas comprendre. l'objet FileReader. L'objet FileReader permet à une application 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. Utilisez ici l'objet File ou Blob pour spécifier le fichier ou les données à lire. utilisez-le pour surveiller le chargement afin de déterminer si la lecture est terminée. Une fois la lecture terminée, nous attribuons le résultat de la lecture à notre objet Image nouvellement créé, comme L'objet compressé plus tard, nous constaterons que le résultat que nous lisons est ; en fait une chaîne au format base64

 compress(event) {
        var file = event.target.files;
        var reader = new FileReader(), imgFile = file[0];
        if (imgFile.type.indexOf('image') == 0) {
          reader.readAsDataURL(imgFile);
        } else {
          this.$Message.infor('文件类型仅为图片')
        }
 }

(très longue..., je le pense juste)

À ce stade, nous trouverons que la chaîne base64 apparaît ici. Elle peut être copiée en tant que valeur dans l'attribut src de la balise , et l'image peut également être rendue. Par conséquent, certaines personnes choisissent d'enregistrer les images dans ce format, mais ce n'est pas le cas. une méthode courante, et cela rendra également notre base de données trop redondante ;

Pour la compression d'image, nous utilisons principalement canevas. Pour implémenter cette fonction, redessinez l'image via canvas.getContext('2d. ').drawImage() et utilisez la méthode canvas.toDataURL(type, encoderOptions) pour renvoyer un dataURI contenant l'affichage de l'image, le type est le format de l'image et encoderOptions est l'image, par incréments de 0 à 1. Ceci. Le processus de compression n'est pas difficile à comprendre. L'idée est d'obtenir la hauteur et la largeur de l'image, de calculer sa taille en pixels et de la comparer avec une valeur limite définie par vous-même pour voir si notre taille doit être compressée, par exemple. le rapport dans l'exemple représente le taux de compression de la largeur et de la hauteur de l'image. Nous pouvons modifier la taille du fichier de l'image sans changer la largeur et la hauteur, via drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth. , dHauteur) Pour redessiner l'image, il peut passer neuf paramètres, qui représentent respectivement les éléments dessinés dans le contexte, la coordonnée X du coin supérieur gauche de la boîte de sélection rectangulaire de l'image source, la coordonnée Y du coin supérieur gauche coin de la zone de sélection rectangulaire de l'image source et la sélection rectangulaire de l'image source. La largeur de la zone, la hauteur de la zone de sélection rectangulaire de l'image source, la position du coin supérieur gauche du canevas cible sur. l'axe X sur le canevas cible, la position du coin supérieur gauche du canevas cible sur l'axe Y sur le canevas cible, la largeur de l'image dessinée sur le canevas cible, Dessinez la hauteur de l'image sur le canevas cible ;

 compress(event) {
        var file = event.target.files;
        var reader = new FileReader(), imgFile = file[0];
        if (imgFile.type.indexOf('image') == 0) {
          reader.readAsDataURL(imgFile);
        } else {
          this.$Message.infor('文件类型仅为图片')
        }
        let img = new Image();
        reader.onload = function (e) {
          img.src = e.target.result;
        };
 }

整个函数实现如下：

compress(event) {
        var file = event.target.files;
        var reader = new FileReader(), imgFile = file[0];
        if (imgFile.type.indexOf('image') == 0) {
          reader.readAsDataURL(imgFile);
        } else {
          this.$Message.infor('文件类型仅为图片')
        }
        let img = new Image();
        reader.onload = function (e) {
          img.src = e.target.result;
        };
        var imgP = new Promise((resolve, reject) => {
          img.onload = () => {
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext('2d');
            //    瓦片canvas
            var tCanvas = document.createElement("canvas");
            var tctx = tCanvas.getContext("2d");
            var initSize = img.src.length;
            var width = img.width;
            var height = img.height;
            //图片像素大于400万像素，计算压缩到400万以下
            var ratio;
            if ((ratio = width * height / 4000000) > 1) {
              ratio = Math.sqrt(ratio);
              width /= ratio;
              height /= ratio;
            } else {
              ratio = 1;
            }
            canvas.width = width;
            canvas.height = height;
            ctx.fillStyle = "#fff";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            //如果图片太大则使用瓦片绘制
            var count;
            if ((count = width * height / 1000000 > 1)) {
              count = ~~(Math.sqrt(count) + 1);//计算分成的瓦片数
              var nw = ~~(width / count);
              var nh = ~~(height / count);
              tCanvas.width = nw;
              tCanvas.height = nh;
              for (var i = 0; i <h2>图片拼接</h2><p>需要注意的一点了，上面压缩的过程使用了瓦片绘制，可能会导致拼接过程中不紧凑而产生一条间隙，这个只需要调整一下绘制瓦片的坐标位置即可，该思想同样可以用于处理图片拼接的问题，可按照上面思路进行拼接，这里就不再举例子说明了，瓦片绘制就是图片拼接的过程；</p><h2>图片旋转</h2><p>压缩和拼接都讲完啦，在对图片进行处理，大家都有自己的见解了，或许你们还会这么说，那如果我上传图片的时候，像把那些横着排的照片，也放成竖起来，要怎么处理，竟调整图片放置的方向，该怎么处理，这就需要用到canvas的rotate方法去实现了，老方法，我们先获取图片对象，因为之前的压缩是放回一个promise对象，data参数为img的base64格式，所以我们把旋转函数的参数定义为图片来源；</p><pre class="brush:php;toolbar:false">rotate(imgData) {
        var img = new Image();
        img.src = imgData;
        var imgR = new Promise((resolve, reject) => {
         img.onload = ()=>{
            console.log(img.width)
             console.log(img.naturalWidth)
          }
        })
      },

这里需要注意的是，每次我们新建一个image对象，想要获取其一些响应的属性值，一定要在onload方法中，确保图片已经加载完毕，上面的console中输出了两个值，width和naturalWidth，在某中条件下，他们会是相等的，比如我们上面，也会存在不一致的时候，因为naturalWidth返回的依然是图片的真实尺寸，而width返回的是给img标签规定的尺寸，所以我们需要获取的是naturalWidth；

rotate(imgData) {
        var img = new Image();
        img.src = imgData;
        var imgR = new Promise((resolve, reject) => {
          img.onload = () => {
            let degree = 0, drawHeight, drawWidth;
            drawHeight = img.naturalHeight;
            drawWidth = img.naturalWidth;
            let maxSide = Math.max(drawWidth, drawHeight);
            if (maxSide === drawWidth) {//判断需要旋转的角度
              degree = 90;
            } else {
              degree = 360;
            }
            var canvas = document.createElement('canvas');
            canvas.width = drawWidth;
            canvas.height = drawHeight;
            var context = canvas.getContext('2d');
            context.translate(drawWidth/2,drawHeight/2)//这一行和下下一行的作用是修改选择中心
            context.rotate(degree*Math.PI/180);//旋转图片
            context.translate(-drawWidth/2,-drawHeight/2)//这一行和上上一行的作用是修改选择中心
            context.drawImage(img, 0, 0, drawWidth, drawHeight);
            var ndata = canvas.toDataURL('image/jpeg', 1);
            context.width = context.height = 0;
            resolve(ndata)

          }
        })

        return Promise.all([imgR])
      }

旋转效果如下，宽大于高的，即是横排的图片，就会发生旋转；

总结

在vue下利用canvas实现上述功能后，发现了canvas在图片处理这块的强大功能，对于前端上传图片性能的优化会有很大的帮助；经过上述的时间，发现要实现用户的上传图片前的裁剪功能，以及可以利用canvas来实现，主要是利用drawImage控制裁剪的长度，起点坐标就可以实现，着实好用！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!