一晕城、圖片轉base64并壓縮
//input file選中文件后調用
change(self){
self = self.target
//創(chuàng)建一個讀取文件的對象
let reader = new FileReader();
//讀取文件,轉碼
reader.readAsDataURL(self.files[0]);
reader.onload = function (e) {
let base64 = e.target.result; //轉碼過后的base64編碼
//創(chuàng)建一個圖片
let newImage = new Image();
let quality = 0.6; //壓縮系數(shù)0-1之間窖贤,壓縮到0.9以上會有bug,注意B蓑稹(可以自行設置)
newImage.src = base64;
newImage.setAttribute("crossOrigin", 'Anonymous'); //url為外域時需要
let imgWidth, imgHeight;
newImage.onload = function () {
imgWidth = this.width;
imgHeight = this.height;
//給生成圖片設置一個默認的最大寬/高(可以自行設置)
let myWidth = 800;
//準備在畫布上繪制圖片
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
//判斷上傳的圖片的寬高是否超過設置的默認最大值,以及設置同比例的寬高
if (Math.max(imgWidth, imgHeight) > myWidth) {
if (imgWidth > imgHeight) {
canvas.width = myWidth;
canvas.height = myWidth * imgHeight / imgWidth;
} else {
canvas.height = myWidth;
canvas.width = myWidth * imgWidth / imgHeight;
}
} else {
canvas.width = imgWidth;
canvas.height = imgHeight;
}
//清空畫布
ctx.clearRect(0, 0, canvas.width, canvas.height);
//開始繪制圖片到畫布上
ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
let newBase64 = canvas.toDataURL("image/jpeg", quality);//壓縮圖片大形锟取(關鍵代碼)
// 獲取到當前的圖片的大小览闰,然后調整成自己需要的大小夯接,例如說需要200KB-500KB之間(可以自行設置)
while (newBase64.length / 1024 > 200) {
quality -= 0.2;
newBase64 = canvas.toDataURL("image/jpeg", quality);
}
//壓縮完成
upload(newBase64)
}
};
}
二纷妆、IE瀏覽器判斷
function IEVersion() {
var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判斷是否IE<11瀏覽器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判斷是否IE的Edge瀏覽器
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
if(isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if(fIEVersion == 7) {
return 7;
} else if(fIEVersion == 8) {
return 8;
} else if(fIEVersion == 9) {
return 9;
} else if(fIEVersion == 10) {
return 10;
} else {
return 6;//IE版本<=7
}
} else if(isEdge) {
that.isIE11 = true;
return 'edge';//edge
} else if(isIE11) {
that.isIE11 = true;
return 11; //IE11
}else{
return -1;//不是ie瀏覽器
}
}
三掩幢、判斷ios和安卓
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
四、獲取url鏈接上的參數(shù)
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if(r != null) return r[2];
return "";
};
五际邻、阻止事件冒泡和禁用鼠標事件
//阻止冒泡
e.stopPropagation();
//css禁用鼠標事件
pointer-events: none;
六、JSEncrypt RSA加密缨恒、解密
//加密
//公鑰
var _key = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNA0h2gpFTwIDAQAB';
var encryptObj = new JSEncrypt();
encryptObj.setPublicKey(_key);
return encryptObj.encrypt(str);
//解密
//私鑰
var privateKey = 'MIICdgIBADANBgkqhkiG9w0BAQEFAASUxeg=='
var decrypt = new JSEncrypt();
decrypt.setPrivateKey(privateKey);
return decrypt.decrypt(value);
七、獲取瀏覽器類型
function getBrowserType(callback) {
var ua = navigator.userAgent;
if (navigator.appName == "Microsoft Internet Explorer" || ua.indexOf("Trident") > -1) {
return "IE";
} else if (ua.indexOf("Chrome") > -1) {
return "Chrome";
} else if (ua.indexOf("Safari") > -1) {
return "Safari";
} else if (ua.indexOf("Firefox") > -1) {
return "Firefox";
} else {
return "unknown";
}
}