canvas还能这么用？🤨 图片压缩70% | base64转换原理

var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
console.log(dataURL); // 注意返回结果中的逗号（伏笔）
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"

let encodedData = window.btoa("Hello, world"); // 编码  SGVsbG8sIHdvcmxk
let decodedData = window.atob(encodedData);    // 解码  Hello, world

const buf = new ArrayBuffer(8);

var myFile = new File(bits, name[, options]);

const path = require('path')
const Koa = require('koa')
const KoaStatic = require('koa-static')
const Router = require('koa-router')
const koaBody = require('koa-body')
const router = new Router()
const app = new Koa()
app.use(koaBody({
  multipart: true,// 支持请求中body携带文件类型的数据
  formidable: {
    uploadDir: path.join(__dirname, '/public/uploads'),//设置图片保存地址
    keepExtensions: true
  }
}))
// 接受图片保存在public文件夹下，开启静态web服务
app.use(KoaStatic(path.join(__dirname, '/public'))) 
// 上传图片中间件
function uploadImg (ctx) {
  const file = ctx.request.files.file
  const basename = path.basename(file.path)
  // 根据图片的绝对地址获取图片名称： 例如 /d/aa/c.js  -> c.js
  ctx.body = { url: `${ctx.origin}/uploads/${basename}` }
}
// cors 跨域解决方案
app.use(async (ctx, next) => {
  ctx.set('Access-Control-Allow-Origin', '*');
  if (ctx.method == 'OPTIONS') {
    ctx.body = 200;
  } else {
    await next();
  }
})
router.post('/uploads', uploadImg)
app.use(router.routes())
app.listen(9001, () => console.log('服务启动成功'))
// http://localhost:9001/uploads

<input type="file" accept="image/*" name="file">
<button onclick="submit">提交表单</button>
<img id="img" src="" alt="">

const input = document.querySelector('input')
    const img = document.getElementById('img')
    const btn = document.querySelector('button')
    const formData = new FormData()
    function reqUploadImg() {
      fetch('http://localhost:9001/uploads', {
        method: 'post',
        body: formData
      }).then(res => res.json())
        .then(res => {
          console.log(res)
          img.src = res.url
        })
    }
    input.onchange = function (e) {
      const file = e.target.files[0]
      formData.append('file', file)
    }

input.onchange = function (e) {
      const file = e.target.files[0]
      // console.log(file)
      compressPic(file).then(resultFile => {
        formData.append('file', resultFile)
      })
    }
    function compressPic(file, encoderOtp = 0.2) {
      return new Promise(resolve => {
        // 1. 通过FileReader读取文件
        const reader = new FileReader()
        let res = reader.readAsDataURL(file)
        reader.onload = (event) => {
          // 2. 读取完毕之后获取图片的base64(上文伏笔),并创建新图片
          const { result: src } = event.target
          const image = new Image()
          image.src = src
          image.onload = () => {
            // 3.图片加载完之后通过canvas压缩图片
            const canvas = document.createElement('canvas')
            canvas.width = image.width
            canvas.height = image.height
            // 3.1 绘制canvas
            const ctx = canvas.getContext('2d')
            ctx.drawImage(image, 0, 0, image.width, image.height)
            // 3.2 返回图片url地址,并且进行压缩
            const canvasURL = canvas.toDataURL(file.type, encoderOtp)
            const buffer = atob(canvasURL.split(',')[1])
            // 3.3 bufferArray 无符号位字节数组 相当于在内存中开辟length长度的字节空间
            let length = buffer.length
            const bufferArray = new Uint8Array(length)
            // 3.4 给新开辟的bufferArray赋值
            while (length--) {
              bufferArray[length] = buffer.charCodeAt(length)
            }
            // 3.5将压缩后的文件通过resolve返回出去
            const resultFile = new File([bufferArray], file.name, { type: file.type })
            console.log(resultFile)
            resolve(resultFile)
          }
        }
      })
    }