首页 > 上网技巧 > 电脑小技巧 > 前端网页压缩图片上传方案

前端网页压缩图片上传方案

时间:2020-06-08 09:54 作者:QQ地带 我要评论

思路:
 
用H5 FileReader 获取图片,以DataURL的形式读入页面,获取图片的base64编码信息
用canvas对图片进行压缩处理(包括压缩,旋转)
把用canvas api toDataURL ,把canvas转换成base64图片编码
talk is cheap ,let s see the code
 
1. FileReader获取图片的base64编码信息
 
  $(document).on("change", "#upload-photo-pic", function (e) {
 
            var file = this.files[0];
 
            var fileReader=new FileReader();
 
          //将文件以Data URL形式读入页面
 
           fileReader.readAsDataURL(file);
 
            fileReader.onload = function(e) {
 
                var imageUrl=e.target.result;
 
          //  借用canvas对base64图片进行压缩
 
               canvasPress(imageUrl);
 
        }
 
}
2.用canvas对图片进行压缩处理(包括压缩,旋转)
 
用canvas对图片进行处理前,先要通过以下三个步骤读图进canvas
 
在html代码里面添加一个隐藏的canvas,用来做图片处理
新建 new Image()
写 image.onload = function(){}回调,当 image.src = imgurl,图片加载完成的时候会执行回调,在回调中进行canvas操作。
上传图片太大了,要压缩,当然压缩的不是画质,而是照片的宽度(现在用单反或手机拍的,大则10几M,宽度7000px左右),我这边根据我的实际使用场景,如果图片宽度大于1200px,则统一把图片压缩成宽为1200px的图,缩放后1200*1800的图片,大小为2.8M左右。具体操作:
 
调整图片大小
if(image.width>maxWidth){
 
​ image.height*=maxWidth/image.width;
 
​ image.width=maxWidth;
 
}
 
调整画布大小
 
canvas.width = image.height;
 
canvas.height = image.width;
 
本以为压缩下就万事大吉了,但是,并没有(要解决一个倒图问题):用iphone拍照的时候,你可能横着拍,也可能竖着拍,还可能倒着拍,不同的拍照方式照片的exif信息会记录不同的 Orientation,所以要把Orientation这个值取到(exif图片信息读取https://github.com/exif-js/exif-js/),然后根据这个值去旋转图片。 (在android手机拍的照片在测试中没有出现以上的倒图问题)。
 
canvas旋转也要稍微注意下,它并不是给他一个参数,说转多少就多少,拿到图片你就可以直接用,我用 rotate进行旋转,如 ctx.rotate(90Math.PI/180),由于坐标系也发生旋转,所以在画图的时候,**\y***相对来说要有-height的偏移,如
 
ctx.drawImage(image, 0, -image.height, image.width, image.height);
 
 function canvasPress(imgurl){
 
//        如果图片宽度超过maxWidth,则宽度缩放至maxWidth
 
        var maxWidth=1200;
 
        var image = new Image();
 
        image.onload = function(){
 
            var canvas=document.getElementById("canvas-press");
 
            var ctx = canvas.getContext("2d");
 
            ctx.clearRect(0, 0, canvas.width, canvas.height);
 
//            缩放
 
            if(image.width>maxWidth){
 
                image.height*=maxWidth/image.width;
 
                image.width=maxWidth;
 
            }
 
            EXIF.getData(this, function(){
 
                var orientation=EXIF.getTag(this, 'Orientation');
 
                    switch(orientation){
 
                        case 6://需要顺时针(向左)90度旋转
 
                            // 重置canvas宽高
 
                            canvas.width = image.height;
 
                            canvas.height = image.width;
 
                            ctx.rotate(90*Math.PI/180);
 
//                            由于坐标系也发生旋转,所以是下面这样写的
 
                            ctx.drawImage(image, 0, -image.height, image.width, image.height);
 
                            break;
 
                        case 8://需要逆时针(向右)90度旋转
 
                            // 重置canvas宽高
 
                            canvas.width = image.height;
 
                            canvas.height = image.width;
 
                            ctx.rotate(-90*Math.PI/180);
 
//                            由于坐标系也发生旋转,所以是下面这样写的
 
                            ctx.drawImage(image, -image.width,0, image.width, image.height);
 
                            break;
 
                        case 3:
 
                            // 重置canvas宽高
 
                            canvas.width = image.width;
 
                            canvas.height = image.height;
 
                            ctx.rotate(180*Math.PI/180);
 
//                            由于坐标系也发生旋转,所以是下面这样写的
 
                            ctx.drawImage(image, -image.width, -image.height, image.width, image.height);
 
                            break;
 
                        default:
 
                            console.log('默认');
 
                            // 重置canvas宽高
 
                            canvas.width = image.width;
 
                            canvas.height = image.height;
 
                            ctx.drawImage(image, 0, 0, image.width, image.height);
 
                            break;
 
                    }
 
                //接下去调用截图插件
 
                setCroperInfo(canvas.toDataURL());
 
            });
 
        }
 
        image.src = imgurl;
 
    }
3.把用canvas api toDataURL
 
canvas.toDataURL()就可以直接拿到处理完毕的base64编码图片啦,然后你就可以按照自己想要的方式继续对图片进行处理了。
 
我在我的使用场景中,之后又调用了cropper对图片进行裁剪,然后传给后端进行保存。

标签: html
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告