src转img
function srctoimg(src){ return new Promise((reslove,reject)=>{ let img = new Image() img.onload = function(){ reslove(img) } img.onerror = function(err) { reject(err) } img.src = src })}img转canvas
function imgtocanvas(img){ let canvas = document.createElement("canvas"); let ctx = canvas.getContext('2d') canvas.width = img.width canvas.height = img.height ctx.drawImage(img, 0, 0, canvas.width, canvas.height); return canvas}ImageData转canvas
function ImageDatetocanvas(imgData){ let canvas = document.createElement("canvas"); let ctx = canvas.getContext('2d') canvas.width = imgData.width canvas.height = imgData.height ctx.putImageData(imgData,canvas.width, canvas.height); return canvas}canvas转ImageData
function canvastoImageDate(canvas){ let ctx = canvas.getContext('2d') return ctx.createImageData(canvas.width,canvas.height)}canvas像素操作
function canvaspixel(canvas,deal) { let ctx = canvas.getContext('2d') var imgData = ctx.createImageData(canvas.width, canvas.height); for (var i = 0; i < imgData.data.length; i += 4) { deal(r,g,b,a) } ctx.putImageData(imgData, canvas.width, canvas.height); return canvas}canava转DataURL(base64)
canvas.toDataURL()DataURL(base64)转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 });}file转arrayBuffer
function filetoblob(file){ return new Promise((resolve, reject) => { var reader = new FileReader(); reader.readAsArrayBuffer(file); reader.onload = function (e) { resolve(reader.result) } })}file转blob
function filetoblob(file){ return new Promise((resolve, reject) => { var reader = new FileReader(); reader.readAsArrayBuffer(file); reader.onload = function (e) { resolve(new Blob([reader.result],{type:file.type})) } })}(blob,arraybuffer)转file
function blobtofile(blob,name){ return new File([blob], name ,{type:blob.type})}file(blob)转DataURL(base64)
function filetoblob(file) { return new Promise((resolve, reject) => { var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { resolve(reader.result) } reader.onerror = function (e) { resolve(reader.result) } })}dataURL转File
function dataURLtoFile(dataurl, filename) { 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 File([u8arr], filename, {type:mime});}blob转objectURL
window.URL.createObjectURL(blob)objectURL转img
srctoimg(src)objectURL(url)转blob
function URLtoblob(){ return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest() xhr.open('GET', input) xhr.responseType = 'blob' xhr.onload = () => { if (xhr.status >= 200 && xhr.status < 300) { resolve(xhr.response) } else { reject(xhr.statusText) } } xhr.onerror = () => reject(xhr.statusText) xhr.send() }) }}objectURL(url)转arraybuffer，当服务端传递二级制数据时使用
function URLtoblob(){ return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest() xhr.open('GET', input) xhr.responseType = 'arraybuffer' xhr.onload = () => { if (xhr.status >= 200 && xhr.status < 300) { resolve(xhr.response) } else { reject(xhr.statusText) } } xhr.onerror = () => reject(xhr.statusText) xhr.send() }) }}FormData设置blob
function appendBlob(blob){ var fd = new FormData(); fd.append("image", blob, "image.png"); return fd}Uint8ClampedArray Uint8Array 区别
Uint8ClampedArray 1 ,它会将负数纳入0，大于255的数纳入255，所以取模就不用了。 2 ,小数取整Uint8Array 1,Uint8Array([-23]) 等价于 new Uint8Array([ 233 ]) 2,四舍五入在解决0-255无区别arraybuffer,视图(Uint8Array、Float64Array等)之slice
buf返回buf 视图返回视图 1,分配内存 2，拷贝数据
数据
1,new ArrayBuffer(40) 2,new Uint8Array( [ 1, 2, 3, 4 ] ) 3,Array.from(uint8Array);
视图参数
var v3 = new Int16Array(buf, 2, 2);第一个参数：视图对应的底层ArrayBuffer对象，该参数是必须的。第二个参数：视图开始的字节序号，默认从0开始。第三个参数：视图包含的数据个数，默认直到本段内存区域结束。
视图.buffer 获取缓冲区
视图对象DataView
var buffer = new ArrayBuffer(24);var dv = new DataView(buffer);// 从第1个字节读取一个8位无符号整数var v1 = dv.getUint8(0);// 从第2个字节读取一个16位无符号整数var v2 = dv.getUint16(1); // 从第4个字节读取一个16位无符号整数var v3 = dv.getUint16(3);setInt8：写入1个字节的8位整数。setUint8：写入1个字节的8位无符号整数。setInt16：写入2个字节的16位整数。setUint16：写入2个字节的16位无符号整数。setInt32：写入4个字节的32位整数。setUint32：写入4个字节的32位无符号整数。setFloat32：写入4个字节的32位浮点数。setFloat64：写入8个字节的64位浮点数。// 在第1个字节，以大端字节序写入值为25的32位整数dv.setInt32(0, 25, false); // 在第5个字节，以大端字节序写入值为25的32位整数dv.setInt32(4, 25); // 在第9个字节，以小端字节序写入值为2.5的32位浮点数dv.setFloat32(8, 2.5, true);实现atob(string 转 base64) window.atob
function _atob(s) { var base64hash = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'; s = s.replace(/\s|=/g, ''); var cur, prev, mod, i = 0, result = []; while (i < s.length) { cur = base64hash.indexOf(s.charAt(i)); mod = i % 4; switch (mod) { case 0: //TODO break; case 1: result.push(String.fromCharCode(prev << 2 | cur >> 4)); break; case 2: result.push(String.fromCharCode((prev & 0x0f) << 4 | cur >> 2)); break; case 3: result.push(String.fromCharCode((prev & 3) << 6 | cur)); break; } prev = cur; i++; } return result.join('');}实现btoa(base64 转 string) window.btoa
function _btoa(s) { var base64hash = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'; if (/([^\u0000-\u00ff])/.test(s)) { throw new Error('INVALID_CHARACTER_ERR'); } var i = 0, prev, ascii, mod, result = []; while (i < s.length) { ascii = s.charCodeAt(i); mod = i % 3; switch (mod) { // 第一个6位只要要让8位二进制右移两位 case 0: result.push(base64hash.charAt(ascii >> 2)); break; //第二个6位 = 第一个8位的后两位 + 第二个8位的前4位 case 1: result.push(base64hash.charAt((prev & 3) << 4 | (ascii >> 4))); break; //第三个6位 = 第二个8位的后4位 + 第三个8位的前2位 //第4个6位 = 第三个8位的后6位 case 2: result.push(base64hash.charAt((prev & 0x0f) << 2 | (ascii >> 6))); result.push(base64hash.charAt(ascii & 0x3f)); break; } prev = ascii; i++; } // 循环结束后看mod, 为0 证实需补3个6位，第一个为最后一个8位的最后两位后面补4个0。另外两个6位对应的是异常的“=”； // mod为1，证实还需补两个6位，一个是最后一个8位的后4位补两个0，另一个对应异常的“=” if (mod == 0) { result.push(base64hash.charAt((prev & 3) << 4)); result.push('=='); } else if (mod == 1) { result.push(base64hash.charAt((prev & 0x0f) << 2)); result.push('='); } return result.join('');}atob,btoa 不能编码解码中文
var str = "China，中国";window.btoa(window.encodeURIComponent(str))//"Q2hpbmElRUYlQkMlOEMlRTQlQjglQUQlRTUlOUIlQkQ="window.decodeURIComponent(window.atob('Q2hpbmElRUYlQkMlOEMlRTQlQjglQUQlRTUlOUIlQkQ='))//"China，中国"编码含义
1，区分数据部分和参数部分2，处理中文乱码(服务端和用户端编码不一致)escape不编码字符有69个：*，+，-，.，/，@，_，0-9，a-z，A-ZencodeURI不编码字符有82个：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-ZencodeURIComponent不编码字符有71个：!， '，(，)，*，-，.，_，~，0-9，a-z，A-Z
本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入Q群：943129070，不论你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天升级视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。
