代码片段javascript
2021-01-26 本文已影响0人
救救小亮
一、图片转base64并压缩
//input file选中文件后调用
change(self){
self = self.target
//创建一个读取文件的对象
let reader = new FileReader();
//读取文件,转码
reader.readAsDataURL(self.files[0]);
reader.onload = function (e) {
let base64 = e.target.result; //转码过后的base64编码
//创建一个图片
let newImage = new Image();
let quality = 0.6; //压缩系数0-1之间,压缩到0.9以上会有bug,注意!(可以自行设置)
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链接上的参数
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";
}
}