网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发  > html5

html5实现图片压缩上传的具体方法-附源码

2021/3/28 22:02:16

图片上传的功能相信大家并不陌生,但通过html5实现移动端的图片上传可能接触的就少了,这不我们刚做了个项目就需要实现这样的功能,下来我就和大家聊聊关于移动端图片压缩上传功能是如何实现的?大体的思路是,部分API的兼容性请参照caniuse:1、利用FileReader,读取blob…

图片上传的功能相信大家并不陌生,但通过html5实现移动端的图片上传可能接触的就少了,这不我们刚做了个项目就需要实现这样的功能,下来我就和大家聊聊关于移动端图片压缩上传功能是如何实现的?

大体的思路是,部分API的兼容性请参照caniuse:

1、利用FileReader,读取blob对象,或者是file对象,将图片转化为data uri的形式。

2、使用canvas,在页面上新建一个画布,利用canvas提供的API,将图片画入这个画布当中。

3、利用canvas.toDataURL(),进行图片的压缩,得到图片的data uri的值

4、上传文件。

步骤1当中,在进行图片压缩前,还是对图片大小做了判断的,如果图片大小大于200KB时,是直接进行图片上传,不进行图片的压缩,如果图片的大小是大于200KB,则是先进行图片的压缩再上传:

<input type="file" id="choose" accept="image/*">
    var fileChooser = document.getElementById("choose"),
        maxSize = 200 * 1024;   //200KB
    fileChoose.change = function() {
        var file = this.files[0],   //读取文件
            reader = new FileReader();
            reader.onload = function() {
                var result = this.result,   //result为data url的形式
                    img = new Image(),
                    img.src = result;
                if(result.length < maxSize) {  
                    imgUpload(result);      //图片直接上传
                } else {
                    var data = compress(img);    //图片首先进行压缩
                    imgUpload(data);                //图片上传
                }
            }
            reader.readAsDataURL(file);
    }

步骤2,3:

    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');
    function compress(img) {
        canvas.width = img.width;
        canvas.height = img.height;
        //利用canvas进行绘图
        //将原来图片的质量压缩到原先的0.2倍。
        var data = canvas.toDataURL('image/jpeg', 0.2); //data url的形式
        return data;
    }


在利用canvas进行绘图的过程中,IOS图片上传过程中,存在着这样的问题:

1、当你竖着拿手机的时候,拍完照,上传图片时,会出现照片自动旋转的情况,而横着拍照并上传图片时不会出现这个问题。这个时候如果想纠正图片自动旋转的情况,将图片转化为二进制的数据(使用了binaryajax.js),方便获取图片的exif信息,通过获取exif的信息来确定图片旋转的角度(使用了exif.js),然后再进行图片相应的旋转处理。

2、在IOS中,当图片的大小大于 2MB时,会出现图片压扁的情况,这个时候需要重置图片的比例。

3、利用FileReader,读取图片的过程需要花费一定时间,将图片数据注入到canvas画布中需要一定时间,图片压缩的过程中,图片越大,CPU计算消耗的时间也越长,可能会出现顿卡的情况。总之,就是这个过程当中需要花费一定时间。

4、IOS8.1的版本中有个FileReader的bug: FileReader读取的图片转化为Base64时,字符串为空。

步骤4,文件上传有2种方式:

1、将图片转化为base64

2、将图片数据转为Blob对象,使用FormData上传文件

方式1可以通过xhr ajax或者xhr2 FormData进行提交。

简单点说就是:Blob对象是无法注入到FormData对象当中的。

当你拿到了图片的data uri数据后,将其转化为Blob数据类型

    var ndata = compress(img);
    ndata = window.atob(ndata); //将base64格式的数据进行解码
    //新建一个buffer对象,用以存储图片数据
    var buffer = new Uint8Array(ndata.length);
    for(var i = 0; i < text.length; i++) {
        buffer[i] = ndata.charCodeAt(i);
    }
    //将buffer对象转化为Blob数据类型
    var blob = getBlob([buffer]);
    var fd = new FormData(),
        xhr = new XMLHttpRequest();
    fd.append('file', blob);
    xhr.open('post', url);
    xhr.onreadystatechange = function() {
        //do something
    }
    xhr.send(fd);


在新建Blob对象中有需要进行兼容性的处理,特别是对于不支持FormData上传blob的andriod机的兼容性处理。

主要实现的细节是通过重写HTTP请求。

这就是html5实现图片压缩上传的具体方法,希望对大家有所帮助,如果有什么写的不够详细的地方,希望大家谅解!


相关资讯

  • html5新增元素document.queryselector属性

    document.queryselector其实也不算是html5的新增元素,它只是继承了html4的属性,今天我们就来说说document.queryselector属性如何使用? 先看一个实例,结合实例分析一下:<!DOCTYPE html><html><head> <meta charset="UTF-8"&a…

    2021/5/9 14:06:38
  • html5身份证照片上传及预览缩略图-附源码

    html5页面上传图片很方便,主要用到了html5的FileReader方法,今天我们就通过身份证照片上传作为例子来说说它的用法。调用FileReader对象的方法FileReader 的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功…

    2021/3/28 10:52:43
  • 用实例告诉你html5画图功能如何使用?附源码

    在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字。在代码中均给出了注释,在这里特别强调的一点是:使用canvas画图时有时候必须beginPath和colsePath,但有时不需要,为了防止出现问题…

    2021/3/21 14:51:36
  • 实例告诉您HTML5的WEB SQL数据库如何使用?含源码

    Web SQL数据库API实际上未包含在HTML 5规范之中,它是一个独立的规范,它引入了一套使用SQL操作客户端数据库的API。假设你是一名优秀的Web开发人员,那毫无疑问,你对SQL和数据库的相关概念已经很熟悉了,如果你对SQL不熟悉,那在继续阅读本文之前,最好先学习一下SQL相关…

    2021/3/9 22:21:35
  • HTML5如何实现浏览器页面全屏显示及退出全屏的效果?

    在越来越真实的web应用程序中,JavaScript也变得越来越给力.FullScreen API 是一个新的JavaScript API,简单而又强大. FullScreen 让我们可以通过编程的方式来向用户请求全屏显示,如果交互完成,随时可以退出全屏状态.在线演示Demo: Fullscreen API Example(在此Demo中,可…

    2021/3/9 22:17:42