井井客

搜索

自制canvas压缩图片对比效果

前几天弄的一个简易版,稍微抽了点时间写成对象了。效果就基本就是下面这样,左边是原图,右边是按比例压缩的结果,可以通过range对压缩比率进行调整。

自制canvas压缩图片对比效果

预览地址:http://jingjingke.com/web/canvas-compress.html

使用时需要在本地上传一张图片,然后拖动那个方块按钮,会在图片质量0-1之间的范围内进行重绘canvas。

代码如下:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <style>
            .inputs { width: 300px; display: block; margin:0 auto; overflow: hidden;}
            .inputs input[type='file'] { float: left; width: 200px;}
            .inputs input[type='range'] { float: right; width: 80px;}
            #canvas { display: block; margin:20px auto; border: 3px solid #ccc;}
        </style>
    </head>
    <body>
        <div class="inputs">
            <h1>canvas压缩图片</h1>
            <input type="file" id="file" />
            <input type="range" min="0" max="1" step="0.02" value="1" id="range" />
        </div>
        <canvas id="canvas" >您的浏览器不支持canvas!</canvas>
        <script>
            var compressImage = {
                // 获取到相关的DOM节点
                file:    document.getElementById('file'),
                canvas:  document.getElementById('canvas'),
                range:   document.getElementById('range'),
                ctx:     document.getElementById('canvas').getContext('2d'),
                // 新旧值用于监听后期rang-mousemove事件rang值是否有变化
                newValue:  1,
                oldValue:  1,
                // 两个image对象-img为上传图片的base64,newImg则是canvas-toDataURL获得的base64
                img:     new Image(),
                newImg:  new Image(),
                // 新建一个canvas,上传的原始图进行绘制,专用于toDataURL
                newCanvas:'',
                // 保存getImageData截图(原始图)
                imgData: '',
                // 核心执行函数
                go:      function(){
                    // 上传文件时触发change事件
                    this.file.onchange = function(e){
                        // 判断是否支持FileReader以及是否有文件
                        if(typeof FileReader != 'undefined' && typeof this.file.files != 'undefined'){
                            // 判断上传的文件是否为图片
                            if(/^image\//.test(this.file.files[0].type)){
                                // 利用reader获取到上传图片的base64码
                                var reader = new FileReader();
                                reader.readAsDataURL(this.file.files[0]);
                                // 准备就绪
                                reader.onload = function(){
                                    // 将base64赋值给img
                                    this.img.src = reader.result;
                                    // 图片加载完成
                                    this.img.onload = function(){
                                        // 创建一个新的canvas节点并将图像绘制上去--用于后期调整图片质量
                                        this.newCanvas = document.createElement('canvas');
                                        this.newCanvas.width = this.img.width;
                                        this.newCanvas.height = this.img.height;
                                        var newCanvasCtx = this.newCanvas.getContext('2d');
                                        newCanvasCtx.drawImage(this.img,0,0,this.img.width,this.img.height);
                                        // 在真实canvasDOM节点上进行操作
                                        this.canvas.width = this.img.width*2;
                                        this.canvas.height = this.img.height;
                                        // 从newCanvas获取到原始图并绘制到canvas中
                                        this.ctx.putImageData(newCanvasCtx.getImageData(0,0,this.img.width,this.img.height),0,0);
                                        // 加载右半边压缩图片
                                        this.imgLoad(this.range.value);
                                        // 监听range的mousemove事件
                                        this.range.onmousemove = function(){
                                            // 获取当前range值
                                            this.newValue = this.range.value;
                                            // 对比range值是否有变化
                                            if(this.newValue !== this.oldValue){
                                                this.oldValue = this.newValue;
                                                this.imgLoad(this.newValue)
                                            }
                                        }.bind(this)
                                    }.bind(this)
                                }.bind(this)
                            }else{
                                alert('请选择正确的图片文件!');
                            }
                        }else{
                            alert('你的浏览器不支持该功能');
                        }
                    }.bind(this)
                },
                // 根据参数调整toDataURL图像质量并将图绘制到canvas右半边
                imgLoad:function(comVal){
                    // 根据传入的值执行toDataURL然后获取到压缩的base64
                    this.newImg.src = this.newCanvas.toDataURL('image/jpeg',Number(comVal));
                    // 载入新图像后
                    this.newImg.onload = function(){
                        this.ctx.drawImage(this.newImg,this.img.width,0,this.img.width,this.img.height);
                    }.bind(this)
                }
            }
            // 执行
            compressImage.go()
        </script>
    </body>
</html>

前几天有点事都不在电脑边,这还是上星期来了想法写的一个canvas压缩图片的效果。(2017.09.15)注释已经补上了,我自己感觉已经比较详细了。

另外上面主要用到的就是drawImage()、getImageData()、putImageData()、toDataURL(),有兴趣的童鞋可以去看看canvas的这几个方法。

同时有不好的地方欢迎大家拍砖~

文章TAG:js

作者:井井客原创来源:原创
本文标题:自制canvas压缩图片对比效果
本文链接:/c/13300.html

上一篇:纯JS实现本页面预览执行代码的效果
下一篇:练手JQ代码实现鼠标移上去显示浮动两边菜单

文章分类

相关阅读

随便看看