网页制作

Canvas与图片压缩的示例代码
网页制作 2024/11/15 佚名
3 2

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

Canvas图片压缩流程

Canvas与图片压缩的示例代码

接下来我将以具体实例为大家讲解Canvas图片压缩的具体流程。

一、本地图片输入

1. 获取本地文件

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

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

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

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

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

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

标签：
Canvas图片压缩,Canvas压缩
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com

评论“Canvas与图片压缩的示例代码”

暂无“Canvas与图片压缩的示例代码”评论...
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com