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 })
  • 相关阅读:
    Python3-元组
    Python3-列表
    Python3-字符串
    Python3-for循环机制
    Python3-初识
    优先队列——priority queue
    单调队列 —— 滑动窗口
    SDNU_ACM_ICPC_2021_Winter_Practice_7th [个人赛]
    博弈论入门(论和威佐夫、巴什、尼姆打牌被吊打是什么感受(╥﹏╥)
    字符串最大最小表示法
  • 原文地址:https://www.cnblogs.com/dawnzhao/p/13814566.html
Copyright © 2011-2022 走看看