Maison >interface Web >js tutoriel >Prétraitement du téléchargement d'images HTML5

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

韦小宝original: 2017-11-21 11:05:311964parcourir

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：jquery implémente la vérification glissante côté PCArticle suivant：jquery implémente la vérification glissante côté PC

Articles Liés

Voir plus