前端FileReader预览、canvas压缩图片并上传

奋斗的菜鸟.com

已于 2023-07-20 16:16:17 修改

阅读量1.1k

点赞数 3

文章标签： javascript jquery 前端

于 2022-04-26 20:53:25 首次发布

本文链接：https://blog.csdn.net/CodePrincess/article/details/124436392

版权

压缩图片预览并上传思路

用户通过input框选择图片
使用FileReader进行图片预览
将图片绘制到canvas画布上
使用canvas画布的能力进行图片压缩
将压缩后的Base64(DataURL)格式的数据转换成Blob对象进行上传（待更新）

认识上传文件元素 input type=‘file’

包含一个选择文件按钮和文字,file类型的input会有files属性，保存着文件的相关信息。
文件信息由传入的file对象组成

<body>
    <input type="file" name="" id="">
</body>
<script src="../../js/jQuery.min.js"></script>
<script>
type：字符串，文件的MIME类型；
lastModified：数值，表示最近一次修改时间的毫秒数；
lastModifiedDate：对象，表示最近一次修改时间的Date对象；
name：本地文件系统中的文件名；
size：文件的字节大小；
$('input[type=file]').change(function(e){
console.log(e.target);
console.log(e.target.files);  //FileList {0: File, length: 1}  
// File={name: "工单管理.png" , size: 3906, type: "image/png", webkitRelativePath: "",lastModified: 1627625792093,lastModifiedDate: Fri Jul 30 2021 14:16:32 GMT+0800 (中国标准时间) {}}
})

// $('input')[0].files =FileList {0: File, length: 1}  
</script>

input 元素的 file对象包含文本信息，但是读不到文件的具体内容，因此要通过新的对象:fileReader对象读取文件内容

const reader = new FileReader();
$('input[type=file]').change(function(e){
    let file=e.target.files[0];
    //readAsDataURL读取
    reader.readAsDataURL(file[0]); //会将文件内容进行base64编码后输出： 以data:url字符串输出文件内容
    reader.onload=function(readRes){
    console.log("加载完成: "+readRes.target.result);
//加载完成:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAPCUlEQVR4Xu2d67UVNxKFVRHYjmAgAkMEhghsIgAiMI7AEkcTTN9ChAQn258ahIFCMgkjqaZPgUIiE+3z0+p6tchhKchhB9CCPfiLyPFYo9+DCHg9yaE8FpE/lMs5ckSIiBOh6vqjyGElyEEQNJzABwvReRVz5nsNW8ExOEZVf0thPDM8eiWj9yJyPMtM7DHdxMQo9dU9UUI4RfjY71E/0lEfu0lM3vIBwExeElV0c/4cwfNqiWr0Ny6zz5JutO7ByQWyn.....(省略)
}


//readAsText读取
reader.readAsText(file[0]); //按字符读取文件内容，结果用字符串形式表示
reader.onload=function(readRes){
console.log("加载完成: "+readRes.target.result);
//加载完成:Bv��Bř�&;���p�e��t(�-�^��;��	ՅH��ֱv�*-.......
}
// File={name: "1234.png" , size: 3906, type: "image/png", webkitRelativePath: "",lastModified: 1627625792093,lastModifiedDate: Fri Jul 30 2021 14:16:32 GMT+0800 (中国标准时间) {}}
})

})

fileReader对象的方式如何实现图片预览？

readAsDataURL(file) 会将文件内容进行base64编码后输出：
以data:url字符串输出文件内容，读取文件成功之后，将url给img对象的src属性
reader.readAsText(file[0]); 按字符读取文件内容，结果用字符串形式表示

<img src="" id="imgPreview">
 reader.readAsDataURL(file[0]); //会将文件内容进行base64编码后输出： 以data:url字符串输出文件内容
    reader.onload=function(readRes){
    console.log("加载完成: "+readRes.target.result);
let base64_URL=readRes.target.result;
$("img").attr("src",base64_URL);

//新建一个img对象，把得到的文件url赋值给img src属性，实现预览
}

canvas 画布，绘制图像，容器，这里用来将图片绘制到画布上，并压缩

元素本身并没有绘制能力（它仅仅是图形的容器）绘制图像（通过脚本，通常是 JavaScript）
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。可用于在画布上绘制文本、线条、矩形、圆形等等。

需要掌握 getContext(‘2d’), drawImage() 是getContext(‘2d’)对象的一个方法

getContext() 方法返回一个用于在画布上绘图的环境。

语法

Canvas.getContext(contextID)
参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d"，
它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。

Canvas.getContext(“2d”) 该对象导出一个二维绘图 API。
ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
将图片绘制到canvas画布上
canvas.toDataURL(type,0.8); 使用canvas画布的能力进行图片压缩
该方法为同步方法，如果需要转换的Canvas尺寸很大，则会阻塞脚本的运行，因此需要注意控制Canvas的尺寸。

var ctx=Canvas.getContext("2d");
   ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
sx:可选，开始剪切的x坐标位置，
sy：可选 开始剪切的y坐标位置
swidth ：可选，被剪切图像的宽度
sheight：可选，被剪切图像的高度
x :在画布上放图像的x坐标
y:在画布放图像的 y 坐标
width:可选 要使用的图像的宽度
height:可选 要使用的图像的高度
reader.onload=function(readRes){
let base64_URL=readRes.target.result;
// $("img").attr("src",base64_URL);
let img=new Image();
img.src=base64_URL;
let type=file[0].type;
img.onload=function(){

    let canvas=document.createElement('canvas');
    let drawer=canvas.getContext('2d');
    let imageWidth = 600; //压缩后图片的大小
    let imageHeight = 200;
    canvas.width = imageWidth;
    canvas.height = imageHeight;

    drawer.drawImage(img,0,0,canvas.width,canvas.height);     //将图片绘制到canvas画布上

    const quality = 0.2; //设置压缩比例
    let canvars_url= canvas.toDataURL(type,0.8);// 使用canvas画布的能力进行图片压缩 该方法为同步方法，如果需要转换的Canvas尺寸很大，则会阻塞脚本的运行，因此需要注意控制Canvas的尺寸。

//先创建canvas画布，再获取canvas画布上的2d绘图环境，通过这个2d绘图环境才可使用绘制API

}
})