Comment implémenter la méthode de téléchargement et de compression d'images en js-js tutoriel-php.cn

Comment implémenter la méthode de téléchargement et de compression d'images en js

不言

Libérer： 2018-07-20 11:02:36

original

1963 Les gens l'ont consulté

Cet article vous présente la compression des images téléchargées en js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

JS implémente la compression d'image puis télécharge

Technologie utilisée :

API liée au canevas
Quelques API de html5

Compatibilité :

h5没发现问题,pc低版本浏览器不支持

Copier après la connexion

Idées d'implémentation :

Surveillez le téléchargement du champ du fichier et obtenez les données originales de l'image via l'API FileReader
Calculez la largeur et la hauteur compressées, puis dessinez vers le canevas Intercepter les données compressées

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="file" id="file">
    <canvas id="canvas"></canvas>
</body>

</html>
<script>
    // 兼容性 h5上可以使用,pc低版本浏览器不支持
    // 准备要用到的img和canvas
    var img = new Image(),
        canvas;
    // 创建读取文件对象
    var render = new FileReader();
    // 如果不需要放在页面上,使用js创建该元素就可以了
    // canvas = document.createElement('canvas');

    // 找到canvas,准备画图
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    var input = document.getElementById('file');
    input.addEventListener('change', function (e) {
        // 通过files获取到当前文件
        var file = e.target.files[0];
        // 如果选择的是图片
        if (file.type.indexOf('image') != -1) {
            // 读取file文件,得到的结果为base64位
            render.readAsDataURL(file);
        };
    });
    render.onload = function (result) {
        // 把读取到的base64图片设置给img的src属性
        var src = render.result;
        img.src = src;
    };
    img.onload = function () {
        // 加载完毕后获取图片的原始尺寸
        var origin_width = this.width;
        var origin_height = this.height;
        // 设置最大允许宽高,根据需求自己设置,值越大,图片大小越大
        var max_width = 400;
        var max_height = 400;

        // 最终宽高
        var target_width = origin_width;
        var target_height = origin_height;
        if (origin_width > max_width || origin_height > max_height) {
            if (origin_width / origin_height > max_width / max_height) {
                // 更宽，按照宽度限定尺寸
                target_width = max_width;
                target_height = Math.round(max_width * (origin_height / origin_width));
            } else {
                target_height = max_height;
                target_width = Math.round(max_height * (origin_width / origin_height));
            }
        }
        canvas.width = target_width;
        canvas.height = target_height;
        // 绘画到画布上
        context.drawImage(img, 0, 0, target_width, target_height);
        /*
            此处得到的是blob对象,blob对象是在ie10及以上才兼容,在ios8_1_1上和iphoneSE上有兼容问题
            canvas.toBlob(function(result) {
                console.log(result);
            });
        */
        // 读取canvas的数据
        var result = canvas.toDataURL();
        // 得到的结果是base64位的字符串,拿到压缩后的值通过网络请求交给后台处理...
        // 如果是blob对象,需要通过FormData对象发送
        console.log(result);
    };

</script>

Copier après la connexion

Recommandations associées :

Analyse algorithmique de l'arrangement complet des chaînes en js

Utilisation de React : Gestion des états à l'intérieur des composants React

Extension des classes en js et analyse de la technologie orientée objet

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!