相关关键词
关于我们
最新文章
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