JpegQuality/example.html at master · ibrahim12/JpegQuality · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!doctype html>
<html>
<head>
    <script type="text/javascript" src="jpeg_quality.js"></script>
</head>
<body onload="onLoad()">
    <input type="file" id="file" value="select a file" />
    <img src="samples/blends03.jpg" id="img1" style="display: none;"/><br/>

<div id="container"></div>
<script>

    function dataURLToBlob(dataURL) {
        var BASE64_MARKER = ';base64,', parts, contentType, raw;
        if (dataURL.indexOf(BASE64_MARKER) == -1) {
            parts = dataURL.split(',');
            contentType = parts[0].split(':')[1];
            raw = decodeURIComponent(parts[1]);

            return new Blob([raw], {type: contentType});
        }

        parts = dataURL.split(BASE64_MARKER);
        contentType = parts[0].split(':')[1];
        raw = window.atob(parts[1]);
        var rawLength = raw.length;

        var uInt8Array = new Uint8Array(rawLength);

        for (var i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {type: contentType});
    }

    function getImageBase64Url(fileInput, callback){
        var canvas = document.createElement('canvas');
        canvas.width = 313;
        canvas.height = 234;
        var ctx = canvas.getContext("2d");

        var image = new Image();

        var reader = new FileReader();
        reader.onload = function(e) {
            image.src = e.target.result

            ctx.drawImage(image, 0, 0, 313, 234);
            callback.call(null, canvas.toDataURL("image/jpeg", 1));
        };
        reader.readAsDataURL(fileInput.files[0]);
    }

    var showAsImage = function(file, callback){
        var reader = new FileReader();
        reader.onload = function(e) {
            callback.call(null, e.target.result);
        };
        reader.readAsDataURL(file);
    };

    function onLoad(){

        var imageInfo = {};

//        var image = document.getElementById("img1");
//
//        JpegQuality.calculate(image, function(data){
//            console.log(data);
//        });

//        displayImage(image.src);

        var fileInput = document.getElementById('file');
        fileInput.onchange = function(){
            JpegQuality.calculate(fileInput.files[0], function(data){
                console.log(data);
            });

            showAsImage(fileInput.files[0], function(image){
                displayImage(image);
                JpegQuality.calculate(image, function(data){
                    console.log(data);
                });
            });

            console.log(fileInput.files);

            getImageBase64Url(fileInput, function(base64Url){
                console.log(base64Url);
                var blob = dataURLToBlob(base64Url);

                displayImage(base64Url);

                JpegQuality.calculate(blob, function(data){
                    console.log(data);
                });
            });

        };


    }

    function displayImage(image){
        var img;
        if( typeof image === 'string'){
            img = new Image();
            img.src = image;
        }else{
            img = image;
        }

        img.width = "200";

        document.getElementById('container').appendChild(img);
    }


</script>


</body>
</html>