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实现多背景展示效果通过CSS3定位多张背景
Aug 10 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
CSS3实现的炫酷菜单代码分享
Mar 12 HTML / CSS
css3 media 响应式布局的简单实例
Aug 03 HTML / CSS
HTML5 本地存储 LocalStorage详解
Jun 24 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 HTML / CSS
HTML5移动端手机网站开发流程
Apr 25 HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 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在线生成ico文件的代码
2007/10/09 PHP
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
20个最新的jQuery插件
2012/01/13 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
深入理解Python中的元类(metaclass)
2015/02/14 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
python中的global关键字的使用方法
2019/08/20 Python
Python实现把类当做字典来访问
2019/12/16 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
序列化Python对象的方法
2020/08/01 Python
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
数控加工专业毕业生自荐信
2013/09/27 职场文书
应聘教师自荐信
2013/10/12 职场文书
医院护士的求职信
2014/01/03 职场文书
李培根演讲稿
2014/05/22 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
大学校园招聘会感想
2015/08/10 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
mysql查找连续出现n次以上的数字
2022/05/11 MySQL
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android