前端資料操作總結
摘要：
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，快速升職加薪，走上人生巔峰。