Beispielcode für Canvas und Bildkomprimierung

Das

canvas-Element wird zum Zeichnen von Grafiken auf Webseiten verwendet. Das Canvas-Element von HTML5 verwendet JavaScript, um 2D-Bilder auf Webseiten zu zeichnen. Auf der Leinwand des rechteckigen Bereichs zeichnet JavaScript 2D-Grafiken und rendert sie Pixel für Pixel. Das Canvas-Element kann auf verschiedene Arten zum Zeichnen von Pfaden, Rechtecken, Kreisen und Zeichen sowie zum Hinzufügen von Bildern verwendet werden. In diesem Artikel teilen wir Ihnen den Beispielcode für Canvas und Bildkomprimierung mit.

Canvas-Bildkomprimierungsprozess

Als nächstes werde ich den spezifischen Prozess der Canvas-Bildkomprimierung anhand konkreter Beispiele erläutern.

1. Lokale Bildeingabe

1. Lokale Dateien abrufen

<!--HTML-->
<input type="file" id="choose-img" />

// JS
var chooseImg = document.getElementById("choose-img");
chooseImg.onchange = function(e){
    var file = this.files[0];
    // ……  （省略部分代码后续依次展示，下同）
};

Es ist ganz einfach: Rufen Sie einfach die lokale Datei über die Schaltfläche mit dem Typ „Datei“ ab.

2. Bestimmen Sie den Typ der erhaltenen lokalen Datei

<!--HTML-->
<p id="result"></p>

// JS
var result = document.getElementById("result");    // 用于显示图片输出结果，或者错误提示
if(/image/.test(file.type)){     // 判断文件类型是否为图片
    // ……
}
else{
    result.innerHTML = &#39;<span style="color: red;">文件类型有误！</span>&#39;;
}

3. Geben Sie das erhaltene lokale Bild im Base64-Format aus

var img = new Image(),      // 创建图片对象，用于放置原始图片
    reader = new FileReader();
reader.readAsDataURL(file);    // 以base64格式读取并存入FileReader对象的result属性中
reader.onload = function(){
    img.src = this.result;   // 将图片base64字符串直接赋予Image对象的src中
    document.body.insertBefore(img,chooseImg);   // 将输出的图片插入到文件按钮之前
    img.onload = function(){
        // ……
    };
};

2 , Zeichnen Bilder in Leinwand Leinwand

1. Leinwand erstellen

var canvas = document.createElement('canvas');
canvas.width = img.clientWidth;
canvas.height = img.clientHeight;
var context = canvas.getContext('2d');

Hinweis: Leinwand Die Größe beträgt entspricht der Breite und Höhe des Eingabebildes.

2. Bilder zeichnen

context.drawImage(img,0,0,canvas.width,canvas.height);

3. Bilder komprimieren und ausgeben

<!--HTML-->
图片压缩比率 : <input id="rate" type="number" min="0" max="100" /> %

// JS
var rate = document.getElementById("rate").value || 100;   // 输入图片压缩比率，默认为100%
var imgUrl = canvas.toDataURL(file.type,rate/100);   // 第一个参数为输出图片类型，第二个为压缩比
result.innerHTML = &#39;压缩后：<img src="&#39;+ imgUrl +&#39;" />&#39;;     // 将压缩后的图片置于result中显示
img.style.display = &#39;none&#39;;   // 将原始图片隐藏

Geben Sie das in der Canvas-Leinwand gezeichnete Bild erneut im Base64-Format aus.

4. Vollständige Codeanzeige

<!--HTML-->
图片压缩比率 : <input id="rate" type="number" min="0" max="100" /> %

// JS
var chooseImg = document.getElementById("choose-img"),
    result = document.getElementById("result");
chooseImg.onchange = function(e){
    var file = this.files[0];
    if(/image/.test(file.type)){
        var img = new Image(),
            reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(){
            img.src = this.result;
            document.body.insertBefore(img,chooseImg);
            img.onload = function(){
                var canvas = document.createElement('canvas');
                canvas.width = img.clientWidth;
                canvas.height = img.clientHeight;
                var context = canvas.getContext('2d');
                context.drawImage(img,0,0,canvas.width,canvas.height);
                var rate = document.getElementById("rate").value || 100;
                var imgUrl = canvas.toDataURL(file.type,rate/100);
                result.innerHTML = &#39;压缩后：<img src="&#39;+ imgUrl +&#39;" />&#39;;
                result.style.display = &#39;block&#39;;
                img.style.display = &#39;none&#39;;
            };
        };
    }
    else{
        result.innerHTML = &#39;<span style="color: red;">文件类型有误！</span>&#39;;
    }
};

Nach Tests wurde festgestellt, dass die Komprimierung von Bildern im JPEG-Format über Canvas den besten Effekt hat, während der PNG-Komprimierungseffekt nicht offensichtlich ist und manchmal größer wird.

Der obige Inhalt ist der Beispielcode für Canvas und Bildkomprimierung. Ich hoffe, er kann allen helfen.

Verwandte Empfehlungen:

Wie man Leinwand verwendet, um die Interaktion zwischen dem Ball und der Maus zu realisieren

Wie man Leinwand zum Erstellen verwendet die Wirkung der Partikelbrunnen-Animation

Gemeinsame Zeichentechniken in Canvas in HTML5

Canvas-Erstellung und Ziehen mit der Maus zum Zeichnen von Grafiken

Detailliertes Beispiel für HTML5 mit Canvas zur Implementierung der Bild-Download-Funktion

Das obige ist der detaillierte Inhalt vonBeispielcode für Canvas und Bildkomprimierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!