前台数据操作总结

摘要:src转imgfunction srctoimg(src){ return new Promise((reslove,reject)=>{ let img = new Image() img.onload = function(){ reslove(img) }

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,快速升职加薪,走上人生巅峰。

  • 全部评论(0)
最新发布的资讯信息
【体系情况|办事器应用】树莓派装置TensorFlow(2020-04-24 21:11)
【体系情况|办事器应用】防面试-SD_WebImage(2020-04-24 21:11)
【体系情况|办事器应用】推荐一款视频控件xgplayer(2020-04-24 21:11)
【体系情况|办事器应用】PostgreSQL 源码解读(27)- 查询语句#12(查询优化-上拉子链接#2)(2020-04-24 21:11)
【体系情况|办事器应用】若何轻松进修JavaScript?(2020-04-24 21:10)
【体系情况|办事器应用】【源码分析】Launcher 8.0 源码 (12) --- Launcher 启动流程 第五步之计算桌面各构造细节参数(2020-04-24 21:10)
【体系情况|办事器应用】前台碰撞室之console.log与文本字符(2020-04-24 21:10)
【体系情况|办事器应用】好用的Middleware完成(2020-04-24 21:10)
【体系情况|办事器应用】前台面试逐日 3+1 —— 第373天(2020-04-24 21:10)
【体系情况|办事器应用】绍圣--kafka之临盆者(五)(2020-04-24 21:10)
手机二维码手机拜访支付大年夜礼包
前往顶部