js upload pictures, compression, rotation

html
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>js上传图片</title>
    <script src="Script/plugins/0com/exif.js"></script>
</head>
<body>
    <input id="file" type="file">

    <script type="text/javascript">
        =FILETYPESwas ['image/jpeg', 'image/gif', 'image/png'];
        window.onload = function myfunction() {
            var input = document.getElementById('file');
            input.onchange = function () {
                var files = this.files;
                for (var i = 0, len = files.length; i < len; i++) {
                    var file = files[i];
                    if (!fileTypes.includes(file.type)) {
                        alert("只可上传图片")
                        return false;
                    }
                    if (file.size / 1024 > 1025) {
                        photoCompress(file, { quality: 0.3 }, upload_html5);
                    }
                    else {
                        upload_html5(file);
                    }
                }
            };
        }

        function upload_html5(file) {
            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener("progress", function (e) { }, false);
            xhr.addEventListener("load", function (e) {
                var obj = JSON.parse(e.target.responseText);
                if (obj.code == 200) {
                    alert(" Successful upload "); 
                } 
                The else { 
                    Alert (obj.message); 
                } 
            }, to false ); 
            xhr.addEventListener ( " error " , function (E) { 
                the console.log (E); 
                Alert ( " Upload failed " ); 
            }, to false ) ; 
            xhr.addEventListener ( " ABORT " , function (E) { 
                Alert ( " Upload cancel " ); 
            },false);

            var fd = new FormData;
            fd.append("file", file);
            fd.append("hallName", '分会场1');
            fd.append("dateTime", '2019-06-21');
            xhr.open("post", "/Common/UploadFile");
            xhr.send(fd);
        }

        /*
        Three parameters 
        file: a file (a picture format type), 
        W: the width of a file is compressed, the smaller the width, the smaller the byte 
        objDiv: is a container or a callback 
        photoCompress () 
         * / 
        function photoCompress (File , obj, objDiv) {
             var Orientation =  null ; // iOS Photo is selected picture angle problem 
            EXIF.getData (File, function () { 
                EXIF.getAllTags ( the this ); 
                Orientation = EXIF.getTag ( the this , ' Orientation ' ) ; 
            }); 
            var READY =  new newFileReader ();
             / * begin reading the contents of the specified Blob object or a File object when the read operation is completed, the value of the readyState property will be DONE. 
             * If you set onloadend event handler is invoked the same time. result in the attribute comprises a data: URL format string representing the contents of the file to read. * / 
            ready.readAsDataURL (file); 
            ready.onload =  function () { 
                canvasDataURL ( the this .Result, obj, Orientation, objDiv ) 
            } 
        } 
        function canvasDataURL (path, obj, Orientation, the callback) {
             var IMG =  new new Image (); 
            img.src = path; 
            img.onload = function () {
                 var that =  the this ;
                 // default scale compression 
                var W = that.width, 
                    H = that.height, 
                    Scale = W / H; 
                W = obj.width || W; 
                H = obj.height || (W / Scale);
                 var quality =  0.7 ;   // default image quality 0.7 
                // generate canvas
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                // 创建属性节点
                var anw = document.createAttribute("width");
                anw.nodeValue = w;
                var anh = document.createAttribute("height");
                anh.nodeValue = h;
                canvas.setAttributeNode(anw);
                canvas.setAttributeNode(anh);

                if (Orientation != "" && Orientation != 1 && Orientation != undefined) {
                    switch (Orientation) {
                        case 6://需要顺时针90度旋转
                            canvas.width = h;
                            canvas.height = w;
                            ctx.rotate(90 * Math.PI / 180);
                            ctx.drawImage(this, 0, -h);
                            break;
                        case 8://需要逆时针90度旋转
                            canvas.width = h;
                            canvas.height = w;
                            ctx.rotate(-90 * Math.PI / 180);
                            ctx.drawImage(this, -w, 0);
                            break;
                         Case  . 3 : // a 180 degree rotation 
                            ctx.rotate ( 180  * Math.PI /  180 ); 
                            ctx.drawImage ( the this , - W, - H);
                             BREAK ; 
                    } 
                } 
                the else { 
                    ctx.drawImage (that, 0 , 0 , W, H); 
                } 
                // image quality 
                IF (obj.quality && obj.quality <= . 1  && obj.quality >  0 ) { 
                    Quality = obj.quality; 
                } 
                // Quality smaller the value, the more blurry the image drawn 
                var Base64 = canvas.toDataURL ( ' Image / JPEG ' , Quality);
                 // callback base64 return value of 
                the callback (base64); 
            } 
        } 
        / * * 
         * base64 will convert image data for url Blob 
         * @param URLData 
         * base64 url image data represented by way 
         * / 
        function convertBase64UrlToBlob (URLData) {
             var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        }

    </script>
</body>
</html>
js upload pictures, compression, rotation

Guess you like
