JS+Canvas implementiert die Komprimierung und das Hochladen der Bildvorschau

Dieses Mal bringe ich Ihnen JS+Canvas zum Implementieren der BildvorschauVorschau-Komprimierung und des Hochladens. JS+Canvas implementiert Notizenum die Bildvorschau-Komprimierung und das Hochladen zu realisieren. Welche, die folgenden sind praktische Fälle, werfen wir einen Blick darauf.

Werfen wir zunächst einen Blick auf die Renderings, um die Überraschung zu beruhigen

Der erste Schritt: Der Benutzer wählt das Bild aus, das hochgeladen werden soll

<input type="file" accept="image/*" type="file"" name="imageFile" onchange="upload()">

Nachdem das Bild ausgewählt wurde, wird die Upload-Funktion ausgelöst. In dieser Funktion müssen wir die Ressource des Bildes abrufen, es komprimieren und es mithilfe der Leinwand zeichnen. Wir können es auch mit Ajax oder anderen Methoden hochladen.

Schritt 2: Holen Sie sich die komprimierte Vorschau der Bildressource und laden Sie sie hoch

function upload() { 
  let file = document.querySelector('input[type=file]').files[0] // 获取选择的文件，这里是图片类型 
  let reader = new FileReader() 
    reader.readAsDataURL(file) //读取文件并将文件以URL的形式保存在resulr属性中 base64格式 
    reader.onload = function(e) { // 文件读取完成时触发  
      let result = e.target.result // base64格式图片地址  
      var image = new Image() image.src = result // 设置image的地址为base64的地址  
      image.onload = function(){  
        var canvas = document.querySelector("#canvas");  
        var context = canvas.getContext("2d");  
        canvas.width = image.width; // 设置canvas的画布宽度为图片宽度  
        canvas.height = image.height;  
        context.drawImage(image, 0, 0, image.width, image.height) // 在canvas上绘制图片  
        let dataUrl = canvas.toDataURL('image/jpeg', 0.92) // 0.92为压缩比，可根据需要设置，设置过小会影响图片质量  
                                  // dataUrl 为压缩后的图片资源，可将其上传到服务器  
      }  
    } 
 }

Jetzt vergleichen wir, ob das Bild erfolgreich komprimiert wurde:

Originalbildgröße:

Das Komprimierungsverhältnis ist auf 0,92 eingestellt:

Das Komprimierungsverhältnis ist auf 0,52 eingestellt

Finden Sie es auf den ersten Blick seltsam, warum das Bild größer als das Originalbild ist, wenn das Zoomverhältnis auf 0,92 eingestellt ist? Tatsächlich wird das Bild nach der Codierung durch Base64 größer als das Originalbild. Aus bestimmten Gründen können Sie das Codierungsprinzip von Base64 überprüfen. Es scheint, dass wir das Bild erfolgreich komprimiert haben!

Hinweis: Canvas wird unter IE9 nicht unterstützt; versuchen Sie, Base64 nicht für große Bilder zu verwenden, da dies die Reaktionsgeschwindigkeit beeinträchtigt.

Zusammenfassung

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, achten Sie bitte auf andere Verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie Postman+Json und SpringMVC die Batch-Addition implementieren

Wie Postman Token-Parameter überträgt

Detaillierte Erläuterung der Verwendung des jQuery-Sichtbarkeitsfilters

Das obige ist der detaillierte Inhalt vonJS+Canvas implementiert die Komprimierung und das Hochladen der Bildvorschau. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!