js und Canvas implementieren das Hochladen der Bildvorschau-Komprimierung

In diesem Artikel wird hauptsächlich die Methode zum Komprimieren und Hochladen von Bildvorschauen mit js und Canvas beschrieben, kombiniert mit Beispielcode und Erklärungen, in der Hoffnung, allen zu helfen.

Schritt 1: Der Benutzer wählt das hochzuladende Bild aus

<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 Bildressource abrufen. Komprimieren Sie es und zeichnen Sie es mit Canvas. Wenn Sie es auf den Server hochladen müssen, können Sie es auch mit Ajax oder anderen Methoden hochladen.

Schritt 2: Erhalten Sie 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:
Komprimierungsverhältnis ist auf 0,92 eingestellt:
Komprimierungsverhältnis ist auf 0,52 eingestellt

Auf den ersten Blick finden Sie es seltsam, warum das Skalierungsverhältnis so ist auf 0,92 eingestellt, Bild Ist es tatsächlich größer als das Originalbild? 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.

Verwandte Empfehlungen:

php lädt Dateien auf den Server hoch und implementiert die Bildvorschau

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