Canvas与图片压缩的示例代码

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2020年10月4日23:13:47 评论 9 views 2703字阅读9分0秒

canvas 元素用于在网页上绘制图形。HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像。在矩形区域的画布上,JavaScript 绘制 2D图形,逐像素进行渲染,可以通过多种方法使用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-->
<p id="result"></p>

// 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" />
<p id="result"></p>

// 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实现小球和鼠标的互动

怎样用canvas做出粒子喷泉动画的效果

HTML5里Canvas常用的绘图技巧

canvas制作鼠标拖动绘制图形

实例详解html5使用canvas实现图片下载功能

以上就是Canvas与图片压缩的示例代码的详细内容,更多请关注php教程网其它相关文章!

继续阅读
canvas 动态图表 H5教程

canvas 动态图表

前言 canvas 强大的功能让它成为了 HTML5 中非常重要的部分,至于它是什么,这里就不需要我多作介绍了。而可视化图表,则是 canvas 强大功能的表现之一。 现在已经有了很多成熟的图表插件都...
PHP的两个代码 php教程

PHP的两个代码

这篇文章介绍的内容是关于PHP中的几个代码,有着一定的参考价值,有需要的朋友可以参考一下 <?php namespace Math {   class Complex   {    //...c...
在Canvas中如何实现自定义路径动画? html教程

在Canvas中如何实现自定义路径动画?

这次给大家带来在Canvas中如何实现自定义路径动画?,Canvas实现自定义路径动画的注意事项有哪些,下面就是实战案例,一起来看一下。 在最近的项目中笔者需要做一个新需求:在canvas中实现自定义...
利用HTML5中的Canvas绘制笑脸的代码 H5教程

利用HTML5中的Canvas绘制笑脸的代码

这篇文章主要介绍了利用HTML5中的Canvas绘制一张笑脸的教程,使用Canvas进行绘图是HTML5中的基本功能,需要的朋友可以参考下 今天,你将学习一项称为Canvas(画布)的web技术,以及...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: