前端canvas压缩图片

canvas除了用来画图形外，还有另一个妙用，就是可以用来压缩图片。

首先需要input file标签，同时设置为只能选择图片类型

<!-- html结构可以自定义，核心压缩代码不涉及html限制-->
<div class="m-form">
    <div class="picBox">
    <div class="upload">
        <label for="uploadPic">
        <i></i>
        <p>点击上传图片</p>
        <input type="file" id="uploadPic" class="file js-uploadfile" accept="image/png, image/jpeg, image/gif, image/jpg">
        </label>
    </div>
    <!-- 上传后图片显示结构 -->
    <!-- <div class="pic">
        <div class="con">
            <a href="javascript:void(0);" class="btn"></a>
            <img src="" alt="">
        </div>
        <input type="hidden" class="data" value="">
        </div> -->
    </div>
</div>

其次，是js

//上传图片
function uploadFile(){
    var reader=new FileReader();
    var img = new Image();
    // 选择的文件对象
    var file = null;
    // 缩放图片需要的canvas
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    // 文件base64化，以便获知图片原始尺寸
    reader.onload = function(e) {
        img.src = e.target.result;
    };
    $(".js-uploadfile").change(function(event) {
        file=$(this).get(0).files[0];
        // 选择的文件是图片，在html上直接限制比较方便
        reader.readAsDataURL(file);
    });
    // base64地址图片加载完毕后
    img.onload = function () {
        // 图片原始尺寸
        var originWidth = this.width;
        var originHeight = this.height;
        // 最大尺寸限制
        var maxWidth = 750;
        // 目标尺寸
        var targetWidth = originWidth,targetHeight = originHeight;;
        // 图片尺寸超过750的限制
        if (originWidth > maxWidth) {
            targetWidth = maxWidth;
            targetHeight = Math.round(maxWidth * (originHeight / originWidth));
        }
                    
        // canvas对图片进行缩放
        canvas.width = targetWidth;
        canvas.height = targetHeight;
        // 清除画布
        context.clearRect(0, 0, targetWidth, targetHeight);
        // 图片压缩
        context.drawImage(img, 0, 0, targetWidth, targetHeight);
        // canvas转为dataUrl并上传
        var dataURL=canvas.toDataURL(file.type || 'image/png');//设置为原图片格式或者png
        var html='<div class="pic">'+
                '<div class="con">'+
                '<a href="javascript:void(0);" class="btn"></a>'+
                '<img src="'+dataURL+'" alt="">'+
                '</div>'+
                '<input type="hidden" class="data" value="'+dataURL+'">'+
             '</div>';
        console.log(dataURL);
        $(".m-form .picBox").append(html);
        $(".js-uploadfile").val("");
    };
}