使用Canvas壓縮圖片

時間 2019-12-11

標籤使用 canvas 壓縮圖片简体版

原文原文鏈接

講乾貨，不囉嗦，當涉及對圖片有質量壓縮要求的時候，可使用Canvas實現圖片壓縮。html

步驟：jquery

1.獲取img元素，既要壓縮的圖片canvas

2.建立canvas對象後端

3.使用canvas的drawImage方法繪製圖片測試

4.經過canvas toDataURl方法獲取圖像base64編碼，設置quality參數，實現壓縮編碼

參考示例：spa

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Canvas圖片壓縮測試</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container">
    <h2>壓縮前圖片</h2>
    <img id="originalImg" src="test.jpg">
    <h2>壓縮後圖片</h2>
    <img id="compressedImg" src="">
</div>
<script>
    $(document).ready(function(){
        compressImg(300,0.2)
    });
    function compressImg(width,quality ) {
        // 圖片壓縮方法，接受2個參數
        // width：壓縮後圖片寬度,高度按比例計算
        // quality：壓縮比例參數，範圍0-1
        var img=$("#originalImg")[0];//獲取圖像元素
        var height=width/img.width*img.height;
        //生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = width;
        canvas.height = height;
        //經過canvas drawImage方法繪製圖片
        ctx.drawImage(img,0,0,width,height);//後四個爲位置參數，左上角x,y座標，右下角x,y座標
        //經過canvas toDataURl方法獲取圖像base64編碼，quality爲壓縮質量參數，值越小圖像越模糊
        var base64 = canvas.toDataURL('image/jpeg', quality);
        //測試展現
        $("#compressedImg").attr("src",base64)
        //獲取到base64後可作進一步處理，如傳到後端並儲存
    }
</script>
<style>
    #originalImg{
        width: 300px;
    }
</style>
</body>
</html>