解决IOS系统手机拍照图片Canvas压缩上传后图片旋转的bug

有时候我们要手机上传图片到网上提交数据，但是可能图片的文件比较大，像拍照拍出来的就有可能有2m。这个时候就需要把图片压缩一下，如果在微信中的话可以调用微信的接口上传文件，但是有个更加通用的办法，就是用canvas来压缩上传。

用canvas压缩图片的原理就是读取图片的文件，然后把图片画在画布上，再用canvas自带的一个接口：

canvas.toDataURL(type,encoderOptions);

这里的第一个参数type就是图片的格式，默认会读取image/png。

第二个参数就比较重要了，这个参数就决定了图片压缩的程度，可以在0-1中选择一个值，当然推荐不要低于0.5，因为这样保存后的图片质量不太好。

这个方法执行完后会返回一个值，就是图片的base64格式的字符串，这个字符串就可以上传到服务端。

前段时间我在用这个方法上传图片的时候发现在ios下的图片上传会有一个bug，就是canvas转换后的图片会逆时针旋转90°，这样的话就不是我想要的效果了。所以在网上搜集了很多解决的方案，发现可以用一个插件EXIF.js来解决这个功能。

先来讲讲这个插件是用来做什么的，这个插件会读取图片的信息，然后返回一个值，这个值就是图片的旋转位置，6代表图片需要顺时针（向左）90度旋转才是正常的，8代表需要逆时针（向右）90度旋转，3表示图片是上下颠倒的。

下面是具体的代码：

function compress(img, fileType) {
            var canvas = document.createElement("canvas");
            var rotateshow;
            EXIF.getData(img, function(){
                EXIF.getAllTags(img);
                Orientation = EXIF.getTag(img,'Orientation');
                switch (Orientation){
                    case 6:
                        rotateshow = rotateImg(img,'left',canvas,fileType);
                        break;
                    case 8:
                        rotateshow = rotateImg(img,'right',canvas,fileType);
                        break;
                    case 3:
                        rotateImg(img,'right',canvas,fileType);
                        rotateshow = rotateImg(img,'right',canvas,fileType);
                        break;
                    default:
                        rotateshow = img.src;
                }
                toPreviewer(rotateshow);
            });
        }

不过之前我在的EXIF.js里发现一个问题就是getData获取不到img的属性，然后在我在这个插件里找到了相关的代码发现有一段代码判断图片的时候判断不对，导致代码不能执行下去：

EXIF.getData = function(img, callback) {
        /*if ((self.Image && img instanceof self.Image)
            || (self.HTMLImageElement && img instanceof self.HTMLImageElement)
            && !img.complete)
            return false;*/
        if (!imageHasData(img)) {
            getImageData(img, callback);
        } else {
            if (callback) {
                callback.call(img);
            }
        }
        return true;
    }；

所以就把这里注释掉了,在判断完图片的朝向后就要对图片进行处理，图片的旋转可以把图片画在canvas里然后用canvas的rotate方法进行旋转然后调用toDataURL来进行压缩，具体的代码如下：

            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');
            var step = 2;
            if (step == null) {
                step = min_step;
            }
            if (direction == 'right') {
                step++;
                //旋转到原位置，即超过最大值
                step > max_step && (step = min_step);
            } else {
                step--;
                step < min_step && (step = max_step);
            }
            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;
            }
            return canvas.toDataURL(fileType,0.75);
        }

至此图片上传bug就解决了，可以到我的github上查看我的源码：

https://github.com/Tinsson/Blog_demo/blob/master/picUpload/sign.html