Heim > Artikel > Web-Frontend > Vorverarbeitung zum Hochladen von HTML5-Bildern

Vorverarbeitung zum Hochladen von HTML5-Bildern

韦小宝Original: 2017-11-21 11:05:311910Durchsuche

HTML5 Bild-Upload-Vorverarbeitung, ein Plug-in, das nur über eine HTML5 Front-End-Upload-Seite ohne Hintergrundverarbeitung verfügt, Sie können es direkt verwenden ~ Ja für HTML5 Interessierte Freunde können es recherchieren.

Der Stil ist etwas hässlich, aber es ist okay

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>

Das Obige ist eine HTML5-Bild-Upload-Vorverarbeitung, Sie können sie ändern und direkt verwenden oder Sie können sie studieren. Weitere Artikel und Quellcodes finden Sie auf der PHP Chinese-Website und suchen Sie nach

Verwandte Empfehlungen:

Verwenden Sie HTML5, um eine Funktion zum Entsperren von Bildschirmgesten zu erstellen

Die vollständigste HTML5-Tags

Eine kurze Diskussion über die zukünftige Entwicklung von HTML5

Das obige ist der detaillierte Inhalt vonVorverarbeitung zum Hochladen von HTML5-Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jquery implementiert eine gleitende Überprüfung auf der PC-SeiteNächster Artikel：jquery implementiert eine gleitende Überprüfung auf der PC-Seite

In Verbindung stehende Artikel

Mehr sehen