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 })

?

轉載于:https://www.cnblogs.com/tiomer/p/7040742.html

總結

以上是生活随笔為你收集整理的html下纯JS实现图片压缩、预览、图片Base64转换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。