前端图片压缩上传

2023-11-18 20:06:22

前端图片压缩上传

本文章主要是介绍了上传图片压缩
主要分四步走
1.input上传
2.fileReader转base64预览
3.canvas压缩
4.转换成bold上传图片
1.图片上传，input普通上传

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="file" id="ips" onchange="change(this)">//change获取到上传的文件内容
</body>

</html>

2.FileReader
FileReader这个对象是做什么的？
主要是用来读取file对象和Blob对象,file对象<input type="file">的对象，Blob是二进制对象
FileReader.onload钩子函数，在这里边处理
FileReader.readAsDataURL：读取方法，返回base64

var render = new FileReader()
render.readAsDataURL(file)
rener.onload=function(ev){
	console.log(ev)//ev.target.result就是获取到的base64
}

3.canvas
canvas压缩图片会用到两个方法drawImage，toDataURL。其中canvas.toDataURL可以实现图片的压缩，canvas.drawImage将选中的图片文件在画布上绘制出来
context.drawImage()经常用到的五个值

 context.drawImage(image（上传的图片）, x（在画布上的横坐标）, sy（在画布上的纵坐标）, Width（在画布上的宽）, Height（在画布上的高）);

context.toDataURL(type,quality)type文件类型默认是image/png,可以自己定义，quality图片质量值在0-1范围内,越小图片压缩的倍数越大

	//先创建canvas画布
	var canvas = document.createElement('canvas');
	//返回一个在画布上绘制2d图的环境对象
     var context = canvas.getContext('2d');
     context.drawImage(image, 0, 0, image.width, image.height);
     canvas.toDataURL(file.type, 0.4)

4.canvas的blob

canvas.toBlob(callback（回调返回blob）, Type（文件类型同toDataURL里边的）, quality（同toDataURL的图片质量）)

 canvas.toBlob(function (blob) {
                        console.log(blob)//这个时候就是缩小的图片
 },file.type,0.2);

整体代码为

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="file" id="ips" onchange="change(this)">
    <script>
        function change(e) {
            var file = e.files[0]
            console.log(file)
            this.filereader(file)
        }
        //读取指定的Blob中的内容 filereader转成base64
        function filereader(file) {
            var render = new FileReader()
            var image = new Image();
            render.readAsDataURL(file)
            render.onload = function (ev) {
                image.src = ev.target.result
                image.onload = function () {
                    var canvas = document.createElement('canvas');
                    var context = canvas.getContext('2d');
                    context.drawImage(image, 0, 0, image.width, image.height);
                    canvas.toDataURL(file.type, 0.4)
                    canvas.toBlob(function (blob) {
                        console.log(blob)//这个时候就是缩小的图片
                    },file.type,0.4);
                }
            }
        }

    </script>
</body>

</html>

如有错误请指正

码农公寓

前端图片压缩上传

相关文章