zoukankan      html  css  js  c++  java
  • 前端进行图片压缩

    无意中看到html5的FileRader这个对象,之前没见过,查阅了下资料发现是个读取文件的东西。于是简单实现了下将图片转换成编码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <input id="file" type="file"></input>
        <div id="result"></div>
    
        <script>
            var file = document.getElementById('file'),
                result = document.getElementById('result');
    
    
            file.onchange = function(){
                if(!this.files.length) return;
    
                var files = Array.prototype.slice.call(this.files);
    
                if(files.length >= 9){
                    alert('最多只能上传9张图片');
                    return;
                }
                
                files.forEach(function(file,i){
                    if(!/(jpeg|png|gif|icon)$/i.test(file.type)) return;
    
                    var reader = new FileReader();
                    reader.readAsDataURL(file);//将文件读取为DataURL
                    reader.onload = function(){
                        var r = this.result;
                        result.innerHTML = r;
    
                        var img = document.createElement('img');
                        img.src = r;
                        img.width = 200;
                        img.height = 120;
    
                        document.body.appendChild(img);
                    }
    
                });
            }
    
        </script>
    </body>
    </html>
  • 相关阅读:
    Source Insight新建工程文件
    移植3.4.2内核之韦东山笔记
    移植最新u-boot(裁剪和修改默认参数)
    C++与C语言在结构体上的区别
    VIP之Switch
    VIP之CSC
    VIP之Scaler
    VIP之FrameBuffer
    VIP之MixerII
    VIP之Clipper
  • 原文地址:https://www.cnblogs.com/11lang/p/6852562.html
Copyright © 2011-2022 走看看