持续更新

实现下载文件

• window.open()可以实现
• js动态创建a标签，并且插入到文档中，模拟点击实现下载
• 动态创建表单提交下载

html 转图片

• 使用html2canvas插件

解决图片跨域

var c = document.querySelector('#myCanvas')
var ctx = c.getContext('2d') // 绘制图片

var img = new Image()
img.crossOrigin = 'anonymous' // 防止跨域出错
img.src =
  'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=684045785,4210542258&fm=11&gp=0.jpg'
img.onload = function() {
  ctx.drawImage(
    img,
    200,
    0,
    img.width,
    img.height,
    500,
    300,
    img.width,
    img.height
  )
}

图片转 base64

function image2Base64(url, disc = 'base64.txt') {
  const fs = require('fs')
  const path = require('path')
  const imageData = fs.readFileSync(path.resolve(__dirname, url))
  if (!imageData) return
  let ext = path.extname(path.resolve(__dirname, url))
  if (ext.startsWith('.')) {
    ext = ext.slice(1)
  }
  const bufferData = Buffer.from(imageData).toString('base64')
  const base64 = `data:image/${ext};base64,${bufferData}`
  fs.writeFileSync(path.resolve(__dirname, disc), base64)
  return base64
}

image2Base64('./docs/.vuepress/public/home.png')

图片压缩

• 通过原生的 input 标签拿到要上传的图片文件
• 将图片文件转化成 img 元素标签
• 在 canvas 上压缩绘制该 HTMLImageElement
• 将 canvas 绘制的图像转成 blob 文件
• 最后将该 blob 文件传到服务端

<input
  type="file"
  name="img"
  id="image"
  accept="image/*"
  onchange="upload(event)"
/>

function upload(event) {
  let files = event.target.files
  let file = files[0]
  readImage(file)
    .then((img) => compressImage(img, 300, 300))
    .then((res) => {
      console.log('res', res)
      // do something
    })
}
function readImage(file) {
  return new Promise((resolve, reject) => {
    let img = new Image()
    let reader = new FileReader() // 读取文件资源
    reader.readAsDataURL(file)
    reader.onload = function(e) {
      img.src = e.target.result
    }
    reader.onerror = function(err) {
      reject(err)
    }
    img.onload = function(e) {
      resolve(img)
    }
    img.onerror = function(err) {
      reject(err)
    }
  })
}
function compressImage(img, w = 1920, h = 1080, type = 'image/png') {
  return new Promise((resolve, reject) => {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    const { width, height } = img
    let ratioW = w / width
    let ratioH = h / height
    // 计算比例
    if (ratioW > ratioH) {
      // 宽图片
      h = Math.round(ratioW * height)
    } else {
      // 高图片
      w = Math.round(ratioH * width)
    }
    canvas.width = w
    canvas.height = h
    ctx.clearRect(0, 0, w, h) // 清屏
    ctx.drawImage(img, 0, 0, w, h) // 绘制图片
    canvas.toBlob(function(blob) { // 转为二进制
      resolve(blob)
    }, type)
  })
}