移动端图片压缩上传实现

移动端图片压缩上传实现

移动端上传的图片一般都是手机照片,现在的手机都是高清像素,一张图片都在三四兆,直接上传不仅传输速度慢,而且如果用户使用的是流量,势必会耗费大量流量。

H5的各种API在移动端的主流浏览器都得到了很好的支持,比如案例中用到的FileReader、Blob、FormData、canvas等API,所以压缩上传图片在前端已经是必备的操作。

压缩上传基本操作流程:
  1. 图片上传后使用FileReader将文件读取成base64
  2. 创建Image,设置src属性为图片base64
  3. 创建canvas,绘制Image
  4. 调用canvas的toDataURL方法压缩,返回压缩后的base64
  5. 将base64转成Blob对象
  6. 创建FormData对象,append Blob对象,提交给服务端

下面是每一步的具体实现以及一些坑(比如:API的兼容性、IOS图片旋转、底色等),并贴上全部代码。

<input type="file" id="upload" accept='image/*'>

<h3>调用系统录制功能</h3>
<input name='video' type='file' id='video-input' accept='video/*' capture='camcorder' />

<h3>调用系统相机</h3>
<input name='video' type='file' id='video-input' accept='image/*' capture='camcorder' />
import EXIF from 'exif';
一、监听input的change事件,读取成base64。如果照片是竖着拍的,在IOS手机上传后图片会被旋转。这里需要用到一个库EXIF),可以获取相片的属性,比如曝光度、拍照方向、GPS等。图片加载完成后,在压缩前需要解决IOS图片是否被旋转的问题和图片压缩格式的问题。
  • 图片旋转

    1. 问题: IOS竖着拍的照片会旋转。
    2. 解决: 首先创建临时canvas,绘制图片,旋转成正确方向
  • canvas的toDataURL() 参数type的默认值是 “image/png”,如果传入的类型非“image/png”,但是返回的值以“data:image/png”开头,那么该传入的类型是不支持的。把类型统一设成jpeg,也就是统一用canvas.toDataURL('image/jpeg', 0.3) ,压缩默认值 0.92,这里我设的0.3。

let inp = document.getElementById('upload');

inp.onchange = function (event) {
    let file = event.target.files[0];
    let reader = new FileReader();
    let Orientation;

    // 读取文件转base64 
    reader.readAsDataURL(file);

    // 读取完成
    reader.onload = function () {
        let result = this.result;

        /**
          *  result.length 的单位是字节
          *  如果图片小于100K直接上传,反之压缩图片
         */
        if (result.length <= (100 * 1024)) {
            // 直接上传 调用API

        }
        else {
            // 创建image
            let image = new Image();
            image.src = result;

            // 图片加载完成
            image.onload = function () {
                //获取拍照的信息,解决IOS拍出来的照片旋转问题
                EXIF.getData(image, function () {
                    Orientation = EXIF.getTag(this, 'Orientation');
                });

                // 首先旋转成正确位置 再根据大小压缩 然后根据像素判断是否需要通过瓦片绘制
                let canvas;

                // 修复ios拍照上传图片的时被旋转的问题
                if (Orientation !== '' && Orientation !== 1) {
                    // 创建临时canvas  用来调整正确方位
                    canvas = document.createElement('canvas');

                    switch (Orientation) {
                        case 6://需要顺时针(向左)90度旋转
                            console.log(image.width, image.height);
                            rotateImg(image, 'left', canvas);
                            break;
                        case 8://需要逆时针(向右)90度旋转
                            rotateImg(image, 'right', canvas);
                            break;
                        case 3://需要180度旋转
                            rotateImg(image, 'right', canvas);//转两次
                            rotateImg(image, 'right', canvas);
                            break;
                    }
                }
                else {
                    canvas = compress(image);
                }

                // 对缩小比例后的canvas再进行压缩
                let compressData = canvas.toDataURL("image/jpeg", 0.3);  // 默认MIME image/png
                let blob = convertBase64UrlToBlob(compressData);

                // 提交数据
                submitFormData(blob);
            }
        }
    }
}
二、 解决了图片旋转和图片格式问题在压缩前需要解决canvas绘制图片的两个限制和图片格式转换的问题。
  1. 两个限制

    • 问题
    1. 第一是图片的大小:如果图片的大小超过两百万像素,图片也是无法绘制到canvas上的,调用drawImage的时候不会报错,但是你用toDataURL获取图片数据的时候获取到的是空的图片数据。

    2. 第二是canvas的大小有限制,如果canvas的大小大于大概五百万像素(宽 * 高)时,不仅图片画不出来,其他什么东西也都是画不出来的。

    • 解决方法
    1. 第一种限制,处理办法就是瓦片绘制。瓦片绘制,也就是将图片分割成多块绘制到canvas上,代码里的实现是把图片分割成100万像素一块的大小,再绘制到canvas上。

    2. 第二种限制,对图片的宽高进行适当压缩。具体实现以上限四百万像素为基准,如果图片大于四百万像素就压缩到小于四百万像素。

  2. 如果是png转jpg,绘制到canvas上的时候,canvas存在透明区域的话,当转成jpg的时候透明区域会变成黑色,因为canvas的透明像素默认为rgba(0,0,0,0),所以转成jpg就变成rgba(0, 0, 0 ,1)了,也就是透明背景会变成了黑色。解决办法就是绘制之前在canvas上铺一层白色的底色。

function compress(image) {
    let {width, height} = image;

    // 创建canvas 获取上下文
    let canvas = document.createElement('canvas');
    let ctx = canvas.getContext('2d');

    /**
    * 判断像素大小
    * 像素 = 宽 * 高 
    */

    // 如果像素大于400万 则需计算压缩比 压缩至400万以下
    let ratio = (width * height) / 4000000;

    if (ratio > 1) {
        // 倍数开方 (相当于面积为多少倍,则宽高对应的倍数需对面积倍数开方)
        ratio = Math.sqrt(ratio);

        // 宽高对应的值
        width /= ratio;
        height /= ratio;
    }
    else {
        ratio = 1;
    }

    // 画布宽高
    canvas.width = width;
    canvas.height = height;

    // 铺底色
    ctx.fillStyle = '#fff';

    // 绘制矩形
    ctx.fillRect(0, 0, width, height);

    // 如果缩放比例后画布像素仍大于100万像素 则使用瓦片绘制, 反之直接绘制
    let count = width * height / 1000000;

    if (count > 1) {
        // 创建瓦片 获取2d上下文
        let tcanvas = document.createElement('canvas');
        let tctx = tcanvas.getContext('2d');

        /**
         * 瓦片数量 = count的平方 + 1
         * +1不是必须得,是为了瓦片更小,数量更多一些
         */
        count = ~~(Math.sqrt(count) + 1);  // 比如count为2.3 则转成3

        let tWidth = ~~(width / count);
        let tHeight = ~~(height / count);

        // 瓦片的宽高
        tcanvas.width = tWidth;
        tcanvas.height = tHeight;

        for (let i = 0; i < count; i++) {
            for (let j = 0; j < count; j++) {
                tctx.drawImage(image, i * tWidth * ratio, j * tHeight * ratio, tWidth * ratio, tHeight * ratio, 0, 0, tWidth, tHeight);
                console.log(tcanvas.width, tcanvas.height, tcanvas.width * tcanvas.height);
                ctx.drawImage(tcanvas, i * tWidth, j * tHeight, tWidth, tHeight);
            }
        }
    }
    else {
        // 直接绘制
        ctx.drawImage(image, 0, 0, width, height);
    }

    return canvas;
}
  1. 完成图片压缩后,先将base64提取出来,再实例化一个ArrayBuffer,然后将字符串以8位整型的格式传入ArrayBuffer,再通过Blob对象(可能需要兼容Blob),将8位整型的ArrayBuffer转成二进制对象blob,然后把blob对象append到formdata里,再提交给后台。
function convertBase64UrlToBlob(urlData) {
    let bytes = window.atob(urlData.split(',')[1]);

    // 处理异常,将ascii码小于0的转换为大于0
    let ab = new ArrayBuffer(bytes.length);
    let ia = new Uint8Array(ab);
    for (let i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
    }

    // 二进制对象
    return getBlob([ab], "image/jpeg");
}
  1. 兼容Blob对象
/**
* Blob对象的兼容性写法
* @param buffer 数据流
* @param format 表示将会被放入到blob中的数组内容的MIME类型。类型默认 '' 
*/
function getBlob(buffer, format = 'image/jpeg') {
    try {
        return new Blob(buffer, {
            type: format
        });
    }
    catch (e) {
        let blob = new (window.BlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder)();

        buffer.forEach(function (buf) {
            blob.append(buf);
        });
        return blob.getBlob(format);
    }
}
  1. 低版本的Android机不支持FormData,需要做兼容处理。首先判断是否需要兼容
function needsFormDataShim() {
    return  ~navigator.userAgent.indexOf('Android')
            && ~navigator.vendor.indexOf('Google')
            && !~navigator.userAgent.indexOf('Chrome')
            && navigator.userAgent.match(/AppleWebKit\/(\d+)/).pop() <= 534;
}
  1. 给不支持FormData上传Blob的android机打补丁,定义boundary分隔符,设置请求体。重写XMLHttpRequest原型的send方法。
function FormDataShim() {
    let o = this,
        // 请求体 
        parts = [],
        // 分隔符
        boundary = Array(5).join('-') + (+new Date() * (1e16 * Math.random())).toString(36),
        oldSend = XMLHttpRequest.prototype.send;

    this.append = function (name, value, filename) {
        parts.push(`--${boundary}\r\nContent-Disposition: form-data; name="${name}"`);

        if (value instanceof Blob) {
            parts.push(`; filename="${filename || 'blob'}"\r\nContent-Type: ${value.type}\r\n\r\n`);
            parts.push(value);
        }
        else {
            parts.push('\r\n\r\n' + value);
        }
        parts.push('\r\n');
    };

    // override XHR send()
    XMLHttpRequest.prototype.send = function (val) {
        let fr,
            data,
            oXHR = this;

        if (val === o) {
            // 不能漏最后的\r\n ,否则服务器有可能解析不到参数.
            parts.push(`--${boundary}--\r\n`);

            // 创建Blob对象
            data = getBlob(parts);

            // Set up and read the blob into an array to be sent
            fr = new FileReader();
            fr.onload = function () {
                oldSend.call(oXHR, fr.result);
            };
            fr.onerror = function (err) {
                throw err;
            };
            fr.readAsArrayBuffer(data);

            // 设置请求头Content-Type的类型和分隔符 服务端是根据Content-Type来解析请求体中
            this.setRequestHeader(
                'Content-Type',
                `multipart/form-data; boundary=${boundary}`
            );

            XMLHttpRequest.prototype.send = oldSend;
        }
        else {
            oldSend.call(this, val);
        }
    };
}
  1. 提交数据。判断是否支持FormData
function submitFormData(blob) {
    let isNeedShim = needsFormDataShim();
    let formdata = isNeedShim ? new FormDataShim() : new FormData();

    formdata.append('imagefile', blob);
    
    if (isNeedShim) {
        let ajax = new XMLHttpRequest();

        ajax.open('POST', '/');
        ajax.onreadystatechange = function() {
            if (ajax.status === 200 && ajax.readyState === 4) {

            }
        }
        ajax.send(formdata);
    }
    else {
        // 调用API
        axios.post('/upload', formdata)
            .then(response => {
                console.log(response);
            })
            .catch(error => {
                console.log(error);
            });

        // axios 会根据提交的文件类型,设置相应的Content-Type类型
    }
}
  1. 旋转图片
/**
* @param 旋转的图片
* @param 方向
* @param 绘制的canvas
*/
function rotateImg(img, direction, canvas) {
    //最小与最大旋转方向,图片旋转4次后回到原方向
    const min_step = 0;
    const max_step = 3;

    if (img == null) return;

    // 缩小比例后的canvas
    let lessCnavas = compress(img);
    let {width, height} = lessCnavas;
    let 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);
    }

    //旋转角度以弧度值为参数
    let degree = (step * 90 * Math.PI) / 180;
    let ctx = canvas.getContext('2d');

    switch (step) {
        case 0:
            canvas.width = width;
            canvas.height = height;
            ctx.drawImage(lessCnavas, 0, 0);
            break;
        case 1:
            canvas.width = height;
            canvas.height = width;
            ctx.rotate(degree);
            ctx.drawImage(lessCnavas, 0, -height);
            break;
        case 2:
            canvas.width = width;
            canvas.height = height;
            ctx.rotate(degree);
            ctx.drawImage(lessCnavas, -width, -height);
            break;
        case 3:
            canvas.width = height;
            canvas.height = width;
            ctx.rotate(degree);
            ctx.drawImage(lessCnavas, -width, 0);
            break;
    }
}

以上就是压缩上传的全部实现。

推荐阅读更多精彩内容