zoukankan      html  css  js  c++  java
  • 前端压缩图片记录一下

     1 function canvasDataURL(file, callback) {
     2         //图片压缩  仅支持jpg jpeg bmp图片格式 不支持png 
     3         var reader = new FileReader()
     4         reader.readAsDataURL(file)
     5         reader.onload = function (e) {
     6             const img = new Image()
     7             var isLt1M = file.size / 1024 / 1024;
     8           
     9             if (isLt1M >= 1) {
    10                 var quality = 0.2// 图像质量
    11             } else if (isLt1M >= 0.48 && isLt1M < 1) {
    12                 var quality = 0.4 // 图像质量
    13             } else {
    14                 var quality = 0.7 // 图像质量
    15             }          
    16             const canvas = document.createElement('canvas')
    17             const drawer = canvas.getContext('2d')
    18             img.src = this.result
    19             img.onload = function () {
    20                 canvas.width = img.width
    21                 canvas.height = img.height
    22                 drawer.drawImage(img, 0, 0, canvas.width, canvas.height)
    23                 convertBase64UrlToBlob(canvas.toDataURL(file.type, quality), callback);
    24             }
    25         }
    26     }
    27 
    28   function  convertBase64UrlToBlob(urlData, callback) {
    29         const arr = urlData.split(',')
    30         const mime = arr[0].match(/:(.*?);/)[1]
    31         const bstr = atob(arr[1])
    32         let n = bstr.length
    33         const u8arr = new Uint8Array(n)
    34         while (n--) {
    35             u8arr[n] = bstr.charCodeAt(n)
    36         }
    37         callback(new Blob([u8arr], {
    38             type: mime
    39         }));
    40     }
    41 //使用方法
    42 canvasDataURL(file,function (blob) {
    43     var aafile = new File([blob], file.name, {
    44         type: file.type
    45      })
    46         
    47 })
  • 相关阅读:
    WinDbg符号表设置的基础
    Mysql的用户管理与授权
    Django的models由数据库表生成
    Spring框架第一天(搭建项目)
    Python中的参数
    Java集合
    Mysql的锁
    # django通过操作admin对原有的数据库进行操作
    数据库连接池与SQL工具类
    MySql的事务及数据的导入导出
  • 原文地址:https://www.cnblogs.com/dawnzhao/p/13814566.html
Copyright © 2011-2022 走看看