Canvas与图片压缩的示例代码


Posted in HTML / CSS onNovember 28, 2017

之前写过一篇有关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压缩效果不明显,有时反而变得更大。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3背景_动力节点Java学院整理
Jul 11 HTML / CSS
利用css3 translate完美实现表头固定效果
Feb 28 HTML / CSS
CSS3等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
一款纯css3实现的鼠标经过按钮特效教程
Nov 09 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 HTML / CSS
浅析HTML5 Landmark
Sep 11 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 #HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 #HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 #HTML / CSS
HTML5响应式(自适应)网页设计的实现
Nov 17 #HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 #HTML / CSS
html5实现移动端适配完美写法
Nov 16 #HTML / CSS
关于h5中的fetch方法解读(小结)
Nov 15 #HTML / CSS
You might like
修改了一个很不错的php验证码(支持中文)
2007/02/14 PHP
php 生成随机验证码图片代码
2010/02/08 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
vue axios用法教程详解
2017/07/23 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
python开发之字符串string操作方法实例详解
2015/11/12 Python
Python实现的knn算法示例
2018/06/14 Python
python爬虫实例详解
2018/06/19 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
python中栈的原理及实现方法示例
2019/11/27 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
客房主管岗位职责
2013/12/09 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
个人租房协议书样本
2014/10/01 职场文书
企业年检委托书范本
2014/10/14 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis