前端資料操作總結

Canvas · 發表 2018-11-30 23:19:01

摘要： src轉img function srctoimg(src){ return new Promise((reslove,reject)=>{ let img = new Image() img.onload = function(){ reslove(...

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

本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。

對web開發技術感興趣的同學，歡迎加入Q群：943129070，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。

最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。