Compression et téléchargement d'images à l'aide de HTML5

Cette fois, je vais vous présenter l'utilisation du HTML5 pour compresser et télécharger des images. Quelles sont les précautions pour mettre en œuvre la compression et le téléchargement d'images en HTML5. Voici des cas pratiques, jetons un coup d'œil.

La compression Canvas

utilise une bibliothèque prête à l'emploi sur github : https://github.com/stomita/ios-imagefile-megapixel, je dois adorer stomita Ce grand dieu. L'idée générale est d'échantillonner l'image et de l'afficher sur le canevas, puis d'utiliser la méthode canvas.toDataURL pour obtenir la base64string afin d'obtenir la compression. Par exemple, une fois que l'élément d'entrée a déclenché l'événement de changement, lisez le fichier à l'intérieur et effectuez l'opération :

 fileInput = document.getElementById('fileInput'=  file = fileInput.files[0
     mpImg = 
     resImg = document.getElementById('resultImage'

Une fois la compression terminée, vous obtiendrez une image similaire à celle-ci :

Un format tel que data:image/jpeg a été beaucoup utilisé, et les images d'arrière-plan dans de nombreux styles sont exactement comme celui-ci.

Il y a deux points à noter. Le resImg ici est une image d'aperçu, qui existe déjà dans le document. Si vous n'avez pas besoin d'un aperçu, mais créez simplement une image pour la compression (document.createElement(" img")), qui aura un attribut tagName de moins. Vous pouvez modifier le code source ou ajouter cet attribut vous-même. Le code source jugera en fonction du tagName. S'il n'existe pas, une erreur sera signalée :

 MegaPixImage.prototype.render = function (target, options, callback) {
        //....
        target.tagName = target.tagName || "IMG"; //加上这一句        var tagName = target.tagName.toLowerCase();        if (tagName === 'img') {
            target.src = renderImageToDataURL(this.srcImage, opt, doSquash);
        } else if (tagName === 'canvas') {
            renderImageToCanvas(this.srcImage, target, opt, doSquash);
        }        if (typeof this.onrender === 'function') {            this.onrender(target);
        }        if (callback) {
            callback();
        }        if (this.blob) {            this.blob = null;
            URL.revokeObjectURL(this.srcImage.src);
        }
    };

De plus, c'est une opération qui prend du temps. Si plusieurs images sont compressées, cela ne peut pas l'être. appelé directement et doit être légèrement transformé. Sinon, l'image précédente entrera dans l'image ultérieure sans être compressée.

 fileSelected: function () {                    var files = $("#fileImage")[0].files;                    var count = files.length;
                    console.log("共有" + count + "个文件");                    for (var i = 0; i < count; i++) {var item = files[i];
                        console.log("原图片大小", item.size);                        if (item.size > 1024 * 1024 * 2) {
                            console.log("图片大于2M，开始进行压缩...");
                            (function(img) {                                var mpImg = new MegaPixImage(img);                                var resImg = document.createElement("img");
                                resImg.file = img;
                                mpImg.render(resImg, { maxWidth: 500, maxHeight: 500, quality: 1 }, function() {
                                  //do some thing
                                });
                            })(item);
                        } 
                        core.previewImage(item);
                    }
                },

Traitement du téléchargement

1. Publiez directement la chaîne base64

  uploadBase64str: function (base64Str) {
                    var formdata = new FormData();
                    formdata.append("base64str", base64Str);                    var xhr = new XMLHttpRequest();
                    xhr.upload.addEventListener("progress", function (e) {                        var percentComplete = Math.round(e.loaded * 100 / e.total);
                        para.onProgress(percentComplete.toString() + '%');
                    });
                    xhr.addEventListener("load", function (e) {
                        para.uploadComplete(xhr.responseText);
                    });
                    xhr.addEventListener("error", function (e) {
                        para.uploadError(e);
                    });
                    xhr.open("post", para.base64strUrl, true);                    xhr.send(formdata);
                },

Par exemple, ici base64strUrl est /home/MUploadImgBase64Str, MVCControllerLa méthode est la suivante :

 [HttpPost]        public ActionResult MUploadImgBase64Str(string base64str)
        {            try
            {                var imgData = base64str.Split(',')[1];                //过滤特殊字符即可   
                string dummyData = imgData.Trim().Replace("%", "").Replace(",", "").Replace(" ", "+");                if (dummyData.Length % 4 > 0)
                {
                    dummyData = dummyData.PadRight(dummyData.Length + 4 - dummyData.Length % 4, '=');
                }                byte[] byteArray = Convert.FromBase64String(dummyData);                using (System.IO.MemoryStream ms = new System.IO.MemoryStream(byteArray))
                {                    var img = System.Drawing.Image.FromStream(ms);                    var path = "~/Content/UploadFiles/mobile/";                    var uploadpath = Server.MapPath(path);                    if (!Directory.Exists(uploadpath))
                    {
                        Directory.CreateDirectory(uploadpath);
                    }                    var saveName = uploadpath + “stoneniqiu” + ".jpg";
                    img.Save(saveName);                    return Json(saveName);
                }
            }            catch (Exception e)
            {                return Json(e.Message);
            }
        }

Une image de plusieurs Mo peut être compressée à des dizaines ou des centaines de kilo-octets. Bien entendu, si la largeur, la hauteur et la qualité sont trop petites, l'image sera. très déformé. Comment obtenir cette chaîne ? Il existe deux méthodes, l'une consiste à lire directement src :

 var base641 = resImg.src;

et l'autre consiste à utiliser la conversion de toile :

 function getBase64Image(img) {                var canvas = document.createElement("canvas");
                canvas.width = img.width;
                canvas.height = img.height;                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0, img.width, img.height);                var dataURL = canvas.toDataURL("image/jpeg");                return dataURL;                // return dataURL.replace("data:image/png;base64,", "");            } var base64 = getBase64Image(resImg);

Pour la même image, les tailles de chaîne obtenues par le deux sont différents, mais je ne peux pas faire la différence dans la qualité de l'image.

Par exemple, pour une image de 2 Mo, la taille de la chaîne lue via la méthode getBase64Image n'est que de 64 Ko, mais la taille lue directement par src est de 270 Ko, et les images résultantes sont plus petit. Voici les images correspondantes de l'image originale (2,2 Mo), base64 (48 Ko) et src (202 Ko).

getBase64Image obtient une chaîne base64 plus petite via toDataURL du canevas.

2. Vous pouvez également convertir l'objet blob sur le front-end, puis le publier sur le backend

 
                 byteString = atob(dataUrl.split(',')[1
 ab =  ia =  ( i = 0; i < byteString.length; i++=  Blob([ab], { type: 'image/jpeg'

3. S'il n'est pas compressé, installez-le directement dans formdata et envoyez-le au backend.

   uploadFile: function (file) {
                    console.log("开始上传");                    var formdata = new FormData();
                    formdata.append(para.filebase, file);//这个名字要和mvc后台配合
                    var xhr = new XMLHttpRequest();
                    xhr.upload.addEventListener("progress", function (e) {                        var percentComplete = Math.round(e.loaded * 100 / e.total);
                        para.onProgress(percentComplete.toString() + '%');
                    });
                    xhr.addEventListener("load", function (e) {
                        para.uploadComplete(xhr.responseText);
                    });
                    xhr.addEventListener("error", function (e) {
                        para.uploadError(e);
                    });
                    xhr.open("post", para.url, true);                        xhr.send(formdata);
                },

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment empêcher le bouillonnement JS et le comportement par défaut du navigateur

Les images composites JS et Canvas Rendre WeChat public fonction d'affichage de compte

Utilisation de la case à cocher dans jQuery

Le plug-in DataTable peut-il réaliser un chargement asynchrone ?

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!