Canvas与图片压缩的示例代码

之前写过一篇有关Canvas图片处理的文章，今天我们讲讲如何使用Canvas来压缩图片。

Canvas图片压缩流程

接下来我将以具体实例为大家讲解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 rate = document.getElementById("rate").value || 100;
       // 输入图片压缩比率，默认为100%var imgUrl = canvas.toDataURL(file.type,rate/100);
       // 第一个参数为输出图片类型，第二个为压缩比result.innerHTML = '压缩后：img src="'+ imgUrl +'" />
    ';
         // 将压缩后的图片置于result中显示img.style.display = 'none';
       // 将原始图片隐藏

将在Canvas画布中所绘制的图片再次以base64格式输出。

四、完整代码展示

!--HTML-->
    图片压缩比率 : input id="rate" type="number" min="0" max="100" />
     %input type="file" id="choose-img" />
    div id="result">
    /div>
    

// 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压缩效果不明显，有时反而变得更大。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

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