多文件上传预览，canvas压缩处理

最新推荐文章于 2022-11-04 22:32:12 发布

没有名字o_o

最新推荐文章于 2022-11-04 22:32:12 发布

阅读量478

点赞数

分类专栏： html5 文件上传压缩文章标签：压缩 canvas 上传

本文链接：https://blog.csdn.net/liujinahui/article/details/49445491

版权

html5 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

文件上传压缩

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content=""/>
    <meta name="Description" content=""/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="shortcut icon" href="favicon.ico">
    <title></title>
</head>
<body>
<input type="file" id="fileImg" multiple="multiple">
<div></div>
<script src="zip.js"></script>
<script src="zepto.min.js"></script>
<script>

    function handleFileSelect (evt) {
//        文件列表
        var files = evt.target.files, f,i=0;
        var t = setInterval(function(){
           if(i<files.length){
               f=files[i];
               // Only process image files.
               var reader = new FileReader();
               reader.onload = (function(theFile) {
                   return function(e) {
                       var imgE = new Image();
//                     compress 压缩
//                       设置压缩品质，
                       var quality =  80;
                       imgE.src = event.target.result;
                       imgE.src =  jic.compress(imgE,quality,'').src;
//                                               可以设置大小，默认值是原始图片的大小，高度自适应
                       imgE.style.width = imgE.style.width + 'px';
                       $('div').append(imgE)
                   };
               })(f);
               // Read in the image file as a data URL.
               reader.readAsDataURL(f);
               i++;
           } else{
               clearInterval(t)
           }
        },1)

    }

    document.getElementById('fileImg').addEventListener('change', handleFileSelect, false);
</script>

</body>
</html>

下面是zip.js的内容

/**
 * Created by chk on 2015/10/26.
 */
var jic = {
        /**
         * Receives an Image Object (can be JPG OR PNG) and returns a new Image Object compressed
         * @param {Image} source_img_obj The source Image Object
         * @param {Integer} quality The output quality of Image Object
         * @return {Image} result_image_obj The compressed Image Object
         */

        compress: function(source_img_obj, quality, output_format){

            var mime_type = "image/jpeg";
            if(output_format!=undefined && output_format=="png"){
                mime_type = "image/png";
            }


            var cvs = document.createElement('canvas');
            //naturalWidth真实图片的宽度
            cvs.width = source_img_obj.naturalWidth;
            cvs.height = source_img_obj.naturalHeight;
            var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
            var newImageData = cvs.toDataURL(mime_type, quality/100);
            var result_image_obj = new Image();
            result_image_obj.src = newImageData;
            return result_image_obj;
        }
}

对于<input type = 'file'>的美化，可以像这样

<div onclick="file.click()">点我选择图片上传预览</div>
<input type = 'file' id='file'>

对于文件中引入的zepto.js,注意要引入

没有名字o_o

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多文件上传预览，canvas压缩处理

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Keywords" content=""/> <meta name="Description" content=""/> <meta name="viewport" content="width=de
复制链接

扫一扫

专栏目录