大家百度搜索“canvas图片压缩”相信很多结果可以被搜索出来，但是有没有仔细去发现这些代码都是出自一人之手，所以即使错误了也都错的一样！

互联网垃圾信息太多了，我今天刚好做到手机端一个活动，需要用户上传照片，但是又不能控制用户上传图片的大小，如果控制了，那么对用户体验太差，如果不控制，那么上传速度慢体验一样很差，所以就考虑用canvas把即将上传的图片先压缩为64位编码后再以文本方式保存到数据库，这样就速度多了。。。！

百度了一下这个canvas压缩图片的方法，结果都是一样的，关键是没几个能调通的，竟然还有把javascript的标签类型写成“javascript/text”的，一气之下我觉得自己根据网上的思路自己整理一个(支持PC端、手机端)，小编很辛苦，希望大家分享的时候注明来源，谢谢！

如果遇到了IE，那么大家网上搜索下excanvas.js这个文件，引入这个文件后你的canvas就可以正常工作了。

HTML代码：

<input type="file" value="" onchange="fileChange(this)"/>
<img src="" alt="图片压缩后的64位编码" >

JS代码：

页面引入    src="//cdn.bootcss.com/jquery/1.9.0/jquery.min.js"

    function fileChange(e){
        var f = e.files[0];//一次只上传1个文件，其实可以上传多个的
        var FR = new FileReader();
        FR.readAsDataURL(f);
        FR.onload = function(f){
            compressImg(this.result,200,function(data){
                $("#newImg").attr("src",data);//保存图片压缩后的64位编码
            });
        };
    }
    
    function compressImg(imgData,maxHeight,onCompress){
        if(!imgData)return false;
        onCompress = onCompress || function(){};
        maxHeight = maxHeight || 800;//默认最大高度800px
        var canvas = document.createElement(canvas);
        var img = new Image();
            img.src = imgData;
            
        img.onload = function(){
            if(img.height > maxHeight) {//按最大高度等比缩放
                img.width *= maxHeight / img.height;
                img.height = maxHeight;
            }
            
            var ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);
            onCompress(canvas.toDataURL("image/jpeg"));
        };
    }

更多详情: