• JS webAPP图片压缩


    逻辑大概:

    1. 取到input type="file" 文件流 ( onchange事件内会返回 )  

    2.然后使用     new FileReader()     对象的   readAsDataURL(file)    方法把文件流转换成base64格式  

    3.最后使用canvas里面的方法进行压缩 (压缩完会返回一个base64格式图片)

     1 //获取input
     2 let dom = document.getElementById('test-input')
     3 //绑定onchange事件
     4     dom.onchange = function(event) {
     5         //在选择文件之后触发该方法,获取到文件流变量,数组类型
     6         var files = event.target.files
     7     }
     8 
     9 //比如只需要第一张图片
    10 var singleFile = files[0]
    11 
    12 //转码 使用 FileReader
    13 var reader = new FileReader();
    14 
    15 //singleFile单个文件流作为参数传入进行解析
    16 reader.readAsDataURL(singleFile)
    17 
    18 //reader在onload事件里就会返回解析后的base64格式
    19 reader.onload = function(){
    20     var resBase64 = this.result;
    21 }
    22 
    23 //接下来就是通过canvas来解析了
    24 //首先得创建一个image对象存放之前解析的base64
    25 var img = new image();
    26 img.src = resBase64
    27 img.onload = function() {
    28     //在确保img加载完成后执行代码
    29     //创建一个canvas和画布
    30     var canvas = document.createElement('canvas')
    31     var ctx = canvas.getContext('2d')
    32     //重新计算图片的宽度高度分辨率
    33     //因为img加载完成,所以可以直接获取到原始的图片宽高
    34     var wid = this.width
    35     var hei = this.height 
    36     //计算他的比例
    37     var rate = wid/hei
    38     //因为拍摄的图片比较大,所以需要按比例进行缩小
    39     //我这里给定了,让他的宽为700,
    40     wid = 700
    41     hei = 700 / rate
    42    //然后给canvas的宽高赋计算后的值
    43     canvas.width = wid
    44     canvas.height = hei
    45    //开始画
    46     ctx.drawImage(this, 0, 0, wid, hei);
    47 
    48    
    49     var quality = 1 //值越小越模糊
    50      //生成base64
    51     var calBase64 = canvas.toDataURL('image/jpeg', quality);
    52 }
  • 相关阅读:
    【并查集】连接格点C++
    【拓扑排序】威虎山上的分配C++
    CF39D Cubical PlanetC++
    【拓扑排序】排队C++
    [USACO09OCT]Invasion of the Milkweed】乳草的侵占C++
    免杀常用手段
    DELPHI 线程类
    动态注册OCX
    DELPHI 常用文件路径
    套接字(TCP)
  • 原文地址:https://www.cnblogs.com/gosh-hash/p/10537652.html
Copyright © 2020-2023  润新知