基于JS實現(xiàn)前端壓縮上傳圖片的實例代碼

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 21:56:56

基于JS實現(xiàn)前端壓縮上傳圖片的實例代碼

基于JS實現(xiàn)前端壓縮上傳圖片的實例代碼:具體代碼如下所示： <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>前端壓縮上傳圖片</title> <script src=https://cdn.bootcss.com/jquery/

推薦度：

點擊下載本文 文檔為doc格式

導讀基于JS實現(xiàn)前端壓縮上傳圖片的實例代碼:具體代碼如下所示： <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>前端壓縮上傳圖片</title> <script src=https://cdn.bootcss.com/jquery/

具體代碼如下所示：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>前端壓縮上傳圖片</title>
 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
 <input type="file" id="picFile" onchange="readFile(this)" />
 <img id="img" src="" alt="" />
 <script>
 function readFile(obj) {
 var file = obj.files[0];
 //判斷類型是不是圖片 
 if (!/image\/\w+/.test(file.type)) {
 alert("請確保文件為圖像類型");
 return false;
 }
 var reader = new FileReader();
 reader.readAsDataURL(file);
 reader.onload = function(e) {
 dealImage(this.result, { quality: 0.5 }, function(base) {
 //調(diào)用
 var blob = dataURLtoBlob(base);
 var newFile = new File([blob], file.name, { type: file.type });
 console.log(newFile)
 let r = new FileReader(); //本地預(yù)覽
 r.onload = function() {
 $('#img').attr("src", r.result);;
 }
 r.readAsDataURL(newFile); //Base64
 // upload(newFile);
 });
 }
 }
 //將base64轉(zhuǎn)換為blob
 function dataURLtoBlob(dataurl) {
 var arr = dataurl.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 });
 }
 function upload(file) {
 var that = this;
 // 創(chuàng)建form對象
 let param = new FormData();
 // 通過append向form對象添加數(shù)據(jù)
 param.append('img', file);
 // 文件大小
 param.append('size', file.size);
 for (var n in that.params) {
 param.append(n, that.params[n]);
 }
 // 創(chuàng)建ajax
 var xhr = new XMLHttpRequest();
 xhr.onload = function() {
 console.log(xhr.responseText)
 }
 xhr.open("POST", "yourapi", true);
 // 發(fā)送表單數(shù)據(jù)
 xhr.send(param);
 }
 /**
 * 圖片壓縮，默認同比例壓縮
 * @param {Object} path
 * pc端傳入的路徑可以為相對路徑，但是在移動端上必須傳入的路徑是照相圖片儲存的絕對路徑
 * @param {Object} obj
 * obj 對象 有 width， height， quality(0-1)
 * @param {Object} callback
 * 回調(diào)函數(shù)有一個參數(shù)，base64的字符串數(shù)據(jù)
 */
 function dealImage(path, obj, callback) {
 var img = new Image();
 img.src = path;
 img.onload = function() {
 var that = this;
 // 默認按比例壓縮
 var w = that.width,
 h = that.height,
 scale = w / h;
 w = obj.width || w;
 h = obj.height || (w / scale);
 var quality = obj.quality || 0.7; // 默認圖片質(zhì)量為0.7
 //生成canvas
 var canvas = document.createElement('canvas');
 var ctx = canvas.getContext('2d');
 // 創(chuàng)建屬性節(jié)點
 var anw = document.createAttribute("width");
 anw.nodeValue = w;
 var anh = document.createAttribute("height");
 anh.nodeValue = h;
 canvas.setAttributeNode(anw);
 canvas.setAttributeNode(anh);
 ctx.drawImage(that, 0, 0, w, h);
 // 圖像質(zhì)量
 if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
 quality = obj.quality;
 }
 // quality值越小，所繪制出的圖像越模糊
 var base64 = canvas.toDataURL('image/jpeg', quality);
 // 回調(diào)函數(shù)返回base64的值
 callback(base64);
 }
 }
 </script>
</body>
</html>

總結(jié)

以上所述是小編給大家介紹的基于JS實現(xiàn)前端壓縮上傳圖片的實例代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

基于JS實現(xiàn)前端壓縮上傳圖片的實例代碼

推薦度：

點擊下載本文 文檔為doc格式

標簽：圖片上傳 js

熱門焦點

基于JS實現(xiàn)前端壓縮上傳圖片的實例代碼

基于JS實現(xiàn)前端壓縮上傳圖片的實例代碼

基于JS實現(xiàn)前端壓縮上傳圖片的實例代碼

最新推薦

猜你喜歡

熱門推薦