前端图片压缩上传

2022-01-26 12:04:07 阅读：102 来源： 互联网

前端图片压缩上传

本文章主要是介绍了上传图片压缩
主要分四步走
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>

如有错误请指正

标签：canvas,压缩,image,file,var,上传,前端,图片
来源： https://blog.csdn.net/w2323232323/article/details/122698584

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端图片压缩上传

前端图片压缩上传