js上傳圖片壓縮

飛燕發表於2019-02-16
JS

js實現圖片壓縮後上傳

用到的技術:

  1. canvas相關api
  2. html5的一些api

相容性:

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

實現思路:

  • 監聽檔案域的上傳,通過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壓縮並上傳

歡迎糾錯(完)

相關文章