HTML5图片压缩旋转调整

最近项目中需要用到图片上传,但是目前照片拍的或者扫描的都会很大,直接上传到服务器会出现图片太大,文件打影响上传速度,还有如果图片的分辨率过大的话查看也是问题。因此想到了在前端利用html5 Canvas技术进行图片压缩后上传。不过压缩问题解决后又有问题了,客户端一般图片通过拍照或扫描会出现图片需要旋转后才能查看,因此想到了如果先把图片进行自定义旋转然后对此图片压缩上传。

参考了网上一些文章搞出了此功能

http://qings.blog.51cto.com/4857138/997998/

http://www.cnblogs.com/hutuzhu/p/5265023.html

http://leonshi.com/demo/canvas-compressor.html

下面就讲下具体实现方法吧

利用FileReader在图片载入的时候先将图片压缩提供预览,由于图片大小不一定,因此可以设置图片默认分辨率比例比如800*1000,有可能图片长宽都小于此设置值,因此要根据长宽的实际值与设置值的比例来确定具体采用哪个比例换算。图片旋转只能对原图做操作,这样才能保证旋转后按原图和设置值的比例重新压缩。

代码:

 var canvas = document.getElementById('canvas');
    var source = document.getElementById('source');
    var preview = document.getElementById('preview');

    var dataUrl;//图片压缩后路径

    var qualityLevel = 0.8;

    $(function () {
        $('#single').on('change', function (e) {
            var img = e.target.files[0]
            var reader = new FileReader();
            reader.readAsDataURL(img);
            reader.onload = function (e) { // reader onload start
                var url = reader.result;
                source.src = url;

            } // reader onload end

            reader.readAsDataURL(img);
        })
    })

    source.onload = function () {
        var width = source.width;
        var height = source.height;
        var context = canvas.getContext('2d');

        var newwidth = 800;
        var newheight = 1000;

        canvas.width = newwidth;
        canvas.height = newheight;

        //当宽度和高度都小于设置值
        if (width <= newwidth && height <= newheight) {
            newwidth = width;
            newheight = height;
        }
        //当宽度小于设置值高度大于设置值按高度比例调整
        if (width <= newwidth && height > newheight) {
            newwidth = newheight / height * width;
        }
        //当宽度大于设置值高度小于设置值案宽度比例调整
        if (width > newwidth && height <= newheight) {
            newheight = newwidth / width * height;
        }
        //当宽度和高度都大于设置值
        if (width > newwidth && height > newheight) {
            var bla = newwidth / width;
            var blb = newheight / height;
            if (bla > blb) {
                newwidth = width * blb;
                newheight = height * blb
            }
            else {
                newwidth = width * bla;
                newheight = height * bla;
            }
        }


        var sx = 0;
        var sy = 0;
        var sWidth = width;
        var sHeight = height;
        var dx = 0;
        var dy = 0;
        var dWidth = newwidth;
        var dHeight = newheight;

        $("#detail").html("W:" + sWidth + " H:" + sHeight)


        context.drawImage(source, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

        dataUrl = canvas.toDataURL('image/jpeg', qualityLevel);
        //preview.src = dataUrl;
    };

    function compress(pid) {
        var source = document.getElementById("pic_" + pid);
        var width = source.width;
        var height = source.height;
        var context = canvas.getContext('2d');

        var newwidth = 800;
        var newheight = 1000;

        canvas.width = newwidth;
        canvas.height = newheight;

        //当宽度和高度都小于设置值
        if (width <= newwidth && height <= newheight) {
            newwidth = width;
            newheight = height;
        }
        //当宽度小于设置值高度大于设置值按高度比例调整
        if (width <= newwidth && height > newheight) {
            newwidth = newheight / height * width;
        }
        //当宽度大于设置值高度小于设置值案宽度比例调整
        if (width > newwidth && height <= newheight) {
            newheight = newwidth / width * height;
        }
        //当宽度和高度都大于设置值
        if (width > newwidth && height > newheight) {
            var bla = newwidth / width;
            var blb = newheight / height;
            if (bla > blb) {
                newwidth = width * blb;
                newheight = height * blb
            }
            else {
                newwidth = width * bla;
                newheight = height * bla;
            }
        }


        var sx = 0;
        var sy = 0;
        var sWidth = width;
        var sHeight = height;
        var dx = 0;
        var dy = 0;
        var dWidth = newwidth;
        var dHeight = newheight;

        $("#detail").html("W:" + sWidth + " H:" + sHeight)


        context.drawImage(source, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

        dataUrl = canvas.toDataURL('image/jpeg', qualityLevel);
        //preview.src = dataUrl;
    }


    var quality = document.getElementById('quality');
    quality.addEventListener('keydown', function (e) {
        if (e.which === 13) {
            var value = e.currentTarget.value;
            value = value < 1 ? 1 : value;
            value = value > 100 ? 100 : value;
            qualityLevel = parseFloat(value / 100);
            document.getElementById('level').innerText = qualityLevel;
            source.onload();
        }
    }, false);

    function rotateImg(pid, direction) {
        //最小与最大旋转方向,图片旋转4次后回到原方向  
        var min_step = 0;
        var max_step = 3;
        var img = document.getElementById(pid);
        if (img == null) return;
        //img的高度和宽度不能在img元素隐藏后获取,否则会出错  
        var height = img.height;
        var width = img.width;
        var step = img.getAttribute('step');
        if (step == null) {
            step = min_step;
        }
        if (direction == 'right') {
            step++;
            //旋转到原位置,即超过最大值  
            step > max_step && (step = min_step);
        } else {
            step--;
            step < min_step && (step = max_step);
        }
        img.setAttribute('step', step);
        var canvas = document.getElementById('pic_' + pid);
        if (canvas == null) {
            img.style.display = 'none';
            canvas = document.createElement('canvas');
            canvas.setAttribute('id', 'pic_' + pid);
            img.parentNode.appendChild(canvas);
        }
        //旋转角度以弧度值为参数  
        var degree = step * 90 * Math.PI / 180;
        var ctx = canvas.getContext('2d');
        switch (step) {
            case 0:
                canvas.width = width;
                canvas.height = height;
                ctx.drawImage(img, 0, 0);
                break;
            case 1:
                canvas.width = height;
                canvas.height = width;
                ctx.rotate(degree);
                ctx.drawImage(img, 0, -height);
                break;
            case 2:
                canvas.width = width;
                canvas.height = height;
                ctx.rotate(degree);
                ctx.drawImage(img, -width, -height);
                break;
            case 3:
                canvas.width = height;
                canvas.height = width;
                ctx.rotate(degree);
                ctx.drawImage(img, -width, 0);
                break;
        }
        compress('source');
    }


demo下载


使用规范:  var file = $("#file_input")[0].files[0]; if(file.size / 1024 > 1024 * 5){ mui.toast('图片不能超过5M'); return; } //图片压缩 compress.rotatePhotoCompress(file,function(imageObj){ var formData = new FormData(); formData.append("uploadFile", imageObj, file.name); // 文件对象 //图片上传 uploadAdd(formData); }); /** * 图片上传 * @param formData */ function uploadAdd(formData){ var URL = apiUrl.addMultImageURL+"?plateTag=order&fileOwnerId=order&fileType=image&token;="+app.getToken(); $.ajax({ url: URL, //请求地址 type: "post", async: true, //默认为异步 data: formData, //参数 contentType: false, //数据请求格式 processData:false, xhr:function(){ myXhr = $.ajaxSettings.xhr(); if(myXhr.upload){ // check if upload property exists myXhr.upload.addEventListener('progress',function(e){ //显示进度条 $("#progress1").show(); var loaded = e.loaded;//已经上传大小情况 var tot = e.total;//附件总大小 var per = Math.floor(100*loaded/tot); //已经上传的百分比 mui("#progress1").progressbar({progress:per}).show(); }, false); // for handling the progress of the upload } return myXhr; },// 成功 success: function (data) { //隐藏进度条 $("#progress1").hide(); if (data.error == 0 && null != data.url) { mui.toast('上传图片成功'); $('.show_img').append("<div class='imgList'><span class='oClose'>X</span><img src="+app.fileUrl+data.url+"><input type='hidden' name='imgUrls["+count+"]' value="+data.url.replace(app.fileUrl,"")+"></div>"); count++; } else { mui.toast('上传图片失败'); $('#uploadPicButton').html('请你选择图片重新上传'); } }, error:function(rep) { $("#progress1").hide(); console.log(JSON.stringify(rep)); mui.toast('上传异常'); } }) }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值