iT邦幫忙

0

canvas品質設定問題

以下是我的程式碼,想請問為何品質調為1時,圖片大小會比原圖大很多,反而沒有壓縮呢?
quality = 0.9 時也比原圖大

<!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>
  <style>
    canvas{
        display:none;
    }
  </style>
</head>
<body>
  <input id="file" type="file" multiple>
  <div id="a"></div>
  <script src="js/jquery.js"></script>
  <script>
        var fileInput = document.getElementById('file');
        var fileLists = [];
        var files;
        var room_id;
        var cover = 0;
        var checked;
        var quality = 1;
        $('#file').on('change', function(event) {
            files = fileInput.files;    //重新取得[input type='file']資料
            show_img();
        }); 
        function show_img(){
            if(fileLists.length == 0){
                checked = 1;
            }
            files = Array.prototype.slice.call(files);  //將偽數組轉成陣列   
            fileLists = fileLists.concat(files);  //concat() 方法用於連接兩個或多個數組(陣列) 
            //顯示圖片資訊
            if (files.length !== 0) {
                for (let i = 0; i < files.length; i++) {
                    let reader = new FileReader();              //FileReader 為預設物件,用來讀取檔案
                    let img = new Image();
                    reader.onload = function(e){
                            img.src = e.target.result;
                            img.onload = function(){
                                var canvas = document.createElement('canvas');      //創建canvas
                                var context = canvas.getContext('2d');              //2D圖像
                                // 图片原始尺寸
                                //console.log(img.src);
                                var originWidth = this.width;
                                var originHeight = this.height;
                                // 最大尺寸限制
                                if(originWidth>1024){
                                    var maxWidth = 1024, maxHeight = maxWidth*originHeight/originWidth;
                                }else{
                                    var maxWidth = originWidth;
                                    var maxHeight = originHeight;
                                }
                                // 目标尺寸
                                canvas.width = maxWidth;
                                canvas.height = maxHeight;

                                // 清除画布
                                
                                // 图片压缩
                                context.drawImage(img, 0, 0, maxWidth, maxHeight);
                                let base64 = canvas.toDataURL('image/jpeg',quality);
                                $('#a').append(canvas);
                                
                                console.log(base64);
                                let input_img = "<img src="+base64+">";
                                $('#a').append(input_img);                            
                            }
                        }
                    ; 
                    reader.readAsDataURL(files[i]);         //讀取檔案後執行load事件
                }      
            }
            event.target.value = "";                            //讓剛被刪除的圖片可重複上傳
        } 
  </script>
</body>
</html>
看更多先前的討論...收起先前的討論...
ccutmis iT邦高手 8 級 ‧ 2019-11-21 14:55:15 檢舉
https://developer.mozilla.org/zh-TW/docs/Web/API/HTMLCanvasElement/toDataURL

quality 的值是0~1 你設1就等於是100% 未壓縮是正常的,試試
var quality = 0.5;
我...我竟然看不懂 這程式碼
fillano iT邦超人 1 級 ‧ 2019-11-21 16:28:13 檢舉
jpeg畫到canvas以後,就等於是轉成bitmap,跟原來的jpeg一點關係也沒有了
fillano iT邦超人 1 級 ‧ 2019-11-21 17:05:44 檢舉
然後toDataUrl(),只是把bitmap再轉成支援的格式(jpeg等),然後把binary用base64編碼。

1 個回答

0
淺水員
iT邦新手 1 級 ‧ 2019-11-21 20:16:18

影響縮圖後大小的原因有很多:

  • 尺寸
  • 圖片複雜度
  • 重複儲存增加雜點(jpg這種破壞性壓縮可能發生)
  • 瀏覽器本身的演算法

如果原圖並沒有比規定尺寸大太多
的確滿有可能會縮圖後的檔案大小比原圖還大

jpg 一般是用在照片上
允許某些程度的失真在使用的
如果希望無損壓縮
我還是會採用 png

我要發表回答

立即登入回答