前端數據操做總結

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 複製代碼