怎么用Canvas压缩图片

一、本地图片输入

1. 获取本地文件

!--HTML-->
    input tyPE="file" id="choose-img" />
    

// JSVAR chooseimg = document.getElementById("choose-img");
chooseImg.onchange = function(e){
        var file = this.files[0];
    // ……  （省略部分代码后续依次展示，下同）}
    ;
    

很简单，就是通过type类型为file的按钮来获取本地文件。

2. 判断所获取的本地文件类型

!--HTML-->
    div id="result">
    /div>
    

// JSvar result = document.getElementById("result");
    // 用于显示图片输出结果，或者错误提示if(/image/.test(file.type)){
     // 判断文件类型是否为图片    // ……}
else{
        result.innerHTML = 'span style="color: red;
    ">
    文件类型有误！/span>
    ';
}
    

3. 将所获取的本地图片以base64格式输出

var img = new Image(),      // 创建图片对象，用于放置原始图片    reader = new FileReader();
    reader.readAsDataURL(file);
    // 以base64格式读取并存入FileReader对象的result属性中reader.onload = function(){
        img.src = this.result;
       // 将图片base64字符串直接赋予Image对象的src中    document.body.insertBefore(img,chooseImg);
   // 将输出的图片插入到文件按钮之前    img.onload = function(){
        // ……    }
    ;
}
    ;
    

二、在Canvas画布中绘制图片

1. 创建画布

var canvas = document.createElement('canvas');
    canvas.width = img.clientWidth;
    canvas.height = img.clientHeight;
    var context = canvas.getContext('2d');
    

注意：画布大小与所输入图片宽高相同。

2. 绘制图片

context.drawImage(img,0,0,canvas.width,canvas.height);
    

三、压缩图片并输出

!--HTML-->
    图片压缩比率 : input id="rate" type="number" min="0" max="100" />
     %// JSvar chooseImg = document.getElementById("choose-img"),    result = document.getElementById("result");
chooseImg.onchange = function(e){
        var file = this.files[0];
    if(/image/.test(file.type)){
            var img = new Image(),            reader = new FileReader();
            reader.readAsDataURL(file);
        reader.onload = function(){
                img.src = this.result;
                document.body.insertBefore(img,chooseImg);
            img.onload = function(){
                    var canvas = document.createElement('canvas');
                    canvas.width = img.clientWidth;
                    canvas.height = img.clientHeight;
                    var context = canvas.getContext('2d');
                    context.drawImage(img,0,0,canvas.width,canvas.height);
                    var rate = document.getElementById("rate").value || 100;
                    var imgUrl = canvas.toDataURL(file.type,rate/100);
                    result.innerHTML = '压缩后：img src="'+ imgUrl +'" />
    ';
                    result.style.display = 'block';
                    img.style.display = 'none';
            }
    ;
        }
    ;
    }
    else{
            result.innerHTML = 'span style="color: red;
    ">
    文件类型有误！/span>
    ';
    }
}
    ;
    

经测试发现，通过Canvas压缩JPEG格式图片效果最佳，PNG压缩效果不明显，有时反而变得更大。

相信看了这些案例你已经掌握了方法，更多精彩请关注其它相关文章！

相关阅读：

H5的块级标签汇总

H5的进阶段内联标签

怎样使用H5调用摄像头

以上就是怎么用Canvas压缩图片的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！