Comment compresser des images avec Canvas

Cette fois, je vais vous montrer comment utiliser Canvas pour compresser des images ? Quelles sont les précautions pour utiliser Canvas pour compresser des images Voici un cas pratique, jetons un oeil.

1. Saisie d'image locale

1. L'obtention de fichiers locaux

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

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

est très simple, utilisez simplement le type. tapez le bouton du fichier pour obtenir les fichiers locaux.

2. Déterminer le type de fichier local obtenu

<!--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. Sortir l'image locale obtenue au format base64

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. Dessinez des images dans Canvas

1. Créer une toile

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

Remarque : la taille de la toile est la même que la largeur et la hauteur de l'image saisie.

2. Dessiner des images

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

3. Compresser les images et les sortir

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

Après des tests, il a été constaté que la compression des images au format JPEG via Canvas est la meilleure. effet, tandis que la compression PNG L'effet n'est pas évident, parfois il devient plus important.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Résumé des balises au niveau du bloc de H5

Balises en ligne avancées de H5

Comment utiliser H5 pour appeler la caméra

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!