zoukankan      html  css  js  c++  java
  • H5图片上传压缩

    dataURLtoFile(dataurl, filename) { // 将base64转换为file文件
      let arr = dataurl.split(",")
      let mime = arr[0].match(/:(.*?);/)[1]
      let bstr = atob(arr[1])
      let n = bstr.length
      let u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, {type: mime})
    }
    afterRead(file) {
      if (file.file.size > 3145728) {
        console.log("压缩了")
        let canvas = document.createElement("canvas") // 创建Canvas对象(画布)
        let context = canvas.getContext("2d")
        let img = new Image()
        img.src = file.content // 指定图片的DataURL(图片的base64编码数据)
        img.onload = () => {
          canvas.width = img.width / 2;//画布宽度
          canvas.height = img.height / 2;//画布高度
          context.drawImage(img, 0, 0, canvas.width, canvas.height)
          file.content = canvas.toDataURL(file.file.type, 0.92) // 0.92为默认压缩质量
          let files = this.dataURLtoFile(file.content, file.file.name)
          const data = new FormData()
          data.append("fileList", files)
          this.imgUploader(data);// 上传方法,此时已经压缩完成
        }
      } else { // 小于3M直接上传
        const data = new FormData()
        data.append("fileList", file.file);
        this.imgUploader(data);
      }
    },
  • 相关阅读:
    SQL*Loader-951错误
    excel导出
    zookeeper常见bug
    可编辑表格
    tree的应用
    join
    hibernate manytomany 双向
    hibernate 多对多 单向关联
    hibernate 一对多(多对一)双向
    hibernate one2many
  • 原文地址:https://www.cnblogs.com/yixiancheng/p/13273711.html
Copyright © 2011-2022 走看看