多文件压缩上传，本地预览 canvas

最新推荐文章于 2022-04-26 20:53:25 发布

原创最新推荐文章于 2022-04-26 20:53:25 发布 · 314 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用HTML5 Canvas进行图片压缩的方法。通过将图片绘制到Canvas上并利用toDataURL方法，可以有效地减小图片文件的大小。适用于前端开发中图片上传前的预处理。

先看一个小小的视图：

这里写图片描述

思路：canvas压缩

将图片样式抽象显示在 canvas上，然后通过 canvas.toDataURL方法得到base64字符串来实现压缩。

<form>
        <p class="updataImg">
            <span>上传图片：</span>
            <!-- onchange="handleFiles(this)" -->
            <input type="file" id="fileElem" multiple  accept="image/*"  capture="camera">  
        </p>  
        <div class="countBox">
            <span>已成功上传：</span>
            <span class="count">0</span>
            <span>张图片</span>
        </div>
        <div id="fileList"></div>
        <input type="button" value="提交">
   </form>
   <div class="mengban">
       <div>
           <p>提示</p>
           <p>抱歉，只允许上传5张图片</p>
       </div>
   </div>

var fileInput = document.getElementById('fileElem');
var fileList = $("#fileList");
var count = 0;
function convertImgToBase64(url, callback, outputFormat){ 
        var size = fileInput.files[0].size;     //获取图片大小
        var cutRate = 1;
        if( size > 300*1024){   //判断图片大小大于300K，压缩；否则不压缩
            cutRate = size/(300*1024);
        }
        var canvas = document.createElement('CANVAS'); 
            var ctx = canvas.getContext('2d'); 
            var img = new Image; 
            img.crossOrigin = 'Anonymous'; 
            img.onload = function(){
                var width = img.width;
                var height = img.height;
                // 按比例压缩4倍
                var rate = (width<height ? width/height : height/width) / cutRate;
                    canvas.width = width*rate; 
                    canvas.height = height*rate; 
                    ctx.drawImage(img,0,0,width,height,0,0,width*rate,height*rate); 
                var dataURL = canvas.toDataURL(outputFormat || 'image/png'); 
                    callback.call(this, dataURL); 
                    canvas = null; 
            };
            img.src = url; 
      }
function getObjectURL(file) {
    var url = null ; 
    if (window.createObjectURL!=undefined) {  // basic
        url = window.createObjectURL(file) ;
    } else if (window.URL!=undefined) {       // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
    } else if (window.webkitURL!=undefined) { // web_kit or chrome
        url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
}
//上传图片
$('#fileElem').bind('change',function(event){
    var image = new Image();
    var imageUrl = getObjectURL($(this)[0].files[0]);
    convertImgToBase64(imageUrl, function(base64Img){
        // base64Img为转好的base64,放在img src直接前台展示(<img src="https://img-blog.csdnimg.cn/2022010611241234619.jpg" />)
        // base64转图片不需要base64的前缀data:image/jpg;base64          console.log(base64Img.split(",")[1]);   
        if( count < 5){
            image.src = base64Img; //创建一个object URL，并不是你的本地路径
            image.width = 100;
            image.height = 100;
            fileList.append(image); 
                $('.count').text(count+1);
            }else{
                $('.mengban').show();
                setTimeout(function(){
                    $('.mengban').hide();
                },2000);
            }
            count++;
    });
    event.preventDefault(); 
});

不压缩的本地预览：

window.URL = window.URL || window.webkitURL;
var fileElem = $("#fileElem"),
    fileList = $("#fileList"),
    count = 0;
        function handleFiles(obj) {
            var files = obj.files,
                img = new Image();
            if(window.URL){
                //File API
                img.src = window.URL.createObjectURL(files[0]); //创建一个object URL，并不是你的本地路径
                img.width = 100;
                img.height = 100;
                img.onload = function(e) {
                    window.URL.revokeObjectURL(this.src); //图片加载后，释放object URL
                }
                if( count < 5){
                    fileList.append(img); 
                    $('.count').text(count+1);
                }else{
                    $('.mengban').show();
                    setTimeout(function(){
                        $('.mengban').hide();
                    },2000);
                }
                count++;
            }   
        }