二进制学习

菜嘘詼
148 阅读6分钟

二进制通常跟十进制来比较

二进制转十进制是这样的

10110 转化为十进制就是

1*2^4+0*2^3+1*2^2+1*2^1+0*2^0=24

十进制转二进制 整数是除2取余数

image.png 小数点是

如：0.625=（0.101）B

0.625*2=1.25======取出整数部分1

0.25*2=0.5========取出整数部分0

0.5*2=1==========取出整数部分1

例如：二进制数1101.01转化成十进制

1101.01（2）=1*20+0*21+1*22+1*23 +0*2-1+1*2-2=1+0+4+8+0+0.25=13.25（10）

因为计算机里存的是二进制 0.1跟0.2 在计算机底层需要转换成二进制进行计算,在二进制是无穷小数 所以js里0.1+0.2不等于0.3

计算机里的数据分为两种数据

  • 数值数据(有符号数据，无符号数据)
  • 非数据数据(文字跟图像)

一个字节8个位（bit）

三个位
从000到111 二进制刚刚好标识0到7 
正码：
如果用第一位的数字0或者1表示正负号
000  0 跟100 -0
001  1 跟101 -1
010  2 跟110 -2
011  3 跟111 +3

反码：

111 -0  跟000  0
110 -1  跟001  1
101 -2  跟002  2
100 -3  跟003  3

补码：

110 -1  跟001 +1 
101 -2  跟010 +2
100 -3  跟011 +3
000  0  
100 -4

补码相加舍去首位都是0都是

反正也不知道怎么算的的，百度来的案例规律


int a =-10;
//原码：10000000000000000000000000001010
//反码：11111111111111111111111111110101   符号位，不变其它位按位取反
//补码：11111111111111111111111111110010    反码加1

js是双进度的在内存里的占位是这样的

image.png

js里常用的二进制存储单位是ArrayBuffer 但是ArrayBuffer 我们好像只能设置长度，具体操作还是得靠TypedArray或者DateView 来操作

image.png

如图所显示 第一个基本都市正负占位符

getInt8到getInt16的算法

 let buffer =new ArrayBuffer(2)
 console.log(buffer.byteLength)//2
 let dataView=new DataView(buffer)
 dataView.setInt8(0,1)
 dataView.setInt8(1,2)
 console.log(dataView.getInt8(0))//1
 console.log(dataView.getInt8(1))//2
 console.log(dataView.getInt16(0))//258
 
 
 再举个例子
 let buffer = new ArrayBuffer(2);
//2个字节的ArrayBuffer
// console.log(buffer.byteLength);
//2
let dataView = new DataView(buffer);
dataView.setInt8(0, 1);
dataView.setInt8(1, 3);

console.log(dataView.getInt8(0));
console.log(dataView.getInt8(1));
console.log(dataView .getInt16(0));
 
 
 dataView.setInt8(0, 1);是往第一个个字节存了一个为1的二进制编码
 dataView.setInt8(1, 3)是往第二个字节里村里一个为3的二进制8位编码对吧
 dataView.getInt16(0) 是读16个bit 转换成10进制

如果一次读取两个或两个以上字节，就必须明确数据的存储方式，到底是小端字节序还是大端字节序。默认情况下，DataView的get方法使用大端字节序解读数据，如果需要使用小端字节序解读，必须在get方法的第二个参数指定true。


// 小端字节序

var v1 = dv.getUint16(1, true);

// 大端字节序

var v2 = dv.getUint16(3, false);

// 大端字节序

var v3 = dv.getUint16(3);

加上盗得图就能理解大小段字节序了

image.png

意思就是本来0001的二进制存储正着读是 结果是十进制的1，反过来是十进制的8 虽然没有什么叼用但是学习一下

再盗一个图了解二进制内存存储的转换关系

image.png

这里下面我就直接开抄了

将blob转成file
利用new File();

 function blobToFile(blob, filename, type) {
    return new File([blob], filename, { type })
 }
 
 blobToFile('test info', 'test', 'text/plain' )

输出如下

更进一步了解可阅读Js File() Blob()讲解

将file转换成DataURL
利用URL.createObjectURL()
 <input type="file" id="file">
 <img id="img">

 let img = document.getElementById('img')
 let file = document.getElementById('file')
 file.onchange = function () {
   let imgFile = this.files[0]
   img.src = URL.createObjectURL(imgFile)
   img.onload = function () {
     URL.revokeObjectURL(this.src)
   }
 }

更进一步了解可阅读URL.createObjectURL讲解

利用FileReader.readAsDataURL()
let img = document.getElementById('img')
let file = document.getElementById('file')
file.onchange = function (e) {
  let imgFile = this.files[0]
  let fileReader = new FileReader()
  fileReader.readAsDataURL(imgFile)
  fileReader.onload = function () {
    img.src = this.result
  }
}


更进一步了解可阅读FileReader简介

将DataURL转成file
function dataURLToFile (dataUrl, fileName) {
  const dataArr = dataUrl.split(',')
  const mime = dataArr[0].match(/:(.*);/)[1]
  const originStr = atob(dataArr[1])
  return new File([originStr], fileName, { type: mime })
}
dataURLToFile('data:text/plain;base64,YWFhYWFhYQ==', '测试文件')

// File {name: '测试文件', lastModified: 1640784525620, lastModifiedDate: Wed Dec 29 2021 21:28:45 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 7, …}

复杂处理方式如下

function dataURLToFile (dataUrl, filename) {
  const dataArr = dataUrl.split(',')
  const mime = dataArr[0].match(/:(.*);/)[1]
  const originStr = atob(dataArr[1])
  let n = originStr.length
  const u8Arr = new Uint8Array(n)
  while (n--) {
    u8Arr[n] = originStr.charCodeAt(n)
  }
  return new File([u8Arr], filename, { type: mime })
}
dataURLToFile('data:text/plain;base64,YWFhYWFhYQ==', '测试文件')
 console.log(dataURLToFile('data:text/plain;base64,YWFhYWFhYQ==','测试文件'));
 // File {name: '测试文件', lastModified: 1640784866937, lastModifiedDate: Wed Dec 29 2021 21:34:26 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 7, …}

将canvas转成DataURL
利用canvas.toDataURL()

 // html
 <input type="file" accept="image/*" id="file">

// js
document.querySelector('#file').onchange = function () {
  canvasToDataURL(this.files[0])
    .then(res => console.log(res))
}
function canvasToDataURL (file) {
  return new Promise(resolve => {
    const img = document.createElement('img')
    img.src = URL.createObjectURL(file)
    img.onload = function () {
      const canvas = document.createElement('canvas')
      canvas.width = img.width
      canvas.height = img.height
      const ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0)
      resolve(canvas.toDataURL('image/png', 1))
    }
  })
}


这个方法返回的是图片base64，用来生成图片的，默认png格式，也可以通过传递参数改变图片格式，还能改变图片保存的质量。

如：canvas.toDataURL(“images/jpeg”,0) ，第一个参数就是把图片编码为jpeg格式，第二个参数（0-1）就是指定图片质量，数值越大质量越高，不过对于image/png格式没法设置图片质量。

另外，chrome还支持自家的image/webp格式图片，也能设置图片质量。

将DataURL转成canvas
function dataUrlToCanvas (dataUrl) {
  return new Promise(resolve => {
    const img = new Image()
    img.src = dataUrl
    img.onload = function () {
      const canvas = document.createElement('canvas')
      canvas.width = this.width
      canvas.height = this.height
      const ctx = canvas.getContext('2d')
      ctx.drawImage(this, 0, 0)
      resolve(canvas)
    }
  })
}
const dataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUh...'
dataUrlToCanvas(dataUrl)
  .then(res => document.body.appendChild(res))




将canvas转成blob
利用canvas.toBlob()

 // html
 <input type="file" accept="image/*" id="file">

// js
document.querySelector('#file').onchange = function () {
  canvasToDataURL(this.files[0])
    .then(res => console.log(res))
}
function canvasToDataURL (file) {
  return new Promise(resolve => {
    const img = document.createElement('img')
    img.src = URL.createObjectURL(file)
    img.onload = function () {
      const canvas = document.createElement('canvas')
      canvas.width = img.width
      canvas.height = img.height
      const ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0)
      canvas.toBlob(function (e) {
        resolve(e)
      }, 'image/png', 1)
    }
  })
}


将canvas转成file
将canvas转成Blob，然后将Blob转成file即可，可看最开始的文件类型转换流程图。

或将canvas转成dataURL，然后将dataURL转成file即可，可看最开始的文件类型转换流程图。

blob转arrayBuffer
利用FileReader.readAsArrayBuffer()

function blobToArrayBuffer (blob, callback) {
  const reader = new FileReader()
  reader.readAsArrayBuffer(blob)
  reader.onload = function () {
    callback(this.result)
  }
}
let blob = new Blob([1, 2, 3, 4, 5])
blobToArrayBuffer(blob, (arrayBuffer) => { console.log(arrayBuffer) })
 // ArrayBuffer(5)

arrayBuffer转blob
利用new Blob()

function arrayBufferToBlob (arrayBuffer, type) {
  return new Blob([arrayBuffer], { type })
}
blobToArrayBuffer(new Blob([1, 2, 3, 4, 5]), (arrayBuffer) => {
  console.log(arrayBufferToBlob(arrayBuffer, 'text/plain'))
  // Blob {size: 5, type: 'text/plain'}
})
————————————————
版权声明：本文为CSDN博主「定栓」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44116302/article/details/122064841
avatar
文章
阅读
粉丝