html下純JS實現圖片壓縮、預覽、圖片Base64轉換

 1 function ImgToBase64(file, maxLen, callBack) {
 2     var img = new Image();
 3 
 4     var reader = new FileReader();//讀取客戶端上的文件
 5     reader.onload = function () {
 6         var url = reader.result;//讀取到的文件內容.這個屬性只在讀取操做完成以後纔有效,而且數據的格式取決於讀取操做是由哪一個方法發起的.因此必須使用reader.onload，
 7         img.src = url;//reader讀取的文件內容是base64,利用這個url就能實現上傳前預覽圖片
 8     };
 9     img.onload = function () {
10         //生成比例
11         var width = img.width, height = img.height;
12         //計算縮放比例
13         var rate = 1;
14         if (width >= height) {
15             if (width > maxLen) {
16                 rate = maxLen / width;
17             }
18         } else {
19             if (height > maxLen) {
20                 rate = maxLen / height;
21             }
22         };
23         img.width = width * rate;
24         img.height = height * rate;
25         //生成canvas
26         var canvas = document.createElement("canvas");
27         var ctx = canvas.getContext("2d");
28         canvas.width = img.width;
29         canvas.height = img.height;
30         ctx.drawImage(img, 0, 0, img.width, img.height);
31         var base64 = canvas.toDataURL('image/jpeg', 0.9);
32         callBack(base64);
33     };
34     reader.readAsDataURL(file);
35 }

調用方式：

 1 $(function () {
 2         $("#img").change(function () {
 3             var file = $(this)[0].files[0];//獲取input file控件選擇的文件
 4             
 5             ImgToBase64(file, 720, function (base64) {
 6                 $("#img1")[0].src = base64;//預覽頁面上預留一個img元素，載入base64
 7                 $("#img1")[0].width = 300;//設定寬高，否則會自動按照壓縮過的圖片寬高設定，有可能超出預想的範圍。
　　　　　　　　　　　//直接利用ajax上傳base64到服務器，完畢
 8             });
 9         })
10     })