H5 realisiert die Bildkomprimierung und das Hochladen

In diesem Artikel werden hauptsächlich H5-Bildkomprimierungs- und Hochladebeispiele im Detail vorgestellt, die einen gewissen Referenzwert haben.

Nachdem Sie eine Anfrage erhalten haben, fragen Sie, ob das Frontend Bilder komprimieren kann. Da einige Bilder zu groß sind, ist es zu langsam, sie auf den Server zu übertragen und dann zu komprimieren. Ich habe in meinem Bewusstsein noch nie so gespielt. Am Morgen schickte mir mein Chef einen Zhihu-Link. Als ich ihn sah, stellte sich heraus, dass die Senioren ihn bereits 3 Sekunden lang für mein Wissen umgesetzt hatten. und dann sofort mit der Arbeit begonnen)! .

Canvas-Komprimierung

Mit einer vorgefertigten Bibliothek auf Github: https://github.com/stomita/ios-imagefile-megapixel muss ich Stomita anbeten Dieser große Gott. Die allgemeine Idee besteht darin, das Bild abzutasten und auf der Leinwand anzuzeigen und dann die Methode „canvas.toDataURL“ zu verwenden, um die Base64-Zeichenfolge abzurufen und eine Komprimierung zu erreichen. Nachdem das Eingabeelement beispielsweise das Änderungsereignis ausgelöst hat, lesen Sie die darin enthaltene Datei und führen Sie den Vorgang aus:

var fileInput = document.getElementById('fileInput');
 fileInput.onchange = function() {
 var file = fileInput.files[0];
 // 创建一个压缩对象，该构造函数接收file或者blob。
 var mpImg = new MegaPixImage(file);

 // render方法的maxWith，maxHeight,以及quality都决定了压缩图片的质量
 var resImg = document.getElementById('resultImage');
 mpImg.render(resImg, { maxWidth: 300, maxHeight: 300, quality: 0.5 }); 
 };
压缩完成会得到

Ein Bild ähnlich diesem:

Daten:image/jpeg Dieses Format wird häufig verwendet und die Hintergrundbilder in vielen Stilen sind genau so.

Es sind zwei Punkte zu beachten. Das resImg ist hier ein Vorschaubild, das bereits im Dokument vorhanden ist. Wenn Sie keine Vorschau benötigen, erstellen Sie einfach ein Bild zur Komprimierung (document.createElement(). img")), das ein tagName-Attribut weniger haben wird. Sie können den Quellcode ändern oder dieses Attribut selbst hinzufügen. Der Quellcode wird anhand des Tag-Namens beurteilt. Wenn er nicht vorhanden ist, wird ein Fehler gemeldet:

 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);
  }
 };

Darüber hinaus ist dies ein Zeit- Aufwändiger Vorgang. Wenn mehrere Bilder komprimiert werden, kann es nicht direkt aufgerufen werden und muss leicht transformiert werden, da sonst das vorherige Bild in das spätere Bild eingefügt wird, bevor die Komprimierung abgeschlossen ist.

 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);
     }
    },

Upload-Verarbeitung

1. Base64-String direkt posten

 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);
    },

Zum Beispiel lautet hier base64strUrl /home/MUploadImgBase64Str. Die MVC-Controller-Methode lautet wie folgt:

 [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);

   }
  }

Wie viele M von Können Bilder komprimiert werden? Wenn Breite, Höhe und Qualität zu klein eingestellt sind, wird das Bild natürlich stark verzerrt. Wie bekomme ich diese Zeichenfolge? Es gibt zwei Methoden: Eine besteht darin, src direkt zu lesen:

var base641 = resImg.src;

Die andere besteht darin, die Canvas-Konvertierung zu verwenden:

 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);

Für dasselbe Bild sind die von den beiden erhaltenen Zeichenfolgengrößen unterschiedlich, aber ich kann den Unterschied in der Bildqualität nicht erkennen.

Für ein 2M-Bild beträgt beispielsweise die über die getBase64Image-Methode gelesene Zeichenfolgengröße nur 64 KB, aber die direkt von src gelesene Größe beträgt 270 KB, und die resultierenden Bilder sind es kleiner. Im Folgenden sind die entsprechenden Bilder des Originalbilds (2,2 MB), von base64 (48 KB) und von src (202 KB) aufgeführt.

getBase64Image erhält einen kleineren Base64-String über die toDataURL der Leinwand.

2. Sie können das Blob-Objekt auch im Frontend konvertieren und es dann im Backend posten

 function dataURItoBlob(dataUrl) {
    
    var byteString = atob(dataUrl.split(',')[1]);

    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
     ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], { type: &#39;image/jpeg&#39; });
   }

3 nicht komprimiert ist, installieren Sie es direkt in formdata und senden Sie es in den Hintergrund.

rrree

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Bitte achten Sie auf PHP Chinesische Website!

Verwandte Empfehlungen:

Erzielung der Funktion der Bildkomprimierung und des Hochladens durch HTML5-Mobilentwicklung

Das obige ist der detaillierte Inhalt vonH5 realisiert die Bildkomprimierung und das Hochladen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!