Prétraitement du téléchargement d'images HTML5-js tutoriel-php.cn

Prétraitement du téléchargement d'images HTML5

韦小宝

Libérer： 2017-11-21 11:05:31

original

1958 Les gens l'ont consulté

HTML5 Prétraitement du téléchargement d'images, un plug-in qui n'a que HTML5 page de téléchargement frontale sans traitement en arrière-plan, vous pouvez l'utiliser directement ~ Oui pour HTML5Les amis intéressés peuvent le rechercher.

Prétraitement du téléchargement dimages HTML5

Le style est un peu moche, mais ça va

Code :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>PHP中文网</title>
</head>
<body>
    <script>
        window.onload = function () {
            var input = document.createElement(&#39;input&#39;);
            input.type = &#39;file&#39;;
            input.addEventListener(&#39;change&#39;, function () {
                var file = this.files[0];
                var img = document.createElement(&#39;img&#39;);
                img.src = window.URL.createObjectURL(file);
                img.onload = function () {
                    var canvas = document.createElement(&#39;canvas&#39;);
                    var ctx = canvas.getContext(&#39;2d&#39;);
                    var MAX_WIDTH = 150;
                    var MAX_HEIGHT = 200;
                    var width = img.width;
                    var height = img.height;

                    if (width > height) {
                        if (width > MAX_WIDTH) {
                            height *= MAX_WIDTH / width;
                            width = MAX_WIDTH;
                        }
                    } else {
                        if (height > MAX_HEIGHT) {
                            width *= MAX_HEIGHT / height;
                            height = MAX_HEIGHT;
                        }
                    }

                    canvas.width = width;
                    canvas.height = height;
                    ctx.drawImage(img, 0, 0, width, height);
                    document.body.appendChild(canvas);

                    var btn = document.createElement(&#39;button&#39;);
                    btn.innerHTML = &#39;上传&#39;;
                    document.body.appendChild(btn);
                    btn.addEventListener(&#39;click&#39;, function() {
                        /*
                            toBlob的兼容性问题使用
                             https://github.com/blueimp/JavaScript-Canvas-to-Blob 这个库，就可以解决
                        */
                        canvas.toBlob(function(blob) {
                            var form = new FormData();
                            form.append(&#39;file&#39;, blob);
                            fetch(&#39;/api/upload&#39;, {method: &#39;POST&#39;, body: form});
                        });
                    }, false);
                };

                // document.body.appendChild(img); 原始图片是不用展示出来的
            }, false);
            document.body.appendChild(input);
        };
    </script>
</body>

</html>

Copier après la connexion

Ce qui précède est une image HTML5 Téléchargez le prétraitement, vous pouvez la modifier et l'utiliser directement, ou vous pouvez l'étudier. Pour plus d'articles et de codes sources, veuillez vous rendre sur le Site Web PHP chinois et recherchez

<.>Recommandations associées :

Utilisez HTML5 pour créer une fonction de déverrouillage par gestes à l'écran

Le balises HTML5 les plus complètes

Une brève discussion sur le développement futur de HTML5

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!