如何使用FormData上传压缩裁剪后的图片Blob对象

简介: 在前端页面,我们通常会遇到需要用户上传图片的操作,可能还会在前端进行图片编辑的操作(比如头像的选区裁剪),然后如果图片过大的话,我们还会对图片进行压缩。这些功能我们通常通过Canvas来进行,最后使用Canvas API函数toDataURL来得到图片...

在前端页面,我们通常会遇到需要用户上传图片的操作,可能还会在前端进行图片编辑的操作(比如头像的选区裁剪),然后如果图片过大的话,我们还会对图片进行压缩。这些功能我们通常通过Canvas来进行,最后使用Canvas API函数toDataURL来得到图片的Base64字符串,然后当我们要上传到后台的时候,会面临2种选择:

  • 直接将图片的Base64字符串Post到后端进行处理和保存
  • 在前端将Base64字符串转换成二进制的Blob对象形式,再使用常规的文件上传形式(即FormData)来将其上传到后端

第一种方式对前端来说比较简单,主要的处理逻辑在后端。而第二种的话前端的工作就稍微复杂一些。考虑到后端采用接收二进制文件的方式来处理文件上传的情况比较多,所以我们来看一下前面所说的第二种情况在前端怎么来实现,以下是主要的示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用FormData上传压缩裁剪后的图片Blob对象</title>
</head>

<body>
    <input type="file" name="myfile" id="myfile" onchange="uploadHandler(event)">

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <script>
        function uploadHandler(e) {
            var files = e.target.files || e.dataTransfer.files;

            if (files && files.length > 0) {
                var file = files[0];

                resizeImage(file).then(function (result) {
                    return typeof result === 'string' ? convertToBlob(result, file.type) : result;
                }).then(function (blob) {
                    // 构建FormData
                    var formData = new FormData();
                    //注意:此处第3个参数最好传入一个带后缀名的文件名,否则很有可能被后台认为不是有效的图片文件
                    formData.append("file", blob, file.name); 
                    // 上传文件
                    $.ajax({
                        url: '/api/upload',
                        method: "POST",
                        data: formData,
                        cache: false,
                        processData: false,
                        contentType: false
                    }).then(function (res) {
                        console.log(res);
                    }).catch(function (err) {
                        console.log(err);
                    })
                });
            }
        }

        /**
         * 压缩裁剪图片
         */
        function resizeImage(file) {
            return new Promise(function (resolve, reject) {
                var reader = new FileReader();

                reader.onload = function () {
                    var img = new Image();

                    img.onload = function () {
                        var w = this.naturalWidth;
                        var h = this.naturalHeight;
                        var maxW = 500;
                        var maxH = 500;

                        // 如果图片尺寸小于最大限制,则不压缩直接上传
                        if (w <= maxW && h <= maxH) {
                            resolve(file);
                            return;
                        }

                        var level = 0.6;
                        var multiple = Math.max(w / maxW, h / maxH);
                        var resizeW = w / multiple;
                        var resizeH = h / multiple;

                        var canvas = document.createElement("canvas");

                        canvas.width = resizeW;
                        canvas.height = resizeH;

                        var ctx = canvas.getContext("2d");

                        ctx.drawImage(img, 0, 0, resizeW, resizeH);

                        var base64Img = canvas.toDataURL(file.type, level);
                        var arr = base64Img.split(",");

                        resolve(arr[1]);
                    };

                    img.src = this.result;
                };

                reader.readAsDataURL(file);
            });
        }

        /**
         * 将图片的base64字符串转换为Blob对象
         */
        function convertToBlob(base64Str, fileType) {
            var base64 = window.atob(base64Str);
            var len = base64.length;
            var buff = new ArrayBuffer(len);
            var uarr = new Uint8Array(buff);

            for (var i = 0; i < len; i++) {
                uarr[i] = base64.charCodeAt(i);
            }

            var blob = null;

            try {
                blob = new Blob([buff], { type: fileType });
            } catch (e) {
                var BlobBuilder = window.BlobBuilder = (
                    window.BlobBuilder ||
                    window.WebKitBlobBuilder ||
                    window.MozBlobBuilder ||
                    window.MSBlobBuilder
                );

                if (e.name === "TypeError" && BlobBuilder) {
                    var builder = new BlobBuilder();
                    builder.append(buff);
                    blob = builder.getBlob(fileType);
                }
            }

            return blob;
        }
    </script>
</body>

</html>

代码中值得注意的一点是下面这行代码:

formData.append("file", blob, file.name); 

如果不传第三个参数的话,生成的表单数据中,上传文件对应的filename会被设置为blob

通常情况下这也是没问题的。但是可能由于后端使用的不同框架或自己的逻辑代码的原因,对上传的文件名做了强制的后缀名检查,会发生报错导致上传失败,遇到这种情况,请记得使用上面的方式加上第三个参数,这样问题应该就能迎刃而解了。

目录
相关文章
|
9月前
|
开发者
处理base64图片数据的方式
处理base64图片数据的方式
75 4
|
存储 JSON 前端开发
前端下载文件以及上传图片预览,顺便了解arrayBuffer和blob
前端下载文件以及上传图片预览,顺便了解arrayBuffer和blob
1059 0
|
1月前
|
存储 Python
python实现图片与视频转换:将视频保存为图片,将批量图片保存为视频
python实现图片与视频转换:将视频保存为图片,将批量图片保存为视频
分享:批量多目录图片如何转换PDF,一次性转换多级目录批量的PDF的转换,合并,输出另存等问题,图片转PDF文件,批量图片转PDF文件,多级目录的图片转PDF文件,并且保存到不同的地方,全部搞定
本文介绍了如何高效地将图片转换为PDF,包括单张、多张及多级目录下的图片转换和合并。提供了软件下载链接(百度网盘、腾讯云盘),软件操作简便,支持保存原目录或自定义新目录。转换选项包括单个文件、多个文件夹单独转换以及合并转换。用户可通过双击路径访问源图片和转换结果。该工具特别解决了多级目录图片批量转换的难题,实现保存地址的自由设定,满足不同业务需求。
|
2月前
防止图片重复下载方案,图像压缩保存与压缩显示
防止图片重复下载方案,图像压缩保存与压缩显示
32 0
|
12月前
|
JavaScript 前端开发
图片转base64、判断图片大小、图片压缩、图片上传
文章主要介绍 `js` 实现压缩上传图片转base64,其他的框架(如React、Vue、Angular)也可借此参考。**这个方法真实可用,已在实际项目中运行**。
232 0
|
存储 编解码 前端开发
input上传图片并同步获取图片分辨率
🎈作为一名前端开发,页面交互少不了图片上传,但有时候我们需要对上传图片做一些限制,如尺寸要求和像素分辨率要求,所以这里我们一起来看看前端上传图片如何获取图片的分辨率。
338 0
像素缓冲区对象(PBO) 的Streaming-Texture上传 源码解析
像素缓冲区对象(PBO) 的Streaming-Texture上传 源码解析
197 0
像素缓冲区对象(PBO) 的Streaming-Texture上传 源码解析
|
图形学 异构计算
Unity 之 纹理类型导入设置和压缩格式介绍
你知道纹理导入正确设置和各平台压缩格式吗?本文教你如何将纹理资源导入到Unity并为其设置为对应平台需要使用的压缩格式,一起来看看吧~
858 0
Unity 之 纹理类型导入设置和压缩格式介绍

热门文章

最新文章