News新闻

业界新闻动态、技术前沿
Who are we?

您的位置:首页      乐道系统FAQ      HTML5+Canvas实现本地压缩上传图片功能

HTML5+Canvas实现本地压缩上传图片功能

发布日期:2014-05-06 21:15:00 6975

很多网站客户在上传产品的时候,对图片大小没概念,一张图片4-5兆也直接往上传,所以现在想让图片在本地压缩后再上传到网站上去。网上找的相关程序,程序源码如下:

<script type="javascript/text">

$(':file').on('change',function(){
        var file = this.files[0];
        var url = webkitURL.createObjectURL(file);

        /* 生成图片
        * ---------------------- */
        var $img = new Image();
        $img.onload = function() {

            //生成比例
            var width = $img.width,
                    height = $img.height,
                    scale = width / height;
            width = parseInt(800);
            height = parseInt(width / scale);

            //生成canvas
            var $canvas = $('#canvas');
            var ctx = $canvas[0].getContext('2d');
            $canvas.attr({width : width, height : height});
            ctx.drawImage($img, 0, 0, width, height);
            var base64 = $canvas[0].toDataURL('image/jpeg',0.5);

            //发送到服务端
            $.post('upload.php',{formFile : base64.substr(22) },function(data){
                $('#php').html(data);
            });

        }
        $img.src = url;

    });

</script>

检查文件上传表单域,如果选择了文件则自动进行压缩, upload.php 实现上传。

可用其他办法

javascript编译jpg插件:javascript_jpeg_encoder