Comment compresser des images avec Canvas-Tutoriel H5-php.cn

Comment compresser des images avec Canvas

php中世界最好的语言

Libérer： 2018-01-11 09:37:25

original

2133 Les gens l'ont consulté

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" />

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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(){
        // ……
    };
};

Copier après la connexion

2. Dessinez des images dans Canvas

1. Créer une toile

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

Copier après la connexion

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);

Copier après la connexion

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

Copier après la connexion

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!