持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情
文本防注入
// 防注入(html、script强制显示)
htmlEncode(str){
var ele = document.createElement('span');
ele.appendChild(document.createTextNode(str));
return ele.innerHTML;
},
//解析（强制显示的返回）
htmlDecode (str) {
var ele = document.createElement('span');
ele.innerHTML = str;
return ele.textContent;
},
// 识别网址
getHtml(value,index=0){
let valueArray=value.split('\n');
let valueAtring=valueArray.join('<br>')
var reg = /(http://|https://)((\w|=|?|.|/|&|-)+)/g;
let url=valueAtring.replace(reg,'$1$2')
return valueAtring.replace(reg, "<a style=' color: #5cadff !important;' id='toA_"+index+"' target='_Top,_Blank' href='$1$2' url='$1$2'>$1$2</a>")
},
//清除富文本html
clearHtml(str){
let regex = /(<([^>]+)>)/ig
return str.replace(regex, "").replace(/ /gi, "");
}
判断浏览器麦克风 摄像头
方法：
getAudioVideo(constraintsData){
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function(constraints) {
// 首先，如果有getUserMedia的话，就获得它
var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||navigator.msGetUserMedia;
// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
if (!getUserMedia) {
return Promise.reject({code:404});
}
// 否则，为老的navigator.getUserMedia方法包裹一个Promise
return new Promise(function(resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
return navigator.mediaDevices.getUserMedia(constraintsData)
},
使用：
getAudioVideo({audio:true,video:true}).then(res=>{
console.log('已点击允许,开启成功');
}).catch(err=>{
if(err.code && err.code==404){
console.log('浏览器不支持，请更换浏览器')
}else{
console.log('请检查是否存在摄像头或麦克风')
}
})
图片压缩
压缩方法：
1.先将file通过FileReader 转换为base64格式
2.通过canvas绘制图片，并通过canvas.toDataUR()降低图片质量
3.base64转成blod格式文件
4.blod格式文件转成file格式并返回
/*
*file：文件的file
*obj配置 {quality：0.2}压缩比例
*callback 回调
*/
compressImg(file, obj, callback) {
let _this = this;
var ready = new FileReader();
/*开始读取指定的Blob对象或File对象中的内容.
当读取操作完成时,readyState属性的值会成为DONE,
如果设置了onloadend事件处理程序,则调用之.
同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
ready.readAsDataURL(file);
ready.onload = function () {
var path = this.result;
// ↓压缩
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 = 0.7; // 默认图片质量为0.7
//生成canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
// 创建属性节点
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);
// 图像质量
if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
quality = obj.quality;
}
// quality值越小，所绘制出的图像越模糊
var base64 = canvas.toDataURL("image/jpeg", quality);
// 转换为Blob数据
var BlobData=_this.convertBase64UrlToBlob(base64)
// 转换为file数据
let this_file = new File(
[BlobData],
file.name,
);
// 回调函数返回file的值
callback(this_file);
// ↑压缩
};
};
},
// 转换为Blob数据方法
convertBase64UrlToBlob(urlData) {
var arr = urlData.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 });
},
使用：
<template>
<span class="upload_span" @click="uploadFn">
<input
ref="upload"
@change="uploadChange"
style="display: none"
type="file"
:accept="acceptString"
/>
<slot></slot>
</span>
</template>
<script>
export default {
methods:{
uploadChange(e) {
let dom = e.currentTarget;
let files = dom.files;
//使用压缩，方法在上面的代码块
this.compressImg(
files[0],
{
quality: 0.2,
},
(res) => {
console.log(res,'返回的压缩图片的file')
}
);
},
uploadFn() {
this.$refs["upload"].click();
},
}
};
</script>
<style>
.upload_span{
width:100px;
height:100px;
border:1px solid #000
}
</style>
案例：
