1+ <!DOCTYPE html>
2+ < html >
3+ < head >
4+ < meta charset ="utf-8 ">
5+ < title > Test</ title >
6+ < style type ="text/css ">
7+ .body-bg {
8+ background : # edf2f7
9+ }
10+ </ style >
11+ < link href ="css/tailwind.min.css " rel ="stylesheet ">
12+ < script type ="text/javascript " src ="js/jquery.min.js "> </ script >
13+ </ head >
14+ < body class ="h-screen flex items-center justify-center body-bg ">
15+ < div class ="h-screen flex justify-center items-center ">
16+ < div >
17+ < h1 class ="text-center pb-10 uppercase font-semibold text-gray-600 "> Compression< h1 />
18+ < div class ="flex justify-center items-center ">
19+ < div class ="flex ">
20+ < button type ="button " class ="bg-blue-500 text-white px-6 py-2 rounded font-medium mx-3 hover:bg-blue-600 transition duration-200 each-in-out ">
21+ < label > < input id ="upload_img " style ="display:none; " type ="file "> < i class ="fa fa-photo "> </ i > Upload</ label >
22+ </ button >
23+ </ div >
24+ < div class ="text-center mt-20 ">
25+ < div id ="oldImg "> </ div >
26+ < div id ="newImg "> </ div >
27+ </ div >
28+ </ div >
29+ </ div >
30+ </ div >
31+ < script type ="text/javascript ">
32+ ( function ( $ ) {
33+ var compressRatio = 0.8 , // 圖片壓縮比例
34+ imgNewWidth = 400 , // 圖片新寬度
35+ img = new Image ( ) ,
36+ canvas = document . createElement ( "canvas" ) ,
37+ context = canvas . getContext ( "2d" ) ,
38+ file , fileReader , dataUrl ;
39+
40+ // 上傳檔案
41+ $ ( "#upload_img" ) . change ( function ( ) {
42+ file = this . files [ 0 ] ;
43+ // 圖片才處理
44+ if ( file && file . type . indexOf ( "image" ) == 0 ) {
45+ fileReader = new FileReader ( ) ;
46+ fileReader . onload = getFileInfo ;
47+ fileReader . readAsDataURL ( file ) ;
48+ }
49+ } ) ;
50+
51+ function getFileInfo ( evt ) {
52+ dataUrl = evt . target . result ,
53+
54+ // 取得圖片
55+ img . src = dataUrl ;
56+ }
57+
58+ // 圖片載入後
59+ img . onload = function ( ) {
60+ var width = this . width , // 圖片原始寬度
61+ height = this . height , // 圖片原始高度
62+ imgNewHeight = imgNewWidth * height / width , // 圖片新高度
63+ html = "" ,
64+ newImg ;
65+
66+ // 顯示預覽圖片
67+ html += "<br /><br />" ;
68+ html += "<img src='" + dataUrl + "'/>" ;
69+ html += "<p>這裡是原始圖片尺寸 " + width + "x" + height + "</p>" ;
70+ html += "<p>檔案大小約 " + Math . round ( file . size / 1000 ) + "k</p>" ;
71+ $ ( "#oldImg" ) . html ( html ) ;
72+
73+ // 使用 canvas 調整圖片寬高
74+ canvas . width = imgNewWidth ;
75+ canvas . height = imgNewHeight ;
76+ context . clearRect ( 0 , 0 , imgNewWidth , imgNewHeight ) ;
77+
78+ // 調整圖片尺寸
79+ context . drawImage ( img , 0 , 0 , imgNewWidth , imgNewHeight ) ;
80+
81+ // 顯示新圖片
82+ newImg = canvas . toDataURL ( "image/jpeg" , compressRatio ) ;
83+ html = "" ;
84+ html += "<br /><hr /><br /><br />" ;
85+ html += "<img src='" + newImg + "'/>" ;
86+ html += "<p>這裡是新圖片尺寸 " + imgNewWidth + "x" + imgNewHeight + "</p>" ;
87+ html += "<p>檔案大小約 " + Math . round ( 0.75 * newImg . length / 1000 ) + "k</p>" ;
88+ $ ( "#newImg" ) . html ( html ) ;
89+
90+ // canvas 轉換為 blob 格式、上傳
91+ canvas . toBlob ( function ( blob ) {
92+ // 輸入上傳程式碼
93+ } , "image/jpeg" , compressRatio ) ;
94+ } ;
95+ } ) ( jQuery ) ;
96+ </ script >
97+ </ body >
98+ </ html >
0 commit comments