js上傳圖片壓縮

時間 2019-12-04

原文原文鏈接

js實現圖片壓縮後上傳

用到的技術:html

canvas相關api
html5的一些api

兼容性:前端

h5沒發現問題,pc低版本瀏覽器不支持

實現思路:html5

監聽文件域的上傳,經過FileReader api獲取到圖片的原始數據
計算壓縮後的寬高,而後經過畫到canvas上在截取出壓縮後的數據

<!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>Document</title>
</head>

<body>
    <input type="file" id="file">
    <canvas id="canvas"></canvas>
</body>

</html>
<script>
    // 兼容性 h5上能夠使用,pc低版本瀏覽器不支持
    // 準備要用到的img和canvas
    var img = new Image(),
        canvas;
    // 建立讀取文件對象
    var render = new FileReader();
    // 若是不須要放在頁面上,使用js建立該元素就能夠了
    // canvas = document.createElement('canvas');

    // 找到canvas,準備畫圖
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    var input = document.getElementById('file');
    input.addEventListener('change', function (e) {
        // 經過files獲取到當前文件
        var file = e.target.files[0];
        // 若是選擇的是圖片
        if (file.type.indexOf('image') != -1) {
            // 讀取file文件,獲得的結果爲base64位
            render.readAsDataURL(file);
        };
    });
    render.onload = function (result) {
        // 把讀取到的base64圖片設置給img的src屬性
        var src = render.result;
        img.src = src;
    };
    img.onload = function () {
        // 加載完畢後獲取圖片的原始尺寸
        var origin_width = this.width;
        var origin_height = this.height;
        // 設置最大容許寬高,根據需求本身設置,值越大,圖片大小越大
        var max_width = 400;
        var max_height = 400;

        // 最終寬高
        var target_width = origin_width;
        var target_height = origin_height;
        if (origin_width > max_width || origin_height > max_height) {
            if (origin_width / origin_height > max_width / max_height) {
                // 更寬，按照寬度限定尺寸
                target_width = max_width;
                target_height = Math.round(max_width * (origin_height / origin_width));
            } else {
                target_height = max_height;
                target_width = Math.round(max_height * (origin_width / origin_height));
            }
        }
        canvas.width = target_width;
        canvas.height = target_height;
        // 繪畫到畫布上
        context.drawImage(img, 0, 0, target_width, target_height);
        /*
            此處獲得的是blob對象,blob對象是在ie10及以上才兼容,在ios8_1_1上和iphoneSE上有兼容問題
            canvas.toBlob(function(result) {
                console.log(result);
            });
        */
        // 讀取canvas的數據
        var result = canvas.toDataURL();
        // 獲得的結果是base64位的字符串,拿到壓縮後的值經過網絡請求交給後臺處理...
        // 若是是blob對象,須要經過FormData對象發送
        console.log(result);
    };

</script>

以上參考了張鑫旭的HTML5 file API加canvas實現圖片前端JS壓縮並上傳ios

歡迎糾錯(完)canvas