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

来源：互联网发布：最小的linux 编辑：程序博客网时间：2024/05/21 21:45

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

$(':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 实现上传。

本文转载自深圳市乐道网络科技(www.ledaokj.com) 详文参考：http://www.ledaokj.com/a-wlyx/176/718.html

0 0