- 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
Windows.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) Windows.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) Windows.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, 中国";
- Windows.btoa(Windows.encodeURIComponent(str))
- //"Q2hpbmElRUYlQkMlOEMlRTQlQjglQUQlRTUlOUIlQkQ="
- Windows.decodeURIComponent(Windows.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
来源: https://juejin.im/post/5c00e8a66fb9a049db72dbd0