前端js方式实现图片上传前缩放大小

scofie1d

已于 2024-05-22 14:13:13 修改

阅读量910

点赞数 38

文章标签： javascript 前端开发语言

于 2024-05-21 17:02:17 首次发布

本文链接：https://blog.csdn.net/Scofield_liu/article/details/139097173

版权

直接贴代码

<html>
<head>
<title>前端js图片压缩</title>
<style>
#previewImg,#compressedImg{display:inline-block;width:300px;height:auto;}
#previewImg,#compressedImg{display:none;}
</style>
</head>
<body>
<input type="file" id="selectFile" />
<hr/>
<dl>
    <dt>压缩前的图片</dt>
    <dd><img src="" id="previewImg" /></dd>
    <dd id="beforeCompress"></dd>
</dl>
<canvas id="canvas" style="display: none;"></canvas>
<hr/>
<dl>
    <dt>压缩后的图片</dt>
    <dd><img src="" id="compressedImg" /></dd>
    <dd id="afterCompress"></dd>
</dl>
<hr/>
<div id="info"></div>

<script type="text/javascript">
var selectFile = document.getElementById("selectFile")
var previewImg = document.getElementById("previewImg")
var compressedImg = document.getElementById("compressedImg")

var beforeCompress = document.getElementById("beforeCompress")
var afterCompress = document.getElementById("afterCompress")

var info = document.getElementById("info")



// 这里是入口，获取上传时选择的文件流

selectFile.onchange = function(e) {
    var input = e.srcElement;
    var files = input.files;
    var file = files[0];

    var reader = new FileReader();
    reader.onload = function () {
        var img = new Image();
        img.src = reader.result;
        previewImg.setAttribute('src', img.src);
        previewImg.style = "display:inline-block;";
        img.onload = function () {
        
            // 注意：图像绘制时，必须保证资源已经加载完成
            
            var p1 = document.createElement('p')
            p1.innerHTML = `图片的原始宽度: ${img.naturalWidth}px`
            
            var p2 = document.createElement('p')
            p2.innerHTML = `图片的原始高度: ${img.naturalHeight}px`
            
            var p3 = document.createElement('p')
            p3.innerHTML = `图片的原始大小(byte): ${file.size}`
            
            beforeCompress.appendChild(p1)
            beforeCompress.appendChild(p2)
            beforeCompress.appendChild(p3)
            
            draw(img, file)
        }

    }
    reader.readAsDataURL(file);
}


function draw(img, file) {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');


    // 设置 canvas 的宽高，默认同比缩小1倍，其他缩放策略可自行设置。
    canvas.width = img.naturalWidth/2;
    canvas.height = img.naturalHeight/2;
    
    // 将图片绘制到 canvas 上
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);


    // 获取压缩后的图片数据



    // 可调整质量参数
    const compressedData = canvas.toDataURL(file.type, 0.7);



    // 创建一个新的压缩后的 File 对象
    const compressedFile = dataURItoBlob(compressedData, file.type);
    compressedFile.lastModifiedDate = file.lastModifiedDate;
    compressedFile.name = file.name;

    
    
    var reader = new FileReader();
    reader.onload = function () {
        var img = new Image();
        img.src = reader.result;
        compressedImg.setAttribute('src', img.src);
        compressedImg.style = "display:inline-block;";
        img.onload = function () {
 
            
            var p1 = document.createElement('p')
            p1.innerHTML = `压缩后图片的宽度: ${img.naturalWidth}px`
            
            var p2 = document.createElement('p')
            p2.innerHTML = `压缩后图片的高度: ${img.naturalHeight}px`
            
            var p3 = document.createElement('p')
            p3.innerHTML = `压缩后图片的原始大小(byte): ${compressedFile.size}`
            
            afterCompress.appendChild(p1)
            afterCompress.appendChild(p2)
            afterCompress.appendChild(p3)
            
            
            var p4 = document.createElement('p')
            p4.innerHTML = `压缩后图片的大小减少了: ${(parseFloat((file.size-compressedFile.size)/file.size).toFixed(2)*100)}%`;
            info.appendChild(p4)
        
            
        }

    }
    reader.readAsDataURL(compressedFile);
    
    
    
    
    
    // 这里是出口，compressedFile是文件流，继续后面上传的操作
    // uploadImage(compressedFile);


}

function dataURItoBlob(dataURI, mimeType) {
    const binary = atob(dataURI.split(',')[1]);
    const array = [];
    for (let i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], { type: mimeType });
}

</script>
</body>
</html>