7.JS常用方法(文本防注入,判断浏览器麦克风 摄像头,图片压缩)

持续创作，加速成长！这是我参与「掘金日新计划 · 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(/&nbsp;/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 }); },

使用： 

```

```

案例：