前端数据操作总结

田木
8,183 阅读4分钟

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-Z
encodeURI不编码字符有82个：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z
encodeURIComponent不编码字符有71个：!， '，(，)，*，-，.，_，~，0-9，a-z，A-Z
avatar
文章
阅读
粉丝