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 })
  • 相关阅读:
    Android_程序未处理异常的捕获与处理
    instanceof关键字
    乐优商城项目爬坑
    [LeetCode]Isomorphic Strings
    [LeetCode]Contains Duplicate II
    [LeetCode]Valid Sudoku
    [LeetCode]Valid Anagram
    [LeetCode]Contains Duplicate
    [LeetCode]Single Number
    [LeetCode]Valid Number
  • 原文地址:https://www.cnblogs.com/dawnzhao/p/13814566.html
Copyright © 2011-2022 走看看