집 > 기사 > 웹 프론트엔드 > HTML5 이미지 업로드 전처리

HTML5 이미지 업로드 전처리

韦小宝원래의: 2017-11-21 11:05:311862검색

HTML5이미지 업로드 전처리, 백그라운드 처리 없이 HTML5프런트엔드 업로드 페이지만 있는 플러그인으로 바로 사용할 수 있어요~ HTML5에 관심 있는 친구들이 공부할 수 있어요.

HTML5 이미지 업로드 전처리

스타일이 좀 못생겼지만 괜찮아요

코드:

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

위는 HTML5 이미지 업로드 전처리를 직접 수정해서 사용해도 되고, 더 자세히 공부해도 됩니다. 기사 및 소스 코드는 PHP 중국어 웹사이트검색

을 참조하세요. 관련 권장 사항:

HTML5를 사용하여 화면 동작 잠금 해제 기능 만들기

가장 완벽한 HTML5 태그

A HTML5

의 향후 개발에 대해 간략하게 이야기합니다.

위 내용은 HTML5 이미지 업로드 전처리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：jquery는 PC 측에서 슬라이딩 검증을 구현합니다.다음 기사：jquery는 PC 측에서 슬라이딩 검증을 구현합니다.