Exemple de code pour Canvas et la compression d'images

L'élément

canvas est utilisé pour dessiner des graphiques sur des pages Web. L'élément canevas de HTML5 utilise JavaScript pour dessiner des images 2D sur une page Web. Sur le canevas de la zone rectangulaire, JavaScript dessine des graphiques 2D et les restitue pixel par pixel. L'élément canevas peut être utilisé de plusieurs manières pour dessiner des chemins, des rectangles, des cercles, des personnages et ajouter des images. Dans cet article, nous partageons avec vous un exemple de code pour Canvas et la compression d’images.

Processus de compression d'image Canvas

Ensuite, j'expliquerai le processus spécifique de compression d'image Canvas avec des exemples spécifiques.

1. Entrée d'image locale

1. Obtenez des 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];
    // ……  （省略部分代码后续依次展示，下同）
};

C'est très simple, il suffit de récupérer le fichier local via le bouton de type fichier.

2. Déterminer le type de fichier local obtenu

<!--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. Sortez 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 images dans la toile 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 chose que la largeur et la hauteur de l’image d’entrée.

2. Dessinez des images

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

3. 🎜>

<!--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;;   // 将原始图片隐藏

Sortez à nouveau l'image dessinée dans le canevas Canvas au format base64.

4. Affichage complet du code

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

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

Le contenu ci-dessus est un exemple de code de Canvas et de compression d'image. J'espère qu'il pourra aider tout le monde.

Recommandations associées :

Comment utiliser la toile pour réaliser l'interaction entre la balle et la souris

Comment utiliser la toile pour créer l'effet de l'animation de la fontaine de particules

Techniques de dessin courantes dans Canvas en HTML5

Production de toile et glisser la souris pour dessiner des graphiques

Exemple détaillé de HTML5 utilisant Canvas pour implémenter la fonction de téléchargement d'images

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!