So komprimieren Sie Bilder mit Canvas

Dieses Mal zeige ich Ihnen, wie Sie Canvas zum Komprimieren von Bildern verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von Canvas zum Komprimieren von Bildern? Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

1. Lokale Bildeingabe

1. Das Abrufen lokaler Dateien

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

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

ist sehr einfach, verwenden Sie einfach den Typ Typ Klicken Sie auf die Schaltfläche „Datei“, um die lokale Datei abzurufen.

2. Bestimmen Sie den Typ der erhaltenen lokalen Datei

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

// 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. Bilder in Leinwand zeichnen

1. Leinwand erstellen

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

Hinweis: Die Größe der Leinwand entspricht der Breite und Höhe des eingegebenen Bildes.

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 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(&#39;canvas&#39;);
                canvas.width = img.clientWidth;
                canvas.height = img.clientHeight;
                var context = canvas.getContext(&#39;2d&#39;);
                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 dem Testen wurde festgestellt, dass das Komprimieren von Bildern im JPEG-Format über Canvas am besten ist Effekt, während PNG-Komprimierung Der Effekt ist nicht offensichtlich, manchmal wird er größer.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Zusammenfassung der Block-Level-Tags von H5

Erweiterte Inline-Tags von H5

So rufen Sie die Kamera mit H5 auf

Das obige ist der detaillierte Inhalt vonSo komprimieren Sie Bilder mit Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!